전체 글
JavaScript - 노드조작: 메뉴추가
노드 추가 방법 1) 텍스트 노드 생성 2) 텍스트 노드를 추가할 엘리먼트 노드 선택 3) 엘리먼트 노드에 텍스트 노드 추가하기 HTML 코드 1 2 3 4 5 6 7 8 9 10 11 12 Ex6 노드조작: 메뉴추가(createTextNode, Element) aaa bbb http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter 1. JS 텍스트 노드 추가하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 //Ex6 : 엘리먼트 노드의 속성 변경 window.addEventListener("load", fu..
Javascript 엘리먼트 노드의 속성 변경
HTML코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Ex5 : 엘리먼트 노드의 속성 변경 img1.jpg img2.jpg img3.jpg img1.jpg img2.jpg img3.jpg http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter input list = "img-list" datalist와 연결 태그 datalist id = "img-list" 검색 창에 나올 리스트 태그 select class= "src-select" 리스트 선택 태그 input type=color 색상 선택 inpu..
Javascript 엘리먼트 선택방법 (4. childNodes, children)
HTML코드 1 2 3 4 5 6 7 Ex4 : childNodes를 이용한 노드선택 JS코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //Ex4 : childNodes를 이용한 노드선택 window.addEventListener("load", function() { var section3 = document.querySelector("#section4"); var box = section4.querySelector(".box"); //childNodes는 빈 공백도 node로 생각한다. 그래서 등장한 것이 children // var input1 = box.childNodes[0]; // var input2 = box.childNodes[1]; //children은 태그 있..
Javascript 엘리먼트 선택방법 (3. Selector API Level1)
querySelector() 함수를 사용한 HTML 엘리먼트 선택방법 Selector API Level1 (Jquery에서 css를 지정할 수 있었는데 이제 HTML5에서 selector API 지원합니다). html 코드 1 2 3 4 5 6 7 8 9 10 11 Ex3 : Selector API Level1 + http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter JS코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 window.addEventListener("load", function() { var section3 = docume..
Javascript 엘리먼트 선택방법 (2. getElementById 개선하기)
getElementById 함수를 사용한 HTML 엘리먼트 선택방법 개선하기 Javascript 엘리먼트 선택방법 (1. getElementById) 에서 보다 명확하게 아이디 값을 읽어온다. html코드 1 2 3 4 5 6 7 8 9 10 Ex2 : 엘리먼트 선택 개선방법 + http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter js코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //Ex2 : 엘리먼트 선택방법 개선하기 window.addEventListener("load", function() { var section2 = doc..
Javascript 엘리먼트 선택방법 (1. getElementById)
getElementById 함수를 사용한 HTML 엘리먼트 선택방법 HTML 코드 1 2 3 4 5 6 7 8 9 10 11 Ex1 : 엘리먼트 선택방법 + http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter 자바스크립트 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 // Ex1: 계산기 프로그램 window.addEventListener("load", function() { var txtX = document.getElementById("txt-x"); var txtY = document.getElementById("txt-y"); v..
자바스크립트 - Object, JSON
자바스크립트 변수 vs 자바 변수 자바스립트는 기본 C나 JAVA와 달리 객체를 생성하고 정의하는 것이 아니라 맨 땅에 Object를 생성하고 뒤에 값들을 붙이는 개념을 가진다. 문제점) 1 2 3 4 5 6 7 8 9 10 11 12 13 //기본 C나 JAVA와 달리 객체를 생성하고 정의하고 쓰는것이 아닌 // 맨 땅에 Object를 생성하고 뒤에 붙이는 개념 var exam = new Object(); exam.kor = 30; exam.eng = 40; exam.Kor = 60; //오류가 나지 않아 자바스크립트의 위험성 //안정성을 추가한 것이 typescript임. // 자유도 react // 웹기반 기존 플랫폼 쓰면서 프론트엔드만 올리겠다 하면 vue console.log(exam.kor +..
자바스크립트- `${}`Template Literals
리터럴(literal) 리터럴은 직접 표현되는 값 그 자체를 의미합니다. var a = 95; var first = 'hooni'; var last = 'tang'; var string = a + 'my name is ' + first + ' ' + last; Template Literal을 이용하면 보기도 좋고 쉽게 작성할 수 있다. var a = 95; var first = 'hooni'; var last = 'tang'; const string = `${a}my name is ${first} ${last}`; 키보드 왼쪽 상단에 1 옆에 `(백틱 기호)가 있다. 이것으로 감싼 후 안에 ${} 로 변수들을 감싸면 문자열이 연결된다. 예제) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1..