Cho's study 웹공부정리

if 를 이용한 DOM 요소 조작 함수 엘리먼트에 색상값을 확인한후 색상이 같은지 확인 한 후 그후, 다른색으로 변경할 것이다. const title = document.querySelector("#title"); const BASE_COLOR = "black"; const OTHER_COLOR = "#7f8c8d"; function handleClick() { const currentColor = title.style.color; if( currentColor === BASE_COLOR){ title.style.color = OTHER_COLOR; } else { title.style.color = BASE_COLOR; } } function init(){ title.style.color = BASE_..

if-else if else 는 많은 프로그래밍 언어에 있고 if()안에 조건문을 추가한다. else 는 조건문이 거짓일 경우 실행된다. if ( 10 === 5 ){ console.log("hi"); } else { console.log("ho"); } //"ho" if ( "10" === 10 ){ console.log("hi"); } else { console.log("ho"); } //"ho" === 는 정확한 조건연산을 실행한다. 만약 조건이 참이 아닐경우 "ho"를 출력하게된다. 피연산자 if( 10 > 5 && "nicolas" === "nicolas" ){ console.log("yes"); } else { console.log("no"); } //yes if( 10 > 5 || "nico..

이벤트란? 자바스크립트는 html과 css 를 바꾸고 싶어서 만들어지지는 않았다. 자바스크립트는 이벤트를 반응하기 위해 만들었다. window.addEventListnener("resize",handleResize); function handleResize(){ console.log("I hanve been resized"); } winodw 요소에 화면을 resize 할때마다 handleResize 함수를 실행하는 이벤트를 추가 시켰다. dom 요소에 이벤트를 추가할 수 있고, 해당 이벤트가 발생하면 콜백함수가 실행된다. 이벤트 객체 window.addEventListnener("resize",handleResize); function handleResize(event){ console.log(even..

자바스크립트를 이용해서 HTML, CSS 를 조작할 수 있다. const title = document.getElementById("title"); title.innerHTML ="HI From JS"; title.style.color = "red"; .querySelector 메서드를 이용해서 DOM 요소에 접근할수 있다. const title = document.querySelector("#title"); title.innerHTML ="HI From JS"; title.style.color = "red"; '#아이디명' 을 이용하면 ID이름 참조, '.클래스명' 을 이용하면 CLASS이름을 참조한다.

Dom 요소접근 자바스크립트로 DOM 요소에 접근할 수 있다. console.log(document); //#document .getElemntById 메서드 등을 이용하여 접근할 수 있다. const title = document.getElementById("title"); console.log(title); //많은 속성들... title.innerHTML = "Hi! From JS"; 아이디 값으로 "title" 값을 가진 요소에 접근 했다. 그리고 title 안에 문자열을 넣었다. title 객체 속에는 innerHTML 말고도 매우 많은 속성이 있다.

들어가기 자바스크립트에서는 console.log를 이용해 출력할때 "+"를 이용해서 변수나 문자열을 있는다. fucntion sayHello( str,age ){ console.log("Hello ! " + str + "you have" + age + " years of age" ); } sayHello("Nicolas", 15); 템플릿 문자열, 리턴 값 fucntion sayHello( str,age ){ console.log(`Hello ! ${str} you have ${age} years of age`); } const greetNicola = sayHello("Nicolas", 15); // Hello ! Nicolas you hane 15 years of age undefined + 나 , ..

console.log 우리는 console.log()를 이용해서 문자열 등을 출력한다. console.log를 출력해보자 함수란? 어떤걸 수행하려는 한 부분으로, 원하는 만큼 쓸 수 있다. 한 코드 조각으로 당신이 원하는 것을 쓸수 있다. console.log("Hello Nicolas"); console.log("Hello Jun"); console.log("Hello Liyn"); console.log("Hello Dal"); 함수 없이는 같은 코드를 반복해서 써야한다 하지만 함수를 쓴다면 반복할 필요가 없다. fucntion sayHello( str,age ){ //파라미터로 str 인자를 전달해준다. console.log("Hello ! ",str ,"you have",age," years of ..

배열과 객체가 다른점 배열은 리스트형으로 정의 하고 Object는 각 value에 이름을 줄수 있다. 객체를 사용하는 이유 const nicoInfo = ["Nicolas", "55", true, "Seoul"]; console.log(nicoInfo);//"Nicolas", "55", true, "Seoul" 만약 개인정보를 저장하고자 하면. 정렬된 형태로 데이터를 저장할수 없다. 해당 코드는 효율적이지 않다. 객체사용 const nicoInfo = { name : "Nico", age : 33, gender:"Male", isHandsome:true favMovies: ["Along the gods", "LOTR", "Oldboy"], favFood: [ { name:"Kimchi", fatty:fl..

Array 데이터를 저장하는 곳으로 리스트 같이 저장한다.. 배열의 필요성 const monday = "Mon"; const tue = "Tue"; const wed = "Wed"; const thu = "Thu"; const fri = "Fri"; console.log(monday, tue, wed, thu, fri); 다음과 같이 변수로만 데이터를 저장하면 데이터를 불러오기가 불편하다. 배열 사용 const someting = "someting"; const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; console.log(daysOfWeek); stirng 사이에 ,를 넣으면 array가 된다. 배열은 Array[index]형태를..