javascript는 html을 동적으로 만들어주는 기능을 한다.
간단하게 사용 할 경우 html 문서 안에서도 사용 가능한데 style폼을 사용하는 방법과는 좀 다르다.
style을 사용하려면 html의 head부분에 작성하였지만 "javascript"는 body안에 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이렇게 하는거야</title>
<style>
여기가 스타일 시트
</style>
</head>
<body>
<div></div>
<h2></h2>
<script>
여긴 자바스크립트 시트
</script>
</body>
</html>이런식으로 body안쪽 마지막줄에 작성해준다.
일단 사용법은 이렇다
<body>
<script>
<script>
alert('안녕하세요');
</script>
</script>
</body>
이렇게 script 태그안에 실행할 코드를 넣어주면 실행이 된다!
다음은 body안에 있는 태그들을 불러오는 방법이다.
<body>
<div class="container" id="contcont"></div>
<h2></h2>
<script>
(querySelector css 선택자를 기반으로 불러오는 방법)
1번 방법(태그 자체를 불러오는 방법, 태그 중 제일 상위의 것만 불러옴)
const contain = document.querySelector("div");
1번 방법 (class 속성을 불러오는 방법)
const contain = document.querySelector(".container");
2번 방법 (id 를 불러오는 방법 : querySelector)
const contain = document.querySelector("#contcont");
3번 방법 (id 를 불러오는 방법 : getElementById)
const contain = document.getElementById("contcont");
</script>
</body>다른 여러가지 불러오는 방법도 있다.
querySelectorAll = 해당하는 목록 전체 불러오기(불러는 오지만 적용하려면 리스트 형식으로 만들어 줘야함.
예시)
const container = document.querySelectorAll('div');
container.forEach((div) => {
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = 'red';
});그밖에
getElementsByClassName = 클래스 이름으로 찾기,
getElementsByName = 이름으로 찾기,
getElementsByTagName = 태그명으로 찾기등이 있다.
여기서 const 가 뭘까?
이것을 알기 위해선 변수라는걸 알아야 한다.
이런 저런 뜻을 다 제쳐두고 프로그래밍에서 변수란 값을 담는 그릇이다.
let abc = 'a'; <- 이건 문자 String
let def = 1; <- 이건 숫자 Number, int일단 간단하게 이런식으로 값을 변수안에 넣을 수 있다.
변수를 사용하기 위해선 "선언"을 하고 사용해야하는데
선언이란
let computer;
or
let computer = '컴퓨터';쉽게 말해서 이런식으로 computer란 변수를 만들었어~ computer란 변수안에 문자열 컴퓨터를 넣어서 사용할거야~ 하고 알려주는것을 말한다.
let 같은 경우 변수(값을 담는 그릇)을 만들어 놓고 값은 나중에 넣어도 된다.
하지만 const는 상수값이다.
상수값은 변하지 않는 값을 말한다.
일단 뭔가가 있어야 그게 변하고 자시고 하겠죠??
그래서 선언할때는
const conputer = '컴퓨터';이렇게 선언을하고 중간에 computer안에 다른 값을 넣고싶다고
computer = '모니터'; 이런식으론 사용이 안된단 뜻이다.
반면 let은 선언을 할때 값을 넣었다 하더라도 중간에 값을 변경 할 수 있다.
let computer = '컴퓨터';
conputer = '플레이스테이션';
conputer = '아이패드';이런식으로 가능한게 let 이다.
