NULL

var myButton = document.querySelector('button'); var myHeading = document.querySelector('h1'); 새로 추가된 버튼과 제옥을 참조하여 변수에 저장합니다. function setUserName() { var myName = prompt('Please enter your name.'); localStorage.setItem('name', myName); myHeading.textContent = 'Mozilla is cool, ' + myName; } prompt는 사용자가 데이터를 입력하도록 요청하는 것이고 사용자가 입력한 데이터를 변수에 저장합니다. 브라우저에 데이터를 저장하고 나중에 불러올 수 있도록 해주는 localStorage라..

var myImage = document.querySelector('img'); myImage.onclick = function() { var mySrc = myImage.getAttribute('src'); if(mySrc === './images/img.jpg') { myImage.setAttribute ('src','./images/img2.png'); } else { myImage.setAttribute ('src','./images/img.jpg'); } } var myImage 변수에 img를 저장합니다. 이미지를 클릭하면 함수를 실행시킵니다. var mySrc 변수에 src값을 가져온다. 그리고 if문으로 조건이 맞다면 img2.png를 불러오고 아니라면 img.jpg를 불러온다. 이렇게 하..

이벤트 이벤트는 브라우저에서 발생하는 일에 대해 반응하는 코드입니다. 클릭 이벤트를 예로 들자면 document.querySelector('html').onclick = function() { alert('Ouch! Stop poking me!'); } html을 클릭할 시 해당 알림창을 띄웁니다. 이 외에도 다양한 이벤트와 요소에 이벤트를 붙이는 방법이 많습니다. 사진과 같이 두 가지 방법으로 이벤트를 사용할 수 있습니다. 효과는 동일합니다.

함수는 코드의 집합을 나타내는 자료형이며 함수를 변수에 할당 또는 리턴 할 수 있습니다. 위와 같이 매개변수로 받아서 실행마다 재사용할 수도 있으며 괄호안에 콤마로 구분한다.

코드리뷰를 하자면 iceCream 값이 참이라면 Yay, I love chocolate ice cream!을 알림으로 출력하고 거짓이라면 Awwww, but chocolate is my favorite...를 알림 출력합니다.

사칙 연산은 기초수학에서 다루는 내용과 동일하며, 할당( = ) 은 값을 저장하거나 초기화할때 사용합니다. 그리고 동등은 다른 언어와는 다르게 =를 하나 더 써서 총 = 3개를 씁니다. 부정기호 역시 ! 는 기존과 같지만 !==

기존의 html, css와 동일하다

var와 let가 있는데 let는 es6에서 쓴다고 하니 패스하겠습니다. 위와 같이 변수에 자료형(문자, 정수, 참,거짓) 등을 저장할 수 있습니다. 그리고 이미 값이 있는 변수에 다른 값으로 초기화도 가능합니다. 변수는 여러 자료형을 가질 수 있다. 위부터 차례대로 string 문자열의 자료형태이고, 정수를 저장한다거나 Boolean으로 참, 거짓을 다룰 수 있고 Array로 여러 값의 자료형은 하나의 배열에 저장할 수도 있으며, Object로 어떤 변수든 저장이 가능합니다.

justify-content (가로 정렬) flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. align-items (세로 정렬) flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다. baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다. stretch: 요소들을 컨테이너에 맞도록 늘립니다. flex-directi..

sorted = 기존 리스트는 건드리지 않고, 정렬된 새로운 리스트를 리턴 사용법 방법 1 new list = sorted(numbers) 작은 숫자부터 차례대로 정렬 된다. 방법 2 반대정렬 할땐 reverse를 쓴다. reverse는 반대라는 의미다. new list = sorted(numbers, reverse=True) 이렇게 하면 반대인 큰 숫자부터 차례대로 정렬된다. sort = 아무것도 리턴하지않고, 기존 리스트를 정렬 사용법 방법1 리스트 이름.sort() 하고 기존 리스트를 출력해보면 정렬된 걸 볼수있다. 방법2 반대정렬은 마찬가지로 리스트이름.sort(reverse=True)를 쓰면 된다.