오늘 다룰 내용은
DOM 사용법 ,
자바스크립트 배열과 문자열을 쓸 때 유용한 함수
두가지이다.
먼저 DOM 사용법부터 다뤄보겠다
일단 DOM이라는 언어부터 정의하자면웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당하는 것을 말한다.
나는 간단하게 HTML 과 JAVASCRIPT 파일이 서로 연결 가능하게 만들어주는 것이라고 이해했다.
우리는 총 3가지 방법으로 javascript 와 html 을 연결 할 수 있다.1. class를 써서 연결하는 방법이다.
//html 파일에 First 라는 class를 만들어줬을 때
<body>
<h2 class="Fisrt"></h2>
</body>
//자바스크립트 파일에서 연결할 수 있다.
document.getElementByClassName('First');html에서 class로 만들어줬을 경우 자바스크립트 파일에서 document.getElementByClassName() 를 사용해 해당 class를 가져올 수 있다.
2.id를 써서 연결하는 방법이다.
//html 에서 id로 선언했을 경우
<body>
<h2 id="Second"></h2>
</body>
//자바스크립트
document.getElementById("Second");html에서 id로 만들어줬을 경우 자바스크립트 파일에서 document.getElementById() 를 사용해 해당 id를 가져올 수 있다.
3.tag를 받아오는 방법이다.
// html 에서 태그만 사용하였을 경우
<body>
<h2></h2>
</body>
//자바스크립트에서
document.getElementByTagName("h2");html 에서 tag만 사용하였을 경우에도 자바스크립트 파일에서 document.getElementByTagName() 로 받아올 수 있다.
이렇게 받아오는 경우는 tag, class, id 에 따라서 서로 다른 이름의 함수들을 써야하는데
하지만 querySelector() 함수를 사용하면 tag, class, id 상관 없이 받아올 수 있다.
//태그 형태라면
document.querySelector('h2');
//class 형태라면
document.querySelector('.Second');
//id 형태라면
document.querySelector('#First');class 는 . 을 붙혀서 사용하고 id는 #을 붙혀서 사용한다. tag는 아무것도 붙혀주지 않으면 된다.
이렇게 html 에서 받아왔을 경우 다음과 같이 사용할 수 있다.
const title = document.querySelector('h2');
title.innerText = "안녕하세요.";
title.style.color = "blue";h2 태그 안에 파란색 글씨로 안녕하세요. 가 써진 것과 같다.
추가로 html 에서 받아오지 않고 추가해주는 방법도 있다.
const title = document.createElement('h1');
const body = document.querySelector('body');
title.innerText = "추가";
title.style.color = "red";
body.appendChild(title);자바스크립트에서 title 을 만들어서 body에 추가하는 방식이다.
createElement 와 appendChild 를 사용하면 된다.
이제 DOM 을 사용한 이벤트 제어 방법을 볼 것이다.
이벤트를 생성하는 함수는 addEventListener() 이 있고 이벤트 생성을 삭제하는 함수는 removeEventListener() 함수가 있다.
먼저 이벤트 생성부터 보면
//html 파일에 button 태그를 만들어준다.
<body>
<script src="index.js"></script>
<button>버튼</button>
</body>
//자바스크립트 파일에서 이벤트 생성 함수를 만들어준다.
const button = document.querySelector("button");
function handler(event){
console.log(event);
}
button.addEventListener('click', handler);addEventListener 함수에 click 을 넣어서 버튼이 클릭되었을 경우 handler 함수가 실행되게 만들어주는 형태이다.
이벤트 삭제는
function removeHandler(event){
button.removeEventListener('click', handler);
}
removeButton.addEventListener('click',removeHandler);클릭했을 때 handler 함수가 실행되는 이벤트를 삭제해준 것이다.
다음으로는 모듈을 사용하는 방법을 알아볼 것이다.
모듈은 한 파일에 있는 함수를 다른 파일에서 불러들어서 실행시키는 것을 말한다.
한 파일을 모듈로써 만들기 위해서는
<body>
<script type="hello.js" src="index.js"></script>
<button>버튼</button>
</body>type로 지정해줘야 된다.
그래서 hello.js 에 있는 함수를 index.js 로 불러 들이는 방법은
//hello.js
export function greeting(){
console.log("hello");
}
//index.js
import {greeting} from "./hello.js";
greeting();index 파일 안에서 hello 에 있는 함수를 import { } from './hello.js' 를 통해 선언해주고 사용하면 된다.
만약 모듈로써 한 함수만 사용할 것이라면 default 를 사용해서 쓸 수도 있다.
export default function greeting(){
console.log("hello");
}이렇게 사용한다면
import greeting from "./hello.js";
greeting();{}를 사용하지 않아도 된다.
import hello from "./hello.js";
hello();이름을 바꿔서 사용할 수도 있다!
그리고 모듈로써 선언하고 싶은 함수는 export를 분리해서 써도 된다.
function greeting(){
console.log("hello");
}
export default greeting // export{greeting};
다음으로 자바스크립트 배열과 문자열을 쓸 때 유용한 함수 들인데 함수들이 너무 많아가지고 천천히 알아가는 것이 좋은 것 같다.
<문자열에서 유용한 함수들>
1.str.toUpperCase()
문자열을 전부 대문자로 바꾸는 기능
2.str.toLowerCase()
문자열을 전부 소문자로 바꾸는 기능
3.str.trim()
문자열 안에 있는 공백 제거
4.str.trimStart()
문자열 앞에 공백 제거
5.str.trimEnd()
문자열 뒤에 공백 제거
6.str.repeat(n)
문자열을 n번 반복해서 나타남
7.str.padStart(n, " ")
문자열 앞에 " " 가 n 개 추가됨
8.str.padEnd(n," ")
문자열 뒤에 " " 가 n개 추가됨
9.str.indexOf(" ")
문자열 안에 " " 가 있으면 있는 위치를 출력하고 없으면 -1
10.str.includes(" ")
문자열 안에 " " 가 있으면 true 없으면 false
11.str.startsWitch(" ")
문자열이 " " 로 시작되면 true 아니면 false
12.str.endsWitch(" ")
문자열이 " " 로 끝나면 true 아니면 false
13.str.replace(" " , ' ')
문자열 중 " " 를 ' ' 로 바꿔줌 단 1개만
13.str.replaceAll(" " , ' ')
문자열 중 " " 를 ' ' 로 바꿔줌 전체
14.str.substring(n , m)
문자열 중 n번부터 m-1 까지 잘라서 보여줌
15.str.split(" ")
" " 로 잘라서 배열을 만들어줌
<배열에서 유용한 함수들>
1.array.push(n)
배열 끝에 n을 추가해줌
2.array.pop()
배열 끝을 삭제하고 보여줌
3.array.unshift(n,m,k )
배열 앞에 n , m , k 를 추가 해줌
4.array. shift()
배열 앞에서 삭제하고 보여줌
5.array.forEach(함수)
const arr = [1,2,3,4,5];
function print (number, index ) {
console.log(`${index} 위치의 요소 : ${number}`);
}
arr.forEach(print);배열에 number 와 index 값을 함수에 줄 수 있음
arr.forEach((number,index) => {
console.log(`${index} 위치의 요소 : ${number}`);
});이렇게 람다식으로 표현도 가능함
하지만 forEach 는 새로운 배열을 만들어줄 수 없는데
6.array.map()
map을 사용하면 새로운 배열을 만들 수 있다.
const newArr = arr.map((number,index) => number + 1);
7.arr.includes(" ")
배열 안에 " " 있으면 true 없으면 false
8.arr.find(조건)
const arr = [1,2,3,4,5];
console.log(arr.find( (number) => number > 3)); //4 5 출력
9.arr.findIndex(조건)
const arr = [1,2,3,4,5];
console.log(arr.findIndex( (number) => number > 3)); //3 4 출력
등 이 있다.
그 다음 객체 심화를 보면
const obj = {
x:1,
y:2,
z:3
};
for ( key in obj) {
console.log(key);
}
//x
//y
//z
//가 출력이 된다.
그리고
const name = "조현상";
const user = {
name : name
};const name = "조현상";
const user = {
name
};key 와 value 가 서로 같을 경우 축약해서 쓸 수 있다.
함수와 같은 경우는
const obj = {
greeting : function() {
console.log("hi");
}
};const obj = {
greeting() {
console.log("hi");
}
};으로 축약할 수 있다.
다음으로는 정적 메소드 호출인데
정적메소드란 생성하지 않고도 사용할 수 있는 메소드를 말한다.
우선 Object 가 있다.
const obj = {
x:10,
y:20,
z:30
};
console.log(Object.keys(obj));[x,y,z] key 들에 배열이 만들어진다.
const obj = {
x:10,
y:20,
z:30
};
console.log(Object.values(obj));[10,20,30] value 들에 배열이 만들어지고
const obj = {
x:10,
y:20,
z:30
};
console.log(Object.entries(obj));[['x',10],['y',20],['z',30]] 배열이 만들어진다.
마지막으로 구조분해할당을 보면
const arr = [1,2,3,4,5];
const one = arr[0];
const two = arr[1];
const three = arr[2];
//로 바꿔서 쓸 수 있다.
const [one,two,three] = arr;
객체도 구조분해할당이 가능하다.
const obj = {
x:10,
y:20
};
const {x,y} = obj;
//x 는 10 이고 y 는 20
변수명을 다음과 같이 지정할 수 도 있다.
const obj = {
x:10,
y:20
};
const {x: hello ,y: world } = obj;
//hello 는 10 이고 world 는 20
객체의 중첩 구조분해할당
const obj = {
one: {
two: {
three : "hello"
}
}
};
const {one : { two : {three} } } = obj;
// three 는 hello
함수의 구조분해할당
const obj = {
x :10,
y :20
}
function sum(obj){
return obj.x + obj.y;
}
console.log(sum(obj));
//를 구조분해할당을 쓰면
const obj = {
x :10,
y :20
}
function sum({x,y}){
return x + y;
}
console.log(sum(obj));로 바꿀 수 있다.
이렇게 쉽게 바꿀 수 있다.
let a = 123;
let b = 456;
let temp = a;
a = b;
b = temp;
//구조분해할당을 쓰면
[a,b] = [b,a]
디폴트 값을 지정해줄 수도 있다.
const [a, b=20] = [10];
// a 는 10 이고 b는 20이다
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2023 신입부원 심화 스터디] 박지민 #3주차 - 보충수업 Part .1, Part. 2 (0) | 2023.05.04 |
|---|---|
| [2023 신입부원 심화 스터디] 신진욱 #3주차 - Part 4, Part 5 (0) | 2023.05.04 |
| [2023 신입부원 심화 스터디] 김윤희 #2주차 - Part 2. , Part3. (0) | 2023.04.15 |
| [2023 신입부원 심화 스터디] 정호용 #2주차 - Part 2. , Part3. (0) | 2023.04.14 |
| [2023 신입부원 기초 스터디] 이총명 #2주차 - CSS 입문 (0) | 2023.04.14 |
