전체 글 (76) 썸네일형 리스트형 #2-6 DOM If else Function practice if else DOM 사용 function init() function init() { title.style.color = BASE_COLOR; title.addEventListener("click", handleClick); } init(); 어플리케이션을 초기화 한다. title 컬러를 if else로 활용하기 const title = document.querySelector("#title"); const BASE_COLOR = "rgb(52, 73, 94)"; const OTHER_COLOR = "#7f8c8d"; function handleClick() { const currentColor = title.style.color; if (currentColor === BASE_COLOR){ title.. #2-5 첫 번째 조건문!! If, else, and, or 조건문 if-else if-else는 기본적으로 프로그래밍에서 어떻게 모든게 잘 작동하는지 보여주는 것이다. 예를 들어, 유저가 로그인 했으면 이걸(if) 보여주고 안했으면 다른걸(else) 보여 주는 것 기본 구조 if(condition){ block } else { block } block은 자바스크립트 표현법이다.(console.log, alert 등 다른 것이 와도 상관없다.) if(condition)에서 ()안에 값이 뭐든 참을 의미 하면 뭐든 넣을 수 있다. 예시 if (10 > 5) { console.log("hi"); } else { console.log("ho"); } //hi else 블럭 실행 예시 if ("nicolas" === "necolas") { console.log("hi").. #2-4 Events and event handlers 자바스크립트 이벤트 자바스크립트는 이벤트에 반응하기 위해서 만들어 졌다. 이벤트란? 웹사이트에서 발생하는 것들 ex) click, resize, submit, input change, load, before, closing, printing . . . window.를 활용한 이벤트 예시 window.addEventListener("resize", handleResize); submit은 window에 존재하지 않는다. 함수 호출 window.addEventListener("resize", handleResize); , handleResize); 하는건 함수를 호출 하는 것이다.(handleResize라는 함수를 호출하는 것 필요한 시점에서 !) window.addEventListener("resize",.. #2-3 Modifying the DOM with JS 자바스크립트 HTML에 적용하기 This works! 예제 const title = document.getElementById("title"); title.innerHTML = "Hi, From JS"; title.style.color = "red"; console.dir(title); 결과 자바스크립트로 타이틀 변경하기 예제 const title = document.getElementById("title") title.innerHTML = "Hi! From JS"; title.style.color = "red"; document.title = "I own you now"; 결과 이전에는 타이틀 Something 자바스크립트 적용 후 I own you now document.QuerySelctor ///.. #2-2 JS DOM Functions Dom Function HTML을 JAVASCRIPT와 함께 사용 해보자 This works! CSS와 마찬가지로 JAVACSRIPT도 element를 선택이 가능하다. CSS에서 id로 뭘 선택 할때는 #을 써서 선택해야 한다. #title { background-color: #fff; } JAVASCRIPT에서 id를 선택하는 방법 const title = document.getElementById("title); console.log(title); document.도 역시 객체이다 DOM(Document Object Model) JAVASCRIPT는 HTML 태그를 가져다가 모두 객체로 만든다. 객체는 많은 키를 가지고 있다. (ex: .log .error .name ....) innerHTML로 .. #2.1.1 More Function Fun 함수(2) '(싱글 따옴표)로 시작 했으면 '(싱글 따옴표)로 끝내야 한다. 싱글 따옴표의 사용이 매우 지루해 자바스크립트에서 `(백틱)이 나왔다. '' ""과는 완전 성질이 다르다. ``(백틱) 사용법 function sayHello(name, age){ console.log(`Hello ${name} you are ${age} years old`); } console.log("Nicolas", 14) //Hello Nicolas you are 14 years old 잘못된 예시 function sayHello(name, age){ console.log(`Hello ${name} you are ${age} years old`); } const greetNicolas = sayHello("nicolas".. #2-1 너의 첫번째 함수! 함수function func(){console.log("함수");}func();console은 Object log는 function(함수)이다.console.log()는 console object 안에 있는 함수라는 뜻console.log는 메세지 없이는 작동하지 않는다. console.log, alert등 우리가 보는 많은 함수들은 내장함수(bullt-in-function)이다.함수란어떤 것의 기능, 기능적인 것 원하는 만큼 사용이 가능한 코드이다.기본적인 사용 예시function sayHello(){ console.log('Hello!');}sayHello();잘못된 예시function sayHello(){ console.log('Hello!');}sayHello("Nicolas");console.l.. #1-10 Organizing Data with Objects 객체 (Object) 객체(Object) 선언 방법 const nicoInfo = {} console.log(nicoInfo); label을 자신이 저장하고 싶은 data에 줄 수 있다. 예시 const nicoInfo = { name:"Nico", age:33, gender:"Male", isHandsome:true } console.log(nicoInfo); //{ name:"Nico", age:33, gender:"Male", isHandsome:true } console.log(nicoInfo.gender); //Male Const안에 있는 값은 바꿀 수 있다. 예시 const nicoInfo = { name:"Nico", age:33, gender:"Male", isHandsome:true } .. 이전 1 2 3 4 ··· 10 다음 목록 더보기
