JS 관련/JavaScript

[JavaScript] 백틱 `` 활용하기

우리가 흔히 코드를 작성하면서 변수와 변수를 혼합할때 + 연산자를 사용한다. 특히 문자열 속에 변수를 넣어야 하는 경우에는 코드가 상당히 지저분해질수가 있다. const name = 'Cine'; const age = 20; console.log('제 이름은 ' + name + '이고, 제 나이는 ' + age + '입니다.'); 대부분 이런식으로 작성을 해야하는데 상당히 번거롭다. 이럴때 백틱을 활용하면 편리하게 작성을 할 수 있다. 흔히 키보드에서 Tap키 위에 있고 1키 왼쪽에 있으면서 ~ 을 Shift키를 누르지 않고 누르면 ` 백틱이다. const name = 'Cine'; const age = 20; console.log(`제 이름은 ${name}이고, 제 나이는 ${age}입니다.`); 이런..

[JavaScript] DOM( 태그 생성 및 삭제 )

아이디 비밀번호 주소 전화번호 아이디 비밀번호 주소 전화번호 삭제 input영역에 입력된 값을 테이블 안에 넣는 코드 입니다. ​ ​ ​ function tableVal(){ // form 태그들 가져와서, index 0인 form 태그 -> forms로 불러왔기때문에 NodeList임... 그래서 [0]이 있어야 호출가능 var doc = document.forms[0]; // doc.id.value = doc이라는 form태그가 가진, name='id'인 태그의, value 값 var vals = [doc.id.value, doc.pw.value, doc.addr.value, doc.phone.value]; // 유효값 처리 for (var i = 0 ; i < vals.length; i++) { i..

[JavaScript] Dom(태그 이동시키기)

문제1. test01 태그에 "dom test"라는 내용을 가진 div태그 생성하기 클릭 문제2. test01 태그 안에 생성된 div 태그들을 test02 태그 안으로 이동하기 클릭 *test01 *test02 ​ ​ ​ function addTest(){ var div = document.createElement("div"); div.textContent = "dom test" + (tmp++); document.getElementById("test01").appendChild(div); } 해당 함수는 태그를 생성하는 함수입니다. "dom test1"과 같은 텍스트를 포함하는 태그를 "test01"영역안에 생성합니다. (appendChild 자식이니까 안에 생성!) ​ ​ ​ function mov..

[JavaScript] DOM( 태그 추가하기 / 이동하기 )

태그 추가하기 appendChild insertBefore appendChild를 이용한 엘리먼트 이동 부모태그 div태그 ​ ​ ​ function addAppend(){ var fieldset = document.getElementById("addele"); var p = document.createElement("p"); p.textContent = "자식요소들 중 가장 마지막에 들어갑니다." + (count++); fieldset.appendChild(p); } appendChild버튼을 누르면 해당 함수가 실행됩니다. 해당 함수는 id가 addele인 태그 해당코드에서는 fieldset이 되겠네요. fieldset영영의 가장 마지막에 p.textContent = "자식요소들 중 가장 마지막에 들..

[JavaScript] DOM( 이미지 속성 변경 )

◀ ▶ ​ ​ ​ var anchs = document.querySelectorAll("a"); var img = document.querySelector("img"); var cnt = 1; anchs[0].onclick=function(){ var imgAlt = img.getAttribute("alt"); if (imgAlt == "img01") { cnt = 3; img.setAttribute("alt", "img0"+cnt); img.setAttribute("src", "resources/image/img0"+cnt+".png"); }else{ --cnt; img.setAttribute("alt", "img0"+cnt); img.setAttribute("src", "resources/image/..

[JavaScript] DOM( img바꾸기 )

img01 img02 img03 이미지 생성 이미지 삭제 ​ ​ ​ ​ ​ ​ function createImg(){ // 1. 이름이 rdoBtn인 요소들을 가지고 온다. var radioButton = document.getElementsByName("rdoBtn"); var radioVal = ""; // 2. 가져온 요소들을 반복하면서, 체크되어있는 라디오버튼의 value를 가지고온다. for(var i = 0; i < radioButton.length; i++){ if(radioButton[i].checked){ radioVal = radioButton[i].value; } } // 3. img 태그를 만들어서, "resources/image/"+라디오버튼.value를 널어주자. // img 태..

[JavaScript] DOM( createElement / createAttribute )

createElement("String tagName") -> 엘리먼트 객체 생성 createTextNode("String text") -> text 객체 생성 ​ createAttribute("String attrName") -> 속성(Attribute) 생성 setAttributeNode(Attribite attr) -> 속성 추가 ​ setAttribute("String attr", "String value") -> 위의 두줄을 하나로 ​ ​ 엘리먼트 생성하기 createElement는 태그를 생성하는 메소드입니다. createElement("div")는 를 생성합니다. 위의 코드에서는 주석처리 되어있지만 createAttribute는 태그에 속성을 추가합니다. div.setAttribute("st..

[JavaScript] DOM(parentNode / childNodes)

부모탐색, 자식탐색 child01 child02 child03 부모탐색 자식탐색 1. "test01을 포함하는 부모태그"의 배경색을 지정하자 2. "세번째 div 태그에 포함된 test04"의 폰트 크기를 20pt로 적용하자 test01 test02 test03 test04 ​ ​ ​ function searchPar(){ var child02 = document.getElementsByTagName("p")[1]; var parent = child02.parentNode; console.log(parent); alert(parent.nodeName); parent.style.backgroundColor='pink'; } 부모탐색 버튼을 누르면 해당 함수가 실행됩니다. child01 child02 chi..

[JavaScript] select(리스트 선택)

음식 선택하기 스테이크 물냉면 스시 샌드위치 육회 스테이크 물냉면 스시 샌드위치 육회 ​ ​ ​ function show01(){ var food = document.getElementsByName("food")[0]; // selectedIndex : 선택한 option의 index 반환 var idx = food.selectedIndex; // options : select 태그가 가진 option 태그들 var foodName = food.options[idx].value; alert(foodName + " 먹어야지!"); } 목록에서 선택한 내용이 출력됩니다! ​ ​ ​ function show02(){ var res = ""; // 1. select (name = food) 가져오자. var f..

[JavaScript] checkbox로 개별선택, 전체선택 함수 만들기

red green blue purple 전체선택 빨강 초록 파랑 보라 ​ ​ ​ function sel(){ // 1. chk라는 이름을 가진 모든 checkbox 가져온다. var chks = document.getElementsByName("chk"); for(var i = 0; i < chks.length; i++){ // 2. 만일 chk들 중에 체크되어있는 element가 있다면, if( chks[i].checked ){ // 3. 체크되어있는 chk.value값을 Id로 가지는 요소의 배경색을 chk.value값으로 바꾸자. // document.getElementById(???).stlye.backgroundColor=??? document.getElementById(chks[i].value..