ohmyfun ohmyfun

사진의 테두리 색상을 바꾸는 예제를 수행해보겠다. html js window.addEventListener("load", function(){ var imgt1 = document.querySelector("#imgt1"); var img = imgt1.querySelector(".img"); var btn2 = imgt1.querySelector(".btn2"); var colorinput = imgt1.querySelector(".color-input"); btn2.onclick = function(){ console.log(colorinput.value); // img.style["border-color"] = colorinput.value; img.style.borderColor = colorin..

text명으로 변경 html js window.addEventListener("load", function(){ var imgt1 = document.querySelector("#imgt1") var img1 = imgt1.querySelector(".img1"); var btn = imgt1.querySelector(".btn"); var imgtext = imgt1.querySelector(".imgtext"); btn.onclick = function(){ img1.src = "image/"+imgtext.value+".jpg"; } }); 옵션바 변경 html img1 img2 js window.addEventListener("load", function(){ var imgt1 = document..

노드란? 노드란 객체들의 공통분모를 추상화시킨것이다. 위의 모든 객체들은 노드라고 할 수 있다. 다만 각 노드의 타입(종류)이 모두 같은것은 아니다. node의 종류 1. DocumentType DOCTYPE html> 2.Element(태그로 되어져있는것) 2-1 Attr(태그안에 사용되는 속성들) 2-2 Entity(괄호와 띄어쓰기 같은 특수 문자를 사용하기위한 속성) , 2-3 EntityReference(Entity를 감싸는 문자) , 2-4 Text(태그 안쪽에 사용되는 문자) 안녕하세요 3.comment 4.CDATASection(괄호와 같은 특수기호를 마음껏 사용할 수 있다) ,]]> 5.Notation(색상값 px등등) 이러한 것들이 문서에 의해 읽혀지면 해당 type에 ..

node 트리 구조 위 트리구조는 노드 트리구조이다 가장 상위에 document객체가 있고 아래로 트리모양으로 node들이 분포된다. js에서는 노드들을 불러올때 해당 노드의 하위 즉 자식 노드들을 속성을 사용하여 불러올 수 있다. html 다음과 같은 section이 하나 주어진다. div 노드의 자식 노드에는 input 노드가 2개 존재한다. 우리는 이 자식노드들을 children속성을 사용하여 불러올 수 있다. js window.addEventListener("load", function(){ var sec5 = document.querySelector("#sec5"); var box = sec5.querySelector(".box"); var input1 = box.childNodes[0]; va..

html js window.addEventListener("load", function(){ var sec1 = document.getElementById("sec1"); var textx = sec1.querySelector(".textx"); var texty = sec1.querySelector(".texty"); var result = sec1.querySelectorAll(".result"); var btn1 = sec1.querySelector(".btn1"); btn1.onclick = function (){ var x = parseInt(textx.value); var y = parseInt(texty.value); result[0].value = x+y; result[1].value = ..

html 번호1 번호2 수행할 이벤트 1.버튼1번을 누르면 li첫번째 번호1 text가 hello로 변한다. 2.버튼2번을 누르면 li두번째 번호2 text가 wrold로 변한다. js window.addEventListener("load", function(){ var sec1 = document.getElementById("sec1"); var btn = sec1.getElementsByClassName("btn1")[0]; var btn2 = sec1.getElementsByClassName("btn1")[1]; var lis = sec1.getElementsByTagName("li"); btn.onclick = function (){ lis[0].textContent = "hello"; } btn..

html + = js window.addEventListener("load", function(){ var section = document.getElementById("section"); var inputs = section.getElementsByTagName("input"); var textx = inputs[0]; var texty = inputs[1]; var textresult = inputs[2]; var btn = inputs[3]; btn.onclick = function (){ var x = parseInt(textx.value); var y = parseInt(texty.value); textresult.value = x+y; test.value = x+y; } });

html + = js window.addEventListener("load", function(){ var textx = document.getElementById("text-x"); var texty = document.getElementById("text-y"); var result = document.getElementById("text-result"); btn.onclick = function (){ var x = parseInt(textx.value); var y = parseInt(texty.value); result.value = x+y; } });