yoon's Devlog

다음은 box 클래스의 스타일을 지정하고, 추가로 특정 요소의 스타일을 따로 지정하는 예제이다. 클래스의 스타일 지정은 태그 내에서, ".클래스명"{}으로 지정한다. 특정 요소의 스타일 지정방법에는 두가지가 있다. [특정 요소 스타일 지정하기] 1. 사용할 요소에서 바로 사용하기 div1 2. id를 사용하기 document.querySelector("#myDiv").addEventListener("mousedown",function(){ //-를 쓰면 산술연산자로 인식하여 원하는대로 나오지 않으므로 카멜 케이스를 사용한다 document.querySelector("#myDiv").style.backgroundColor = "yellow"; }); [좌표 활용하기] 객체 내의 좌표를 얻어내는 방법은 다음..

자바스크립트에서의 반복문은 C언어와 유사하다. for(let i = 0 ; i

document.querySelectorAll("div") 은 각 div의 참조값을 담은 배열이다. 다음 구조가 여러번 쓰일 때, stack에 document.querySelectorAll("div") 배열의 참조값을 저장한 변수 divs를 만들어 더 편리하게 사용할 수 있다.

emmet 축약어를 이용하여 마크업을 편리하게 할 수 있다. 자세한 사항들은 emmet.io에서 확인할 수 있다.

다음 예제는 클릭 시 어떠한 기능이 자동으로 수행되도록 구현하는 예제이다. 이벤트 처리 방법에는 다음 예제에 나와있는 두가지 방법이 있다. 첫번째 방법 ) 사용하기. 이벤트 처리 눌러보셈 두번째 방법 ) id와 .addEventListener 사용하기 이벤트 처리 눌러보셈2 document.querySelector("#아이디이름").addEventListener(이벤트명,콜백함수 function(){ }); 주로 두번째 방법을 많이 이용하므로 위의 코드를 통째로 외우는 것이 좋다. 여기서 콜백함수란, 전달만 해놓으면 나중에 특정시점에 알아서 호출되는 함수이다. 예제1은 클릭 시 함수가 실행되도록 구현한 예제로, 위의 두 방법을 모두 사용해본 예제이다. 똑같은 오브젝트가 여러개일 때에는, document...

1. 함수 호출 시 함수 안쪽으로 실행순서가 들어가고 끝나면, 혹은 return을 만났을 때 최소한 undefined라도 반드시 어떤 값을 가지고 온다. 2. undefined도 데이터 타입의 일종이다. 3. 함수는 일괄수행할 자바스크립트를 묶어놓는 기능을 한다. 첫번째 예제를 살펴보자. 예제1 f1함수를 제외하고는 모두 return을 해주는 모습을 확인할 수 있다. 위의 사진에서 let result1 = f1; 일 경우, result1의 data type은 function 이고, let result2 = f2();로 했을 때 f2함수를 호출하고 함수가 끝나고 리턴된 값이 999 즉 number data type이므로 result2의 data type 역시 number이다. 하지만 let result3 ..

1. 자바스크립트에서 순서가 있는 정보는 array에, 순서가 없는 정보는 object에 담아 관리한다. 2. 배열은 파이썬과 유사하고, 배열에 아이템 추가는 push함수를 사용한다. 3. splice함수는 삭제, 끼워넣기 기능을 수행할 수 있다. 삭제 시, splice(삭제를 시작할 index, 삭제할 갯수)로 사용하고, 끼워넣기 시, splice(끼워넣을 인덱스, 삭제할 갯수 0개, 새로운 item)으로 사용한다. 4. 배열에는 주로 한가지 데이터 타입을 담는 것이 일반적이다. => 따라서, 여러가지 데이터 타입을 한번에 관리하기 위해 배열에 plain object type 역시 담을 수 있다. 6. function도 데이터 타입의 일종이다. => 따라서 오브젝트에 함수도 담을 수 있다. 7. 함수 ..

자바스크립트에서는 let을 사용하여 데이터타입을 정의한다. 주의할 점!! 자바스크립트는 파이썬과 마찬가지로 스크립트 언어로 포인터를 사용하지 않는다. 따라서, 숫자, 문자열 등 '값'을 저정하는 변수는 데이터 copy가 되지만, object type을 '='을 사용하면 C언어의 포인터처럼 값 복사가 아닌 주소 참조가 된다. 예를 들자면, let mem1={num:1, name:"김구라", isMan:true}; let a = mem1; let tmp = a; mem1.num = 2; mem1.name = "hello"; mem1.isMan = False; 와 같이 코드를 짰을 때, 처음 예상하던 tmp의 기댓값은 {num:1, name:"김구라", isMan:true} 였지만, 실제 실행결과는 mem1이..