javascript 적용
style 적용시키는 것과 같이, inline, style, external 방식 사용하여 적용시킬 수 있음
- onload : 해당 부분이 loaded up 될 때, " "안이 carried out
- 혹시 따옴표 안에 따옴표를 써야 할 때(구분필요), ' '를 사용해서 구분되도록!
<body onload="alert('Hello')">
//body가 loaded up 될 때 alert 창 띄우도록- internal javacript : script 태그 사용
- <script type="text/javascript"> </script>
- 위에서부터 읽다가 해당 부분이 나오면, 자바스크립트에 쓰인 대로 하는것
<script type="text/javascript">
alert("this is internal javascript")
</script>- external js
- <script src="index.js" charset="utf-8"></script>
- styles.css처럼 외부 js파일의 경로를 명시
- css는 head에 파일 경로를 명시하지 않으면 명시된 곳 위까지 기본적인 css형식을 따르기때문에 가장 위(head 태그가 끝나기 전)에 link 태그를 사용해서 작성.
- 그러나 js는 이미 선언된 변수들을 사용하는 것과 같기 때문에, 위에 작성하면 안된다... body태그가 끝나기 전에 경로를 명시하면 된다.
<script src="index.js" charset="utf-8"></script>
DOM
- 속한 것들을 tree 구조로 저장하고 있음
- 가장 부모가 되는 것은 document
- 트리 구조의 특정 원소를 var로 저장 가능. 그 경우 경로를 쭉 다 나열하는 것이 아닌, 저장한 변수 이름으로 쉽게 그 원소에 접근 가능하다.
- document.querySelector("찾을것") ->을 통해 전체에서 원하는 부분을 찾을 수 있음
- document.querySelector("input").click(); =>input부분의 checkbox를 체크된 상태로 바꿈
- performing an action!!
- dom 안에
- properties: describe sth about the object
- obj.value; //property 출력, 변경 다 가능
- methods: things that the obj can do
- obj.method(); //동작 수행
- method와 function의 차이: method는 object가 하는 function인 것!!
- properties: describe sth about the object
selectiong methods
- getElementsByTagName("tagName");
- looks through the webpage, searches for the elements with a perticular tag name
- 해당하는 모든 element들을 찾기 때문에, array 형태로 반환됨
- 이 상태에서 property를 바꾸려고 하면, 해당하는 것들의 array가 반환되는 상태이기 때문에x. 바꾸고 싶다면, 그 array 중에서 또 select 필요
document.getElementsByTagName("li")[2].style.color="green"; //해당 인덱스의 property 바꿈
document.getElementsByTagName("li").length; //반환하는 것의 개수 알 수 있음- getElementsByClassName("className");
- 해당 클래스명인 모든 것을 찾음, 따라서 array 형태로 반환됨(해당되는게 하나라도)
document.getElementsByClassName("btn");- getElementsById("idName");
- 해당 id를 가진 것 반환
- id는 unique하기 때문에 당연히!! 하나만 반환됨. 따라서 array형 x
document.getElementsById("title");
document.getElementsById("title").innerHTML="Good Bye";- querySelector("h1");
- { }앞에 붙는 이름이 selector
- css를 작성할 때 쓰는 것과 같이, [ #idName ] , [ .className ]의 형태로도 사용 가능. 중첩해서도 가능
- 여러 개가 해당된다면, 개중 첫 번째를 반환함
- 보통 얘를 가장 많이 사용!
document.querySelector("h1");
document.querySelector("#title");
document.querySelector(".btn");
document.querySelector("li.item");
document.querySelector("#list a"); //hierarchical
document.querySelector("li a").style.color='red';
//text 색 바꿀 때 style.color 사용!- querySelectorAll
- 해당되는 것들 전부 반환, array형태
css에서와는 다르게, - 보다는 camel case방식으로 속성 이름 설정
javascript에서는 값 설정시(숫자나 %라도) " "를 사용함(string 형태)
- classList : property of every DOM object
- add/remove class to the list of classes on our "button" element
document.querySelector("button").classList;
document.querySelector("button").classList.add("invisible");
//button이 기존에 가지고 있던 클래스에 invisible이라는 클래스 추가될 수 있도록
// <button class="btn invisible">Click Me</button> 이런 식으로 될 수 있도록!이렇게 되면 설정해 둔 invisible class를 이용해서 style 설정 가능...
- add("className")
- document.querySelector("button").classList.add("invisible");
- remove("className")
- document.querySelector("button").classList.remove("invisible");
- toggle("className")
- document.querySelector("button").classList.toggle("invisible");
- 이미 invisible이라는 class가 있다면, 없애고, 없다면 추가
- 디버깅 쉬워짐
texts - text content vs inner HTML
- innerHTML: inline style, text content 모두 포함.
- 해당 tag 안의 모든 html을 반환하는 것임
- 따라서 안에 새로운 html tag를 추가 가능!
- textContent: text content만
document.querySelector("h1").innerHTML="<em>Good Bye</em>";
//이렇게 html tag도 같이 설정 가능함. html tag도 큰 따옴표 안에 있어야 한다는 점!attributes of element
class, href, source for an image...everything that goes inside the tag
- attributes
- getAttribute("attributeName")
- setAttribute("attributeName","change");
document.querySelector("h1").attributes; //array 반환
document.querySelector("h1").getAttribute("href"); //해당 이름의 속성 반환
document.querySelector("h1").setAttribute("href","https://www.naver.com");
//바꾸고 싶은 속성, 바뀔 내용'JavaScript' 카테고리의 다른 글
| jQuery (0) | 2022.11.16 |
|---|---|
| Advanced Javascript and DOM Manipulation (0) | 2022.11.16 |
| basic (0) | 2022.10.17 |
| Javascript basic functions (0) | 2022.10.14 |
| styling using bootstrap (0) | 2022.10.10 |
