3일차 (6/17)

var varTest = "varTest1" console.log(varTest) // varTest1 var varTest = "varTest2" console.log(varTest) // varTest2 varTest = "varTest3" console.log(varTest) // varTest3 let letTest = "letTest1" console.log(letTest) // letTest1 let letTest = "letTest2" console.log(letTest) // Uncaught SyntaxError letTest = "letTest3" console.log(letTest) // letTest3 const constTest = "constTest1" console.log(constTest) // constTest1 const constTest = "constTest2" console.log(constTest) // Uncaught SyntaxError constTest = "constTest3" console.log(constTest) // Uncaught TypeError

// 반복문 for(초기값; 조건; 종료조건){ } while(조건){ // 조건이 참일 경우 계속 실행 } // 조건문 if(조건) { // 조건이 참일 경우 한번 실행 } else { // 조건이 거짓일 경우 한번 실행 }

var test1 = document.getElementById('test1').value; var test2 = document.getElementById('test2').innerHTML

$('#spit').fadeIn(); // #뒤의 값으로 id에 해당하는 곳 content를 fadeIn() 시킴 $('#click').click(function(){ // #뒤의 값으로 id에 해당하는 곳 content를 클릭할 경우 메서드를 실행함 console.log('hello'); });

html 파일의 body태그 하단에 <script> </script>를 넣어 사용하거나, 외부 js파일을 만들고 <script src='~~.js'></script> 등으로 연결하여 사용한다. // 주석 - 실행시키고 싶지 않거나 코드의 설명을 위할 때 사용. /* 블록형 주석 - 여러 줄을 한번에 주석처리 가능 */ 변수 : 값을 담고 저장할 수 있다. 객체, 배열, 숫자, 문자열 등등.. var , let, const Math.random(); //0 이상 1 미만의 float 생성. ex) Math.random() * 10 + 1 // 1 부터 10 사이 정수 생성. .parseInt(); //소수점 버리고 정수변환 .floor(실수) //소숫점 버리기 .substring(a,b) //문자열에서 일정 부분만 자르기 (a이상, b 미만 인덱스) 배열 : 하나의 변수가 아닌 여러개의 값들을 넣을 수 있음. var arr = [1,2,3,4,5,6]; arr[idx]로 접근 가능, 0부터 시작. .push 로 배열에 추가 가능. .length 배열의 길이 / 문자열의 길이 .sort(정렬조건) ex) arr.sort((a,b)=>a-b) // 오름차순 정렬 .indexOf(값) 배열에 값이 있으면 인덱스 값, 없으면 -1 반환 반복문 for(시작;끝;증가){ //특정 횟수만큼 반복 반복 내용 } while(조건){ //특정 조건을 만족하지 않을 떄까지 반복 반복 내용 } DOM = 웹 화면에 구성하는 html 코드르 쉽게 구성할 수 있게 만든 코드 document object model document.getElementById(tag) 특정 id를 가진 태그를 가져올 수 있음. .value or .intterHTML 로 태그 안의 값을 가져올 수 있음. 함수 : 명령의 모음. function 함수이름() {내용} 익명함수. 따로 함수를 정의하고 호출 할 필요 없이 필요한 곳 내에서 바로 호출하는 것, 콜백함수 함수가 실행이 끝난 다음에 바로 이어서 실행되는 함수. 이벤트 : 마우스 클릭, 값변화, 페이지 로딩 등 어떤 사건을 의미 이벤트 핸들링 : 어떤 이벤트가 발생할 시 다른 무언가를 실행하는것 ex) onkeydown - 키보드를 눌렀을 때 발생하는 이벤트 <button onkeydown = 'counter();'> 버튼을 눌렀을 시 counter() 함수를 실행 </button> jQuery js를 편리하게 작성할 수 있게 도와주는 라이브러리. 간결하고, 편리한 api, 크로스 브라우징이 특징이다. $(선택자).행위 jQuery 이벤트 $(객체).click(실행될 함수) .click(function(){}); // 안에 함수를 두고 그 안에 내용을 넣는다. 콜백 함수 .fadeIn() // 점점 나타나게 .fadeOut() // 점점 사라지게 .animate(properties,[duration],[erasing],[complete]) // 객체를 이동시키거나 효과를 줌 .css() // css 편집이랑 비슷한 기능 .attr() // 객체에 있는 class 등의 attribute 수정. .show() .hide() // 숨김 해제, 숨김처리