geumsong lee blog

1. 이벤트 버블링 모든 요소에 클릭 이벤트 발생시 콘솔로그를 찍도록 만들어보자. 아래는 html코드이다. 이런식으로 짰구나만 생각하고 따라오면 된다. 첨부된 css style sheet의 내용은 생략하겠다. ✏️입력 Red ✨결과 li를 클릭해보면 li, ul, div, body순으로 찍힌다. 초록색 네모박스를 클릭하면 자기 자신인 div와 부모요소인 body 모두 console에 남겨진다. ✅알 수 있는 것 자식요소에서 발생한 이벤트는 부모와 그 부모를 통해 전파된다. 하위요소에서 상위요소로 올라가는것. 더 이상 부모요소가 없을 때까지 이 과정은 반복된다. li에서 click 이벤트가 발생하면 부모요소로 전파된다. 이벤트가 거슬러 올라가는 모습이 거품처럼 보인다 해서 이것을 이벤트 버블링(event ..

1. Event Handler 할당하기 클릭 DOM Events HTML DOM Event Object W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com : Event의 속성들이 있다. 어떤 것들이 있는지 살펴보면 좋다. 클릭 클릭2 클릭3 클릭4 위와 같은 코드가 있다고 가정해보자. 클릭, 클릭2, 클릭3, 클릭4를 보면 각자 다른 방식의 button event 코드가 있..

1. Style제어 HTML BOX Red Green blue 일반적으로는 background-color 라고 적지만 여기에서는 backroundColor라고 명시한다. 만일, 익숙한 방식으로 하고싶다면 대괄호를 써도 된다. ex) box.style["margin-left"] = "30px"; 여러 속성 동시에 적어주는 단축속성도 문자열로 적어주면된다. ex) box.style.border = "10px solid #000" 2. Class제어 //콘솔창 box.className; ' ' box.className = 'bg-red';

*DOM: 문서 객체 모델(The Document Object Model) 1. 생성하고 추가하는 방법 ul이 있다. document.createElement('li')를 만들어준다. document.createTextNode('pink')도 만들어준다. 그다음 li에 appendChild(pinkText)이용해서 방금 만든 text node를 넣어준다. 그다음에 ul.appendChild(li)넣어주면 마무리된다. * appendChild(): 지정한 부모노드의 가장 마지막 자식으로 추가된다. * insertBefore() : 지정한 부모노드의 그 이전으로 추가된다. //Console const newLi3 = document.createElement('li); undefined cost textNod..

*DOM: 문서 객체 모델(The Document Object Model) query와 element의 차이점: pList1 = NodeList pList2 = HTML컬렉션 NodeList(4) HTMLCollection(4) : 모두 4개가 나옴 이제태그를 넣어보자. :다시 실행시켜보니 NodeList는 4개, HTML Collection은 5개가 돼있다. :코드를 다시 작성하지 않았지만 HTMLCollection은 node의 변경사항이 자동으로 반영돼있다.반면 NodeList는 한 번 사용했던 값을 계속 사용한다. 부모, 자식, 형제 Node -red에 접근한다고 가정해보자. //Console const red = document.getElementById( 'red'); < undefined 1...

*DOM: 문서 객체 모델(The Document Object Model) 웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면을 통해 보여주는 과정을 '렌더링'이라 한다. - DOM은 html 문서의 각 요소들을 트리형태로 구조화해 표현하는 문서(데이터)를 생성한다. 개발자는 자바스크립트을 이용해서 일을 생성하거나 수정하거나 삭제할 수 있다. 이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다. DOM목적 Q. Html 코드에 써져 있는 데로 결과를 출력하는게 브라우저 역할인데 굳이 중간에 DOM이라고 하는 데이터를 생성하는 이유? A. 자바스크립트를 사용해 이 문서에 대한 스크립트를 작성할 수 있게 해주기 때문이다. DO..

* Function - 기본적인 빌딩블럭 - subprogram이라고도 불리며 여러번 재 사용이 가능하다. - 한가지의 task(작업)나 값을 계산하기 위해 쓰인다. 1. Function declaration (함수 선언) - function 키워드 이용, 이름(name)지정, ( )에 parameter(인자) 나열, { } body 로직 작성, return해주면 된다. - 하나의 함수는 한 가지의 일만 한다. - 함수이름 작성시, 동사형태로 이름을 지정해야한다. ex) createCardAndPoint 라는 함수 이름이 있다고 보자. 우린 이것을 creteCard 혹은 createPoint로 나눠야 할지 말지에 대해 고민해야한다. - 함수는 object이다. ex) function printHello(..

1. String(문자열) concatenation (연속) console.log('my'+'cat'); : + 기호를 이용한 문자열을 합해서 새로운 문자를 만들 수 있다. console.log('1'+2); : 문자열에 숫자 더하면 숫자가 문자열이 돼 합쳐짐 console.log(`string literals: 1 + 2 = ${1 + 2}`); : 빽틱 기호(``) 활용해서 string literals도 만들 수 있는데 $이용하면 변수 값을 계산해서 string으로 포함해서 문자열을 만들게된다. 📍string literals의 장점: - 줄바꿈 하거나 특수기호인 싱글코트('')를 사용해도 그대로 출력됨 ex) '''' 1 + 2 = ${1 + 2}`); + console.log('ellie's boo..

Variable, rw (read / write) : 변수 : 변경될 수 있는 값 : let을 많이 씀 let name = 'ellie'; - 해석: let이라는 키워드 이용해서 name이라는 변수를 선언(declaration)하고 ellie라는 변수의 값을 할당한다. name = 'hello'; - 해석: 다시 name 이라는 변수에 hello 라는 값을 할당하면 console에는 ellie와 hello가 나란히 출력된다. 변수가 쓰이는 원리 어플리케이션을 쓰게 되면, 어플리케이션마다 쓸 수 있는 메모리가 할당되어진다. 이 메모리는 텅텅 비어있는 박스들인데 let이라는 키워드를 이용해서 name이라는 변수를 정의하게되면 한가지의 박스를 정의할 수 있는 포인터가 생김. name이라는 변수가 가리키고 있는..

- VSC 실행 - console.log('Hello World!'); 입력 - 파일이름: " main.js " - 해당 폴더 우클릭 -> Git Bash here -> node main.js 치면 Hello World! 라고 뜬다. * IDE(Integrated Development Environment) : 효율적으로 소프트웨어를 개발하기 위한 통합개발환경 소프트웨어 어플리케이션 인터페이스이다. : 한마디로 개발도구(ex. VSC) * console API : 브라우저가 제공하는 함수. [ 자바스크립트 공식사이트 ] : developer.mozilla.org (추천) console.log() - console.log() 메서드는 "웹 콘솔에 메시지를 출력합니다." 를 의미. - 콘솔 실행 창 : ct..