primavera

요소의 style 속성에 접근해서 글자색을 바꿀 수 있다! const title = document.querySelector('div.hello:first-child h1'); title.style.color = 'blue'; event란? - click 하는 것 - 마우스를 올리는 것 - 입력을 끝내는 것 - wifi 접속이 해제되는 것 -... 등등 이 모든 이벤트들을 자바스크립트는 listen 할 수 있다. click 이벤트 addEventListener(listen 할 이벤트, 이벤트 후 실행할 함수) 실행할 함수에는 handleTitleClick처럼 이름만 써준다. 주의! handleTitleClick()처럼 뒤에 괄호를 넣으면 함수가 바로 실행된다. const title = document.q..

콘솔에 document라고 치면 내가 작성한 html을 가져올 수 있다. document는 html을 가리키는 객체이다. document가 html를 가리키기 때문에, html에 작성한 title도 가져올 수 있다. object의 property를 수정했던것처럼 document.title을 수정할 수 있다. 수정하면, 창의 이름이 바뀐다! 자바스크립트가 HTML에 연결되어 있다. 자바스크립트는 document를 통해 HTML에 접근할 수 있다! HTML 파일에 접근하기 1 : getElementById() html 파일에 이렇게 적은 후 Grab me! 콘솔에서 이 요소에 접근하기 콘솔에서 접근한 것처럼, 자바스크립트 파일에서 접근할 수 있다 요소 확인하기 const title = document.get..

조건문에 대해 알아보기 전에 prompt에 대해 먼저 살펴보자. prompt() const age = prompt('How old are you?'); console.log(age); alert()에서 봤던 것처럼 창이 뜨고, 페이지가 계속 로딩중이다. prompt는 - 사용자에게 메시지를 보여주고 값 입력을 기다린다. - 사용자가 입력할 때까지 javascript를 멈추고 기다린다.(페이지가 계속 로딩중) - 그렇기 때문에 prompt를 실제로는 잘 쓰지 않는다. -> 페이지 계속 로딩중, 스타일 변경 불가 - '취소'를 누르면 null이 뜨고 - 아무 입력도 하지 않은 상태에서 '확인' 버튼을 누르면 아무것도 보이지 않는다. # 제대로 값을 입력해보자 이 값은 integer일까? 값의 타입을 확인해보..

const calculator = { plus: function (a, b) { alert(a + b); }, minus: function (a, b) { alert(a - b); }, multiply: function (a, b) { alert(a * b); }, divide: function (a, b) { alert(a / b); }, power: function (a, b) { alert(a ** b); }, }; console.log(calculator.plus(2, 3)); 위 코드의 결과는 아래와 같다. calculator의 plus를 호출했기 때문에 alert함수를 통해 알람이 뜬다. 그 후에 console.log를 호출하는데, 이런.. 결과가 undefined가 나오게 되었다. 우리는 2..

함수가 없다면.. console.log("Hello my name is Spring"); console.log("Hello my name is Summer"); console.log("Hello my name is Autumn"); console.log("Hello my name is Winter"); 끝에 있는 이름만 달라지는데, 똑같은 코드를 계속 써줘야 한다 굉장히 비효율적이다. -> 함수를 사용해서 반복되는 코드를 줄이자! 함수 만들고 호출하기 function sayHello(x) { console.log('Hello!'); } sayHello(); sayHello(); sayHello(); 이 경우 sayHello 함수가 같은 동작(Hello!출력)을 하기 때문에 그다지 쓸모가 없다. argum..

const playerName = "spring"; const playerPoints = 121212; const playerHandsome = true; const playerFat = "little bit"; //이렇게 일일이 변수로 나열해주기 보단 player.name player.points player.handsome //이렇게 쓰는 것이 더 효율적 const player = ["spring", 121212, false, "little bit"] //이렇게 배열로 하는 것도 적합하지 않다. //각각의 요소가 의미를 가지는데, 그 의미를 배열을 통해서는 나타낼 수 없기 때문! 그래서 우리는 object를 만들어야 한다! object 만들기 배열을 만드는 것과는 다르게 :와 ,를 사용해서 속성을 만..

드디어 배열이다..! 데이터를 정리하기 위해서 배열을 사용한다. 만약 배열이 없다면? //array가 없을 때 const mon = "mon"; const tue = "tue"; const wed = "wed"; const thu = "thu"; const fri = "fri"; const sat = "sat"; const sun = "sun"; const daysOfWeek = mon + tue + wed + thu + fri + sat + sun; console.log(daysOfWeek); 이렇게 월, 화, 수, 목,... 하나하나씩 변수를 만들어야 하고 와우 굉장히 긴 strin을 얻게 되었다. 그리고 이렇게 만든다면, 월요일, 금요일 각각 하나하나에 접근할 수가 없다. string slice 하..

boolean boolean은 true, false 값을 갖는다. const amIFat = false; //boolean console.log(amIFat); 언제 사용할까? - 사용자가 로그인을 했는가? - 비디오가 재생되었는가? 등을 나타낼 때 사용한다. *주의해야한다. "true"라고 하면 string 값을 의미한다. const amIFat = "true"; //string console.log(amIFat); null 아무것도 없는 것을 의미한다. false와 null은 다르다! const x = null; //boolean console.log(x); undefined variable은 존재하는데 아직 정의되지 않았다. 메모리는 존재하는데 그 안에 값이 없는 것이다. let something;..

const a = 5; const b = 2; //const: 상수. 바뀔 수 없다. let myName = "spring2"; //let: 바뀔 수 있음. console.log(a + b); console.log(a * b); console.log(a / b); console.log("hello " + myName); myName = "s2"; //let으로 선언된 변수의 값을 바꾸기 console.log("Your new name is " + myName); 콘솔창을 확인하면 다음과 같은 결과가 나타난다. 앞에서 myName을 const로 선언하고 실행시키면 콘솔 창에 다음과 같은 에러가 뜬다. const myName = "spring2"; //let: 바뀔 수 있음. console.log("hell..

보호되어 있는 글입니다.