제코베 강의를 듣다가 emmet 문법을 알게되었다
쓰던 편집기가 아톰이라 설치해봤다
1.File
2.Settings
3.+Install
4.emmet 검색
하단으로 쭉 내리면 찐 emmet이 있다
설치하면 끝!
| [2022 30분 요약 강좌 시즌 1](리뉴얼)JavaScript 2부_제주코딩베이스캠프 (0) | 2022.08.16 |
|---|---|
| [2022 30분 요약 강좌 시즌 1](리뉴얼)JavaScript 1부_제주코딩베이스캠프 (0) | 2022.08.15 |
2부는 사실 43분이다
`Template literal 템플릿 리터럴` 기호이름은 백틱 backtick
let x = 'acd'
let x = "acd"
let x = `acd`
//뭘 해도 결과값은 'acd'`abcde${변수명}`예시
let name = 'baeggoose'
let age = 109
console.log('제 이름은' + name + '입니다. 제 나이는' + age + '입니다.')
제 이름은baeggoose입니다. 제 나이는109입니다
//번거로움.
console.log(`제 이름은 name 입니다. 제 나이는 age 입니다.`)
제 이름은 name 입니다. 제 나이는 age 입니다
//변수로 인식을 못함.
console.log(`제 이름은 ${name} 입니다. 제 나이는 ${age} 입니다.`)
제 이름은 baeggoose 입니다. 제 나이는 109 입니다
//템플릿 리터럴. ${변수}를 인식함name
'baeggoose'
name[1]
'a'
//인덱싱한다.
name.length
9
name.slice(2,)
'eggoose'
//2번째까지 잘라냄.
name.replace('baeg','peng')
'peng goose'
//백 구스를 펭 구스로 바꿈
'baeg goose baeg'.replace(/baeg/g,'peng')
'peng goose peng'
//g는 글로벌하게 이 안에 있는 모든걸 뜻함'hello'.repeat(100)
'0'.repeat(100)
0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
'0'.repeat(100).split('')
(100) ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0']
'5'.repeat(100).split('').map(Number)밑에껀 알고리즘 문제 풀때나 급할때 사용한다
let x = true
undefined
//'따옴표' 안쓴게 주의점, 다른 언어에서는 T 대문자로 쓰기도 한다.
!![]
true
!!{}
true
//둘 다 다른 언어에서는 false다
!!''
false
//아무것도 없으면 false
!!'hello'
true
!!0
false
!!10
true
!!-10
true
//0을 제외한 숫자는 모두 truelet x
undefined
x
undefinedx = null
nullex) 반에서 누가 전학간다고 번호가 당겨지지 않는다 그럴때 없음을 명시해준다
['하나', '둘', '셋']
[100, 200, 300]
[{'one':1, 'two':2}, {'one':10, 'two':20}]//실무에서 많이 보이는 형태.
let x = [{'one':1, 'two':2}, {'one':10, 'two':20}]
undefined
x[1]
{one: 10, two: 20}
x[1]['one']
10
[[10, 20], [100, 200], [1000, 2000]]
// 3차원
let x =[[[1, 2], [10, 20], [100, 200]],
[[3, 4], [30, 40], [300, 400]]]
//400을 꺼내고 싶다.
x[1]
(3) [Array(2), Array(2), Array(2)]
0: (2) [3, 4]
1: (2) [30, 40]
2: (2) [300, 400]
length: 3
[[Prototype]]: Array(0)
x[1][2]
(2) [300, 400]
x[1][2][1]
400
이게 왜 중요하냐? JSON로 실무에서 쓰는 데이터를 생성할 때
Array의 Depth가 얕지 않고 점점 더 깊어지므로 접근하는 방식을 알아야 하기 때문이다
x=[10,20,30,40]
(4) [10, 20, 30, 40]
x.forEach(x => console.log(x ** 2))
VM2147:1 100
VM2147:1 400
VM2147:1 900
VM2147:1 1600[10,20,30,40].map(x => x+100)
(4) [110, 120, 130, 140]
//새로운 배열을 만들어준다[1,2,3,5,7,9].filter(x => x > 4)
(3) [5, 7, 9]
[1,2,3,5,7,9].find(x => x > 4)
5
Array(100).fill(0)
Array(100).fill('hello')
Array(100).fill('hello'.repeat(2))
Array(100).fill(0).map((value, index)=> value + index)
Array(100)
(100) [empty × 100]//비어있음
Array(100).fill(0)
(100) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
Array(100).fill(0).map((value, index)=> value + index + 1)
(100) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]
Array(100).fill(0).map((value, index)=> value + index + 100)
(100) [100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199]{
"지역이름": "전국", // key : value(2개의 집합을 가리켜 객체 프로퍼티).
"확진자수": 24889,
"격리해제수": 23030,
"사망자수": 438,
"십만명당발생율": 48.0
}
{
'one' : 1,
'o n e' : 1,
'1 one' : 1
}
{
one : 1,
o n e : 1, // error.
1 one : 1 // error.
}
let x=1, y=2, z=3
let object = {x, y, z} // {x: 1, y: 2, z: 3}.변수명[x]가 안되는 이유는 x를 변수로 인식할 수 있기 때문이다
//변수명.keys()와 같은 형식은 안됩니다.
x.keys()
let map = new Map()
map.set('one', 100)
map.set('two', 200)
map.set('three', 300)
map.set('four', [10, 20])//map.keys(),values(),entries() 오브젝트랑 똑같이쓸수있음.
map.set(5, [100, 200])
map.set([1, 2], [100, 200])
map.get(5)
let human = {
name:'hojun3',
age:30,
local:'jeju'
}
let hojun = new Map(Object.entries(human))
let test = new Map(Object.entries(Object))//오브젝트에 접목let set = new Set('11111222233333')
undefined
set
Set(3) {'1', '2', '3'}//중복 허락안함
set.add(5);
Set(4) {'1', '2', '3', 5}//추가
set.add(7);
Set(5) {'1', '2', '3', 5, 7}
set.size
5조건문과 반복문
조건문
if(false) {
console.log('hello 1')
}
if(false) {
console.log('hello 2')
}
if(true) {
console.log('hello 3')
}
if(true) {
console.log('hello 4')
}
//트루인 것만 출력
let x =2
if(10 % x == 0)//변수를 넣을 수 있다
trueif(false){//(true)면 헬로 원을 실행시킨다 그런데 false이므로 밑의 else로 간다
console.log('hello 1')
}
else if(false) {//마찬가지로 트루여야하는데 아님
console.log('hello 2')
}
else if(true) {//트루가 맞음 헬로3이 실행된다
console.log('hello 3')
}
else if(true) {//그렇지 않을 때 실행되는데 이미 트루가 나와서 위에만 출력
console.log('hello 4')
}
else {
console.log('!!')
}let result = true ? 1 : 100;
result
1
//결과가 트루일 때 앞의 값을 출력한다.
true ? console.log('one') :
console.log('two');
one
false ? console.log('one') :
console.log('two');
twolet day
switch (new Date().getDay()) {
case 0:
day = "일";
break; //케이스 0에서 멈춘다
case 1:
day = "월";
break;
case 2:
day = "화";
break;
case 3:
day = "수";
break;
case 4:
day = "목";
break;
case 5:
day = "금";
break;
case 6:
day = "토";
}
console.log(day)
일반복문
for (let i = 0; i < 10; i++) {
console.log(i)
}
0
VM3516:2 1
VM3516:2 2
VM3516:2 3
VM3516:2 4
VM3516:2 5
VM3516:2 6
VM3516:2 7
VM3516:2 8
VM3516:2 9
for( let i = 5; i < 10; i++){
console.log(i)
}
VM3574:2 5
VM3574:2 6
VM3574:2 7
VM3574:2 8
VM3574:2 9
undefined
for( let i = 5; i < 10; i = i +2){
console.log(i)
}
VM3601:2 5
VM3601:2 7
VM3601:2 9
for( let i = 5; i < 10; i = i +2){
for( let k = 6; k < 10; k++){
console.log(`${i} x ${k} = ${i*k}`)
}
} //for문이 중첩되는 경우가 굉장히 많다
VM4113:3 5 x 6 = 30
VM4113:3 5 x 7 = 35
VM4113:3 5 x 8 = 40
VM4113:3 5 x 9 = 45
VM4113:3 7 x 6 = 42
VM4113:3 7 x 7 = 49
VM4113:3 7 x 8 = 56
VM4113:3 7 x 9 = 63
VM4113:3 9 x 6 = 54
VM4113:3 9 x 7 = 63
VM4113:3 9 x 8 = 72
VM4113:3 9 x 9 = 81//for of
let a = [10, 20, 30, 40];
for (let i of a) {
console.log(i);
}
10
20
30
40
let a = 'hello';
for (let i of a) {
console.log(i);
}
h
e
2l
o
let s = 0
let a = '19821'
for (let i of a) {
s += i //s는 i를 누적한다
}
'019821'
s
'019821'
let s = 0
let a = '19821'
for (let i of a) {
s += parseInt(i)
}
21let a = {'one':1, 'two':2};
for (let i in a) {
console.log(i);
}
one
two//키값만 출력한다 밸류는 log(a[i]);let x = 0;
while (x < 10) {
console.log(x);
x++; //x는 증가한다는 전제가 꼭 있어야 한다 안 그럼 무한반복된다
}
//예제
for (let i = 0; i < 10; i++) {
if (i == 5) {
break;
}
console.log(i)
}
0
1
2
3
4
break 은 반복문을 탈출하고
for (let i = 0; i < 10; i++) {
if (i == 5) continue;
console.log(i);
}
0
1
2
3
4
6
7
8
9
continue 은 다음 루프로 넘어간다
함수와 클래스
함수
let 함수표현식 = function(){} // 호이스팅 X(let ,class 등 일시적 사각지대에 빠질 수 있다)
function 함수선언식(){} // 호이스팅 Ofunction add(x, y){
return x + y; //x,y에 값을 돌려 놓는다
}
add(3, 5)
function add(a = 100, b = 200) {
console.log(a, b);
return a + b;
}
add(10, 20);
// 30
add(10);
// 210
add(); //디폴트 값대로
// 300
add(b=300) // a에 입력
// 500
add(undefined, 300);
// 400
function add({ a = 100, b = 200 }) {
console.log(a+b);
}
add({b: 300}); // 400function add(x, y) {
return x + y;
}
function mul(x, y) {
return x * y;
}
function cal(a, b){
return a(10, 10) + b(10, 10);
}
cal(add, mul); // 함수를 변수처럼 실행시킨다function cal(a, b){
return a(10, 10) + b(10, 10);
}
cal((a, b) => a + b, (a, b) => a * b);
function 제곱(x) {
return x**2
}
// 함수표현식, 호이스팅 X
let 제곱 = x => x**2; //리턴값 x**2; 인자값이 하나일 때
function f(a, b) { //인자값 여러개일때
let z = 10
let result = z + a + b
return result
}
// 함수표현식, 호이스팅 X
let f = (a, b) => {
let z = 10
let result = z + a + b
return result//리턴값 여러개 일 때
};클래스
class Notice {
constructor(title, contents, author){ //constructor는 고정이다
this.title = title
this.contents = contents
this.author = author
}
수정하기(title, contents, author){
this.title = title
this.contents = contents
this.author = author
}
}
//이게 클래스 밑에 게시글이 인스턴스
dataBase = []
게시물1 = new Notice('제목1', '내용1', '저자1')
dataBase.push(게시물1)
게시물2 = new Notice('제목2', '내용2', '저자2')
dataBase.push(게시물2)
게시물3 = new Notice('제목3', '내용3', '저자3')
dataBase.push(게시물3)
dataBase.forEach(d => {
제목 = document.createElement('h1')
제목.textContent = d.title
내용 = document.createElement('p')
내용.textContent = d.contents
저자 = document.createElement('p')
저자.textContent = d.author
document.body.append(제목)
document.body.append(내용)
document.body.append(저자)
})
// dataBase.splice()와 같은 것으로 삭제, 실제로는 mongoDB와 같은 곳에서 삭제예시) 화면에서 가로세로 높이와 같은 큰틀은 같으므로 클래스를 묶는다
class Human {
constructor() {}
// 인스턴스 메서드, 인스턴스 프로퍼티 메서드, 프로토타입 메서드
a() {}
// 클래스 메서드, 클래스 프로퍼티 메서드, 정적 메서드
static b() {}
}
hojun = new Human('호준')
//휴먼이라는 클래스는 공격과 방어가 가능한데 어떤 새로운 휴먼을 만들어도 쓸 수 있다
typeof hojun // object
typeof Human // function
// getter - 획득
// setter - 설정
// # = private 필드
class Mento extends Student {//상속
codeReview() {
console.log('코드리뷰를 진행합니다.');
}
}
let hojun = new Student(999, '호준', ['python', 'js', '...생략...']);
let hojun2 = new Mento(999, '호준', ['python', 'js', '...생략...']);예외처리, 전개표현식, 정규표현식, 리터럴 등
예외처리
try {
xxxx += 10000 //x 가 없는데 누적시킨다 에러
} catch(e) {
console.log('에러!')
console.error(e)
} finally {
console.log('finally!') //무조건 실행시킨다
}
에러!
VM139:5 ReferenceError: xxxx is not defined
at <anonymous>:2:4 // 빨간 에러 표시
finally!
//throw new Error(message);
//throw new SyntaxError(message);
//throw new ReferenceError(message);전개구문 사용
function f(...x){
return x;
}
f(1, 2, 3, 4, 5) //여러개의 인자값을 전달해줄때let arr1 = [1, 2, 3, 4];
let arr2 = [10, 20, 30, 40];
let arr3 = [100, ...arr1, 200, ...arr2, 300]
let arr4 = [100, arr1, 200, arr2, 300]
console.log(arr3)
Math.max(...arr3);//max 값 뽑을때 사용한다
let [a, b, c, ...d] = [10, 20, 30, 40, 50, 60, 70]//10,20,30은 a,b,c,나머지 인자가 ...d가 된다정규표현식 (어렵대)
// 0 문자 제거
let s = '010100020201020304812123';
s.replace(/[^1-9]/g,"") //꺾쇠는 밖에 있을 때 시작이고,[^와 붙어있을 땐 부정not의 의미
'11221234812123' // 1부터 9까지가 아닌것 0을 집어 내겠다
/*
- `^` : 문자열의 시작
- `$` : 문자열의 종료. 옵션에 따라 문장의 끝 또는 문서의 끝에 매치된다.
- `.` : 임의의 한 문자
- `[]`: 문자 클래스. 문자 클래스 안에 들어가 있는 문자는 그 바깥에서 하나의 문자로 취급된다.
- `^` : 문자 클래스 내에서 ^는 not
- `-` : ex) a-z는 a에서 z까지의 문자
- `|` : or를 나타냄
- `?` : 앞 문자가 없거나 하나 있음
- `+` : 앞 문자가 하나 이상임
- `*` : 앞 문자가 0개 이상임
- `{n,m}` : 앞 문자가 `n`개 이상 `m`개 이하. `{0,1}` 은 `?`와 같은 의미다.
- `{n,}` : 앞 문자가 `n`개 이상. 위의 형태에서 `m`이 생략된 형태이다. `{0,}` 이면 `*`와 같고 `{1,}` 이면 `+`와 같은 의미이다.
- `{n}` : 앞 문자가 정확히 `n`개. `{n,n}` 과 같은 의미이다.
- `()` : 하나의 패턴구분자 안에 서브 패턴을 지정해서 사용할 경우 괄호로 묶어주는 방식을 사용한다.
- `\\\\s` : 공백문자
- `\\\\b` : 문자와 공백 사이를 의미한다.
- `\\\\d` : 숫자 [0-9]와 같다.
- `\\\\t` : 탭문자
- `\\\\w` : 단어 영문자+숫자+_(밑줄) [0-9a-zA-Z_]문자 이스케이프는 대문자로 적으면 반대를 의미한다.
[a-z] : a ~ z 사이의 문자를 찾음
[1-9] : 1 ~ 9 사이의 문자를 찾음
[abc] : a, b, c중 하나를 찾음
[^abc] : a, b, c를 제외한 문자를 찾음
.z : 아무 문자 하나를 . 기호로 찾으며 z로 끝남을 의미
a+ : a가 1개 이상을 의미함
a* : a가 0개 또는 그 이상을 의미함
s : 공백 문자를 찾음(스페이스, 탭 등), 대문자의 경우 아닌 문자를 찾음
d : 숫자를 찾음, 대문자의 경우 아닌 문자를 찾음
w : 알파벳 영문과 숫자와 언더바 _ 기호를 찾음, 대문자의 경우 아닌 문자를 찾음
t : 탭 공간을 찾음
g : 검색범위를 전역으로 확장
i : 대소문자를 구분하지 않음
gi : 검색 범위를 전역으로 확대하면서 대소문자를 구분하지 않음
m : 여러줄을 동시에 매칭함
*/리터럴
let a = 0b1001
a == 9 // binary 바이너리 이진법
let b = 0o1001
b == 513 // octa 옥타 팔진법
let c = 0x1001
c == 4097 // hexa 헥사 십육진법구조분해할당
for (let [[i, j], k] of [[[1, 2], 2], [[1, 2], 4]]) {
console.log(i, j);
}동기와 비동기
// 순서대로 한다면 덧셈, 곱셈, hello world 순이지만
// 비동기이기 때문에 hello world, 곱셈, 덧셈 순이 됨
function 덧셈(a, b, 콜백함수) {
setTimeout(()=>{
let result = a + b
console.log(result)
}, 2000)
}
function 곱셈(a, b, 콜백함수) {
setTimeout(()=>{
let result = a * b
console.log(result)
}, 1000)
}
덧셈(20, 30)
곱셈(2, 6)
console.log('hello world')
//만약 값이 0이 되더라도 헬로월드 먼저 출력된다new Promise((resolve, reject) => {
//code 안에서 해결이 되면 then으로 거부가 되면 catch로 간다
})
.then(result => result)
.then(result => result)
.catch(err => err)
.finally(result => result) //무조건 실행
let p = new Promise(function(resolve, reject) {
resolve('hello world');
}).then(메시지 => {
alert(메시지);
return 메시지.split(' ')[0]
}).then(메시지 => {
alert(메시지);
return 메시지[0]
}).then(메시지 => {
alert(메시지);
});
const f = fetch('<https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json>')
f
//Promise {: Response}
const f = fetch('<https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json>')
.then(function(response) {
return response.json();
})
.then(function(json) {
console.log(json);
return json
})
const f = fetch('<https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json>')
.then(d => d.json())
.then(d => console.log(d))
//VM458:7 (18) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: {시·도별(1): '전국', 총인구 (명): 52980961, 1차 접종 누계: 15199919, 2차 접종 누계: 4521785, 1차 접종 퍼센트: 28.6893984426, …}1: {시·도별(1): '서울', 총인구 (명): 9911088, 1차 접종 누계: 2811191, 2차 접종 누계: 835878, ...중략...
// 뒤에서 나올 DOM api 사용
const f = fetch('<https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json>')
.then(data => {
console.log('데이터 받기 성공!')
const jsonData = data.json()
return jsonData
})
.then(json => {
json.forEach(item => {
console.log(item)
const h2 = document.createElement('h2')
h2.innerText = item['시·도별(1)']
document.body.append(h2)
const p = document.createElement('p')
p.innerText = item['총인구 (명)']
document.body.append(p)
})
})
.catch(e => {
console.log('json 변환 실패!!')
})
/////////
// 동기처리 //
setTimeout(()=> {
console.log('5초 끝!')
}, 5000);
setTimeout(()=> {
console.log('10초 끝!')
}, 10000);
function cook(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const myCake = async () => {
await cook(3000);
return '케이크';
};
const myCoffee = async () => {
await cook(2000);
return '커피';
};
const myCookie = async () => {
await cook(5000);
return '쿠키';
};
async function asyncProcess() {
const cake = await myCake();
console.log(cake);
const coffee = await myCoffee();
console.log(coffee);
const cookie = await myCookie();
console.log(cookie);
}
asyncProcess();
///////////
// 비동기처리 //
setTimeout(()=> {
console.log('5초 끝!')
}, 5000);
setTimeout(()=> {
console.log('10초 끝!')
}, 10000);
function cook(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const myCake = async () => {
await cook(3000);
return '케이크';
};
const myCoffee = async () => {
await cook(2000);
return '커피';
};
const myCookie = async () => {
await cook(5000);
return '쿠키';
};
async function promiseProcess() {
const results = await Promise.all([myCake(), myCoffee(), myCookie()]);
console.log(results);
}
promiseProcess();
// 질의응답
async function a() {
console.log(1);
setTimeout(()=> {
console.log(2)
}, 0);
console.log(3)
}
a()
// 1, 3, 2
async function a() {
console.log(1);
await setTimeout(()=> {
console.log(2)
}, 1000);
console.log(3)
}
a()
// 1, 3, 2
// why? await은 promise 앞에서만 사용
// await [[Promise 객체]] 의 형식async 데이터가 다 올때까지 기다리고 있다
https://paullabworkspace.notion.site/JavaScript-f037c206e538471f9a9f1915b2139a60 책 참조
알아서 잘 딱 깔끔하고 센스있게 정리하는 JavaScript 핵심 개념
A new tool for teams & individuals that blends everyday work apps into one.
paullabworkspace.notion.site
DOM
DOM을 탐색해봅시다.
개행을 찾을 때
// body>h1{hello world}+p{hello}+div>h1{hello world}+p{hello}
document.body.childNodes
document.body.childNodes[1].textContent = 'hello hojun'
document.body.childNodes[3].childNodes[1]
// 해당하는 Id를 가진 요소에 접근하기
document.getElementById()
// 해당하는 모든 요소에 접근하기
document.getElementsByTagName();
// 해당하는 클래스를 가진 모든 요소에 접근하기
document.getElementsByClassName();
// css 선택자로 단일 요소에 접근하기
document.querySelector("selector");
// css 선택자로 여러 요소에 접근하기
document.querySelectorAll("selector");
// target 요소를 생성합니다.
document.createElement(target);
// target 텍스트를 생성합니다.
document.createTextNode(target);
// target 요소를 element의 자식으로 위치합니다.
element.appendChild(target);
// element의 target 자식 요소를 제거합니다.
element.removeChild(target);| HTML편집기 Atom 아톰 에디터에 emmet 에밋 Plug-in/Package 설치 (0) | 2022.10.10 |
|---|---|
| [2022 30분 요약 강좌 시즌 1](리뉴얼)JavaScript 1부_제주코딩베이스캠프 (0) | 2022.08.15 |
HTML은 콘텐츠와 골격, CSS는 웹페이지의 레이아웃, JavaScript는 웹페이지의 동작을 담당하게 된다
다른 언어와 다른 점은 자바스크립트는 버전업이 됐다고 해서
이전에 있던 기능을 삭제하거나 새로운 기능을 막 추가하지 않는다
왜냐하면 이전의 코드들이 이미 배포가 되었기 때문에 오류가 나면 안되기 때문,
그래서 자바스크립트 설계자가 시인한 오류마저도 아직도 그대로 남아아있다
(뒤로 갈수록 자바스크립트가 왜이러지?싶을 수 있음)
중요한 변화포인트는 ES5 버전의 엄격모드, 배열메서드(map, filter, forEach 등)
ES6 버전의 const, let, Promise, Arrow function, class 이다
업데이트 되는 내용은 ECMA-인터내셔널 공식 사이트 : https://www.ecma-international.org/ 에서 확인 할 수 있다
001.html 새 파일 생성
! tab 은 emmet 문법이다
수업은 vscode로 진행되고 나는 쓰던 게 atom 이라 emmet 플러그인을 설치했다
자바스크립트 삽입위치
!Tab을 눌러 Emmet문법으로 완성한다
h1{hello world}+p{hello world}*5
하고 Tab (이것도 emmet 문법)
<script></script> 태그는 아무데나 넣을 수 있지만
첫번째 p태그에
<p id="one">hello world</p>
스크립트 태그에
document.getElementById('one').innerHTML = 'hi world'
를 추가해보자
첫번째 줄이 hi world 로 바뀐 걸 볼 수 있다
반면, 스크립트 태그의 위치를 옮겨 p태그 위나 head 태그 안으로 옮기면
아직 document 가 완성되지 않은 시점에서
getElementById 로 'one' 이라는 Id 를 셀렉하려고 했기 때문에 바뀌지 않는다
그래서 script의 위치는 body 닫기 태그 직전에 두는 것이 일반적이다
(절대적은 아님.프로젝트에 따라 중간이나 타이틀 밑에 놓는 경우도 있다)
내부 스크립트와 외부 스크립트
스크립트를 내부에 넣는 방법과 파일로 빼 외부에 저장하는 방법이 있다
스크립트 내부에 있는 코드를 test.js 라는 파일에 옮기고
스크립트 태그자리에 <script src="test.js"></script> 로 수정한다
이렇게 다른 태그안에도 자바스크립트를 추가 할 수 있지만
유지보수에 어려움이 생기므로 지양한다
let x = 10,
y = 20,
z = 30
console
.log(
x,
y,
z,
)
// 한 줄 주석입니다.
/*
여러줄 주석입니다.
*/
엄격모드
"use strict";
for (let x = 0; x < 100; x++) {
if(x % 3 == 0 && x % 5 == 0){
console.log(x)
}
}
15의 배수가 값
for (let x = 0; x < 100; x++) {
if(x % 3 == 0 || x % 5 == 0){
console.log(x)
}
}
3,5 의 배수가 값
& 비트연산자
9와 5를 이진법으로 바꿔 계산한다
실무에서는 거의 볼일 없음
let x = 3 (number)
let y = '3' (string)
console.log(x == y)
ture (자바스크립트에서만 값을 3으로 쳐줌)
console.log(x === y)
false (다른 타입인 넘버와 스트링이라서 거짓)
x++ 는 자기 자신을 한번 더 나타냄
단락 회로 평가랑 비슷
let result1;
let result2 = result1 ?? 100;
result1은 값을 지정하지 않은 undefined라서 = 일 때 || 와 마찬가지로
뒤에 있는 값인 100;이 result 2의 값이 된다
let result3 = 10;
let result4 = result3 ?? 100;
result3 은 값이 있으므로 result 4 의 값은 3 값인 10이 된다
let result5 = null;
let result6 = result5 ?? 100;
1과 마찬가지로 null 값이 없으므로 뒤에 있는 100이 6의 값이 된다
첫번째 예시가 false인 이유
배열 인덱스[0,1,2,] 로 판단해서 10이 없다
length 가 true 인 이유
console.dir(x) 했을때 모든 변수가 나오는데 거기에 length가 있다
https://paullabworkspace.notion.site/JS-22-6-8723b46e0cde4d90b020b689e5cb9f0a
JS(22년 6월 업데이트 완료)
자바스크립트
paullabworkspace.notion.site
https://www.youtube.com/watch?v=NQZZyVM8ksw&t=1s
| HTML편집기 Atom 아톰 에디터에 emmet 에밋 Plug-in/Package 설치 (0) | 2022.10.10 |
|---|---|
| [2022 30분 요약 강좌 시즌 1](리뉴얼)JavaScript 2부_제주코딩베이스캠프 (0) | 2022.08.16 |