본문 바로가기
300x250

자바스크립트52

Dom 기본개념 정리(2)_알아두면 좋은 이벤트와 이벤트의 기본 문법, value와 textContent의 차이 이번 글에서는 Dom에서 event의 기본문접과 알아두면 좋은 event와 'value와 textContent의 차이 3가지에 대해 이야기해보겠습니다. 첫번째 value와 textContent의 차이는 html 태그를 생각해보시면 됩니다. 우리가 알고 있는 input, textarea 등과 같이 사용자가 직접 작성해야 하는 칸이 있을겁니다. 그 칸에 들어가는 사용자가 입력한 값이 value가 됩니다. textContent는 div, a, h1 등의 태그는 안에 저희가 설정한 값이 들어가게됩니다. 개발공부 화이팅 이라는 태그가 있다면 dom에서는 1 2 3 let h1Element = document.querySelecteot('h1') h1Element.textContent = "개발공부 화이팅" cs .. 2021. 5. 10.
react 리액트 반복문 만들기 map 이번 포스팅은 리액트에서 반복문을 만드는 방법에 대해 알아보겠습니다. 먼저 App.js에 만든 movies라는 변수의 형태입니다. 총 4개의 객체가 있는 배열입니다. 두번째는 renderMovies라는 변수를 선언하는데 movies라는 배열을 반복문을 돌려 같은 함수를 적용시킵니다. 밑에 보시면 movie라는 변수(24번 줄)를 선언하였는데 여기서 movie는 배열을 순서대로 도는 변수라고 생각하시면 될거같습니다. 인덱스로 나타내면 -> movies[0], movies[1], movies[2], movies[3] 이런 식으로 반복이 될겁니다. 여기서 movie는 movies[0], movies[1], movies[2], movies[3] 이거라고 보시면 됩니다. 배열안의 객체를 돌며 title과 id, .. 2021. 5. 10.
알고리즘_배열안의 배열 객체 만들기, 객체 오름차순 비교 개인 정보를 담은 배열을 입력받습니다. 조건에 맞게 각 개인의 전체 이름을 요소로 갖는 배열을 리턴해야 합니다. 조건1) firstName 과 lastName 이 모두 있으면 나타내고 하나만 있을때는 하나만 나타내줍니다. 조건2)사람들의 나이는 모두 다르고, 오름차순으로 정렬해야합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 let peoplelist = [ [ ['firstName', 'goo'], ['age', 42], ['gender', 'male'], ], [ ['firstName', 'kim'], ['lastName', 'gangjun'], ['age', 30], ['gender', 'female'], ], [ ['lastName', 'lee'], ['a.. 2021. 5. 9.
알고리즘_아이소그램 문제풀이 문자열을 입력받아 아이소그램인지 여부를 리턴해야 한다. 아이소그램은 각 알파벳을 한 번씩만 이용해서 만든 단어나 문구를 말한다. isogram 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function isIsogram(str) { let newStr = str.toLowerCase(); let result = true; if(str.length === 0){ return result; } for(let i = 0; i 2021. 5. 9.
문자열을 정수로 바꾸는 함수 parseInt() 와 parseFloat() 정리/Java script 문자열을 정수로 바꿔주는 함수 2가지 1. parseInt(string [. n]) 문자열을 정수로 바꾸는 함수이다. 특징 1)[.n]은 옵션이다 들어갈 수 있는 숫자는 2,4,8,10,16,36 - n진법일때의값으로 바꾼다. (하지만 아직 나에겐 쓸일이 없다.) - 안쓰면 그냥 10진법 2)소수부분이 있으면 버린다. 3)띄어 쓰기로 여러개의 수가 있으면 첫번째 수만 바꿔준다. 4)공백으로 시작하면 공백 무시 5)수가 아닌 문자면 NaN을 반환 예시) parseInt('25.34') ===> 25 parseInt('200', 10 ) ===> 200 parseInt('100', 2) ===> 4 parseInt('0x100') ===> 256 2. parseFloat(string) 문자열을 실수로 바꿔주.. 2021. 5. 9.
유효성 검사 하기_code states 과제 4주차에 진행했던 유효성 검사 과제이다. 아이디가 4글자이상이면 사용할 수 있는 아이디라고 뜨고, 비빌번호는 비밀번호 확인이랑 같아야 한다. dom으로 진행하였다. 모바일 폼과 브라우저 크기에 맞쳐서 css 스타일을 변화하게 만들어봤다. 겉표지만 만든거고 아직 부족하지만 재밌는 과제였다. 코드는 밑에 에서 확인하실수있습니다. github.com/dydwns2441/validation-check dydwns2441/validation-check Contribute to dydwns2441/validation-check development by creating an account on GitHub. github.com 2021. 5. 8.
HTML 필수 태그 정리(2)_리스트, 정의, 인용,list,ul,ol,li,description list,div,span,quotations html 태그 정리 두번째 입니다. 오늘은 tag 크게 5개의 태그를 준비했습니다. 첫번째. lists 리스트 입니다. ul은 unordered list로 순서가 상관없을때 쓰고 ol은 order list 로 순서가 필요할때 사용합니다. ul과 ol의 자식요소로 li (list item)이 있습니다. 사용법도 간단합니다. ul 태그를 사용한 경우 오른쪽의 결과를 가집니다. ol 태그를 사용할 경우 오른쪽의 결과를 가집니다. 두번째. description list 정의 리스트 입니다. 이것은 용어를 정리할 때 사용하며, 로 정보제공할때 사용합니다. 은 정의리스트를 쓰겠다고 말하는 태그이다. 이 안에 정의 내리려는 이름 태그와 정의의 밸류값 태그 이다. 다음과 같이 사용한다. 세번째. Quotations 인.. 2021. 5. 3.
자바스크립트_화살표함수(arrow function) 개념정리 오늘은 화살표 함수에 대해 알아보겠습니다. 화살표 함수는 ES6에서 처음 등장한 새로운 함수 선언 방법입니다. 함수 선언식 : function 키워드로 단독으로 함수를 선언한 것 1 2 3 function sum(num1, num2) { return num1 +num2; } cs 함수 표현식 : 변수에 함수를 할당한 것 1 2 3 4 const sum = function sum( num1, num2 ) { return num1 + num2; } Colored by Color Scripter cs 화살표 함수 => 화살표를 이용해서 선언하는 것 기존의 함수 선언 코드에서 구조를 비교할것 1 2 3 4 const sum = (num1, num2) => { return num1 + num2; } cs 만약 위.. 2021. 4. 28.
자바스크립트(java script) 배열(Array) 정리(1) 배열의 순서,요소,pop,push,shift,unshift 배열(Array) 간단하게 "순서가 있는 값"을 말합니다. let arr =[ 1, 45, 3, 8, 7 ]; 위에 보이는 간단한 식처럼 배열은 대괄호로 나타내며 쉼표를 사용하여 요소를 나눕니다. 순서 index, 요소 element 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 .. 2021. 4. 25.
반응형

티스토리툴바