📖 문법 정리
1. JS를 HTML에 적용시키기
<script src="app.js"> </script>2. 콘솔에 로그 남기기
console.log(1121221);3. JS에서의 변수 : const, let
const a = 5;
const myName = "nico";- const는 constant(상수)라는 뜻 -> 값이 바뀔 수 없다
- const 변수에 새로운 값 입력하면 에러 뜸
- 가끔 몇몇 변수는 절대로 변하지 않도록 해야할 때 가 있다.
let myName = "nico";
myName = "nicolas";- 반면 let은 변경 가능
- 처음 선언할 때만 let 입력
- 기본적으로 const를 사용하고 필요할 때만 let을 사용한다.
4. null과 undefined
let a;
const b = null;- 첫째 줄이 undefined, 둘 째 줄이 null
- undefined는 변수에 값을 부여하지 않은 상태
- 비어있는건 뭔가 있다는 뜻 (비어있음이 있음)
- null은 절대로 자연적으로 생기지 않는다.
5. Array (형식만 참고)
const nonsense = [1, 2, "hello", false, null,undefined];- 인덱스는 0부터 시작
- 삽입 :
nonsense.push(7)(7은 item)
6. Object
-> property를 가진 데이터를 저장하도록 해준다.
const player = {
name: "nico",
points: 10,
fat: true,
};- 요소들의 끝에는 , 중간에는 :
player.name이런 방식으로 출력 가능player.fat = false이런 식으로 수정 가능Player.lastName = “potato”삽입도 가능
7. object + Function (함수 형식 참고)
const player = {
name: "nico",
sayHello: function (otherPersonsName) {
console.log("Hello!" + otherPersonsName);
},
};player.sayHello("lynn");
결과 : Hello! Lynn
8. Prompt
const age = prompt("How old are you?");
console.log(age);- 2개의 argument를 받는다 (message(string), default)
- 코드에서는 message argument만 받음
9. parseInt()
-> String을 int로 형 변환
10. JS에서는 ==가아니라 ===
- ==는 Equal Operator이고, ===는 Strict Equal Operator
- ==는 값만 같으면 true, ===는 값과 값의 종류(Data Type)가 모두 같으면 true이다.
var a = 1;
var b = "1";
console.log(a == b); // true
console.log(a === b); // false
console.log(null == undefined); // true
console.log(null === undefined); // false출처
https://steemit.com/kr-dev/@cheonmr/js-operator (JS Operator)
📖 JavaScript on the Browser
1. document object
JavaScript는 HTML에 연결되어있다
- HTML에서 여러 정보를 가져올 수 있으며,JavaScript 코드에서 그 항목들을 볼 수 있다.
- JavaScript로 HTML을 변경하는 작업도 가능하다.(일시적, 저장하면 다시 원래대로)
document는 우리가 JS에서 HTML에 접근할 수 있는 방법!- 콘솔창을 활용하여 HTML 정보를 가져온다.
- 변경 예시 :
document.title="name";
2. JS에서 HTML 정보 가져오고 변경하기
<!--html-->
<h1 class="hello" id="title" > Grab me!</h1> // javascript
const title = document.getElementById("title");
console.dir(title);
title.innerText = "Got you!";
console.log(title.id); // title
console.log(title.className); // helloconsole.log와 달리console.dir은 element를 더 자세하게 보여줌 (element를 object로 표시)title.innerText = "Got you!"를 통해 Grab me!가 Got you!로 바뀜- Id 외에도
getElementByClassName, getElementByTagName등등 있음 - 요소가 여러개 있을 경우 배열로 가져옴
3. Query Selector
<!--html-->
<div class="hello">
<h1> Grab me!</h1>
</div>
<div class="hello">
<h1> Grab me!2</h1>
</div>// javascript
const title = document.querySelector(".hello h1");
console.log(title); // <h1> Grab me! </h1>- 여러 element를 배열로 가져오기 싫을 때 사용
- CSS selector (css 검색방법)를 사용하여 검색할 수 있다.
- querySelector는 같은 element가 여러 개 있을 때 첫번째거 하나만 가져온다. (다 가져오려면 querySelectorAll 사용 (거의 사용 안 함))
4. Events
const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
console.log("title was clicked!!");
title.style.color = "blue";
}
title.addEventListener("click", handleTitleClick); // title을 클릭하는걸 javascript가 listenaddEventListener의 두 번째 argument인 function에는 ()를 붙이지 않는다. -> javascript가 이벤트가 발생했을 때 실행해주는거니까
- 마지막코드를 다음과 같이 바꿔 쓸 수도 있다. (나중에 removeEventListener로 제거 불가)
title.onclick = handleTitleClick;cf) 이벤트 요소
console.dir을 활용하여 element를 출력한다
property이름 앞에 on이 붙어있다면 그게 eventlistener이다.
"on[eventname]"
5. CSS In JS
스타일에 적합한 테마는 CSS, 애니메이션에 적합한 테마는 JS
function handleTitleClick() {
const clickedClass = "clicked";
if (h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}- 코드를 짤 때 className을 raw String으로 할 경우 오타 등의 이유로 에러가 발생할 수 있다 -> 변수 생성
- classList : class들의 목록으로 작업할 수 있게끔 허용해준다.
-> className은 이전 class들은 상관하지 않고 모든걸 교체해버린다는 문제점이 존재한다.
-> 반면 classList는 element의 class 내용물을 조작하는 것을 허용한다.
위 방식을 toggle function을 활용하여 더 간략하게 쓸 수 있음
toggle function : classList에 className이 존재하는지 확인을 하고 존재하면 className을 제거하고 존재하지 않는다면 className을 추가한다.
function handleTitleClick() {
h1.classList.toggle("clicked");
}
toggle을 사용함으로써 변수 선언을 안 해도 되는 것을 알 수 있다.
