자바 스크립트
자바 스크립트는 스크립트 언어의 특성 상 플랫폼에 독립적이며 모든 웹 브라우저에서 동일한 실행 결과를 얻을 수 있다
클라이언트에서만 실행되기에 정보를 서버에 보낼 필요 없이 처리할 수 있다
스크립트 언어란?
어플리케이션이 실행되는 동안 라인 단위로 해서(인터프리터)되어 실행되는 언어
HTML 문서 내에서 스크립트 언어는 <script></script> 사이에 작성하며 별도의 컴파일 과정이 없다
자바스크립트를 외부 파일로 사용하는 경우(CSS의 외부스타일 시트방법과 동일)
외부 파일 자바 스크립트의 확장자는 "js"이고
파일을 불러오는 방법은
< script type = "text / javascript" src = "호출할 자바스크립트 파일명.js" ></script>
<body> 태그 부분이나 기능을 구현할 곳에 삽입 ( ✅ 링크가 삽입된 순서로 실행이 된다 )
그렇다면 자바스크립트의 변수는 어떻게 선언되고 사용될까?
자바스크립트 구문
문장 끝에 세미콜론( ; )을 입력해 구문 사이를 구분하기 위해 사용된다
(생략해도 무방하나 오류방지를 위해 작성하기를 권장!!)
자바스크립트 주석
// : 한 줄 주석 처리
/* ~ */ : 한 줄 이상의 주석 처리
변수 선언하는 방법
var 키워드 이용
자바스크립트에서 변수의 scope는 코드 블록 ( { } )이 아닌 함수 단위
var num = 10; var num = 20; |
✅ 동일한 이름의 변수를 생성하는 것이 가능
변수를 출력하려면 어떻게 해야 할까?
자바와 다르게 결과를 출력하는 방법에는 3가지가 있고, 결과를 확인하는 방법에는 1가지가 있다
분류 | 명령어 |
출력 | document.write ("브라우저 화면 출력"); |
alert ("경고창 출력"); | |
console.log ("콘솔창 출력"); | |
확인 | confirm ("확인창 출력"); |
1️⃣ console.log("콘솔창 출력")
2️⃣ document.write("브라우저 화면 출력")
3️⃣ alert("경고창 출력")
4️⃣ confirm("확인창 출력")
데이터 타입
기본타입 | 기능 |
숫자(number) | 정수, 실수 구분 없음 |
문자열(string) | 문자, 문자열 구분 없음 ( 쌍따옴표 / 홑따옴표 모두 가능 ) |
불린(boolean) | true / false 비교 결과가 0, null, " " (빈 문자열), false, undefined, NaN으로 판단 👉 false 나머지 비교 결과 👉 true 동등 비교할 경우 타입도 같이 비교해주는 ( ' === ' ) 사용 권장 |
undefined | 변수는 선언했으나 초기화를 하지 않은 경우 자동 저장 ( 불린형은 false로 반환 / 숫자는 NaN / 문자열은 undefined 반환 ) |
null | 값은 저장했으나 존재하지 않을 때 |
참조타입 | 생성 방법 |
배열 | [ ] 로 생성 |
객체 | { } 로 생성 |
연산자
산술연산자 | + | - | * | % | ++ | -- | ||
비교연산자 | < | > | <= | >= | == | !== | === | !== |
대입연산자 | = | += | -= | *= | %= | /= | ||
논리연산자 | ! | && | | | | |||||
삼항연산 | 조건식 ? 실행문1 : 실행문2 |
✅ 엄격한 비교 연산 - 값, 타입 모두 비교 ( === , !== )
배열
[ ]로 선언하고 자바와는 다르게 타입에 영향을 받지 않는다
✅ 배열의 선언, 생성
var arr1 = [ ];
var arr2 = [1, 2, 3];
var arr3 = [1, 2, 3, "가", "나"];
var arr4 = new Array();
✅ 배열의 사용
arr1[0] = 1;
arr1[1] = 2;
console.log(arr1[0]);
console.log(arr1[1]);
console.log(arr);
✅ 배열의 길이
console.log(arr1.length);
배열 사용해보기
<script>
//배열의 선언 방법 1
//[ ]로 표현
var arr = [1, 2, 3];
console.log(arr);
var arr2 = ['a', 'b', 'c'];
console.log(arr2);
var arr3 = [1, 2, 3, 'a', 'b'];
console.log(arr3);
// 배열의 사용
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
arr[0] = 100; // 값의 변경
console.log(arr);
console.log('---------------------------------');
//배열의 선언방법 2
var arr = new Array(); //빈 배열
console.log(arr);
var arr2 = new Array(10); //크기가 10인 배열
console.log(arr2);
var arr3 = new Array(1, 2, 3); //크기가 3, 초기값 1, 2, 3
console.log(arr3);
//배열의 길이 확인
console.log('베열의 길이:', arr3.length);
</script>
배열을 조작하는 다양한 함수들도 사용해보기 https://onev.tistory.com/61
<script>
//배열을 조작하는 다양한 함수
//MDN
var arr = [1, 2, 3, 4, 5];
//배열 마지막에 추가 push()
arr.push(6);
console.log(arr); // [1, 2, 3, 4, 5, 6]
//배열 마지막 요소 제거 pop()
arr.pop();
console.log(arr); // [1, 2, 3, 4, 5]
//배열의 첫번째 요소 추가 unshift()
arr.unshift(10);
console.log(arr); // [10, 1, 2, 3, 4, 5]
//배열의 첫번째 요소 제거 shift()
arr.shift();
console.log(arr); // [1, 2, 3, 4, 5]
//배열의 중간의 추가, 삭제 splice()
arr.splice(2, 1); //2번 인덱스의 요소 1개 삭제
console.log(arr); // [1, 2, 4, 5]
arr.splice(2, 1, 'a'); //2번 인덱스의 요소 1개 삭제 후, 'a' 추가
console.log(arr); // [1, 2, 'a', 5]
arr.splice(2, 0, 'b');
console.log(arr); // [1, 2, 'b', 'a', 5]
//배열 정렬 -> 사전 등재순
arr.sort();
console.log(arr); // [1, 2, 5, 'a', 'b']
arr.reverse();
console.log(arr); // ['b', 'a', 5, 2, 1]
//배열의 탐색
console.log( arr.indexOf('a') ); // 결과값: 1
console.log( arr.indexOf('a', 2) ); // 2번째 위치에서부터 a를 탐색, 값이 없다면 -1을 반환
//다음과 같이 활용될 수 있음!
if( arr.indexOf('a') != -1 ){}
//배열 합치기
var arr2 = ['가', '나', '다'];
var newArr = arr.concat(arr2);
console.log(newArr); // ['b', 'a', 5, 2, 1, '가', '나', '다']
/*
알아두면 좋은 배열의 함수
filter
foreach
join
map
*/
</script>
조건문
⭐⭐
조건문 - if else, switch
반복문 - while, for, for in
탈출문 - break, continue
조건문
1️⃣ if ~ else 조건문
if ( 조건식 ) {
// 실행문
} else {
// 실행문
}
2️⃣ switch문
switch ( value ) {
case "value":
// 실행문
break;
case "value":
// 실행문
break;
default :
// 실행문
}
조건문 사용해보기
<script>
var num1 = 1;
if (num1 <= 10) {
console.log('10보다 작음');
} else if (num1 >= 20) {
console.log('20보다 큼')
}
//형변환 parseInt(값), parseFloat(값)
var a = parseInt(Math.random() * 101);
console.log(a);
if (a >= 90) {
} else if (a >= 80) {
} else {
}
var b = '가';
switch (b) {
case '가':
console.log('네가 맞음');
break;
case '나':
console.log('네가 틀림');
break;
default:
break;
}
</script>
반복문
1️⃣ while문
var i = 1; ⭐ i 변수는 전역변수 ( 자바와 다름 )
while ( i <= 10 ) {
i ++;
}
2️⃣ for문
for ( var i = 1; i <= 10; i++ ){ }
while문 & for문 사용해보기
<script>
//while문
var a = 1;
while(a <= 10) {
console.log(a);
a++;
}
//for문
for(var i = 1; i <= 10; i++){
console.log(i);
}
//배열과 for문
var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++){
console.log( arr[i] );
}
// 빈 배열을 하나 생성하고, 1~10까지 값을 반복문으로 추가
var arr = new Array();
//첫번쨰 방법
// for(var i = 0; i < 10; i++){
// arr[i] = i +1;
// }
// console.log(arr);
//두번쨰 방법
var arr = [];
for(var i = 1; i <= 10; i++){
arr.push(i);
}
console.log(arr);
//구구단 2~9단 출력
var arr = [];
for(var i = 2; i<=9; i++){
for(var j = 1; j<=9; j++){
console.log( i, 'x', j ,'=', i*j );
}
}
</script>
3️⃣ for / in문
for ( 변수 in 객체 ) { } ⚠️ 자바의 향상된 for문과 상이한 부분이 있으니 주의!!
<script>
//for ~ in
// 배열에서는 인덱스를 담는다
var arr = [1, 2, 3, 4, 5];
for( var i in arr ) {
console.log(i); // i는 인덱스 번호 (헷갈리지 말거라)
/* 값을 출력하고 싶다면? */
console.log(arr[i]); // 배열의 값
}
// key : value
// 객체에서는 키를 담는다
var obj = {a : '1', b : '2'};
for(var i in obj){
console.log(i); //i는 value가 아니라 key
/* 객체의 값을 출력하고 싶다면? */
console.log(obj[i]); // 객체의 값
}
</script>
탈출문 - break, continue
이제부터가 하이라이트...! 정신 똑바로 차리고 보자
함수(선언적 함수)
자바스크립트 사용자 정의 함수
분류 | 종류 |
사용자 정의 함수 | 선언적 함수 익명 함수 |
"선언적 함수"의 특징은..
반환 유형은 따로 작성하지 않으며 매개변수도 작성하지 않을 수 있다
매개변수는 데이터 타입을 작성하지 않는다
리턴은 작성해도 되며 작성하지 않아도 무관하다
function name ( 매개변수 ) { - 데이터 타입 X, 반환 유형 X
// return true; - 있어도 되고 없어도 되고!
}
⭐ 선언적 함수는 함수 선언 이전에 호출해도 에러 발생 x ( = 호이스팅 )
compute ( );
function compute( ) {
var x = 100;
var y = 10;
var result = x / y;
console.log (result);
}
// compute ( ); // 물론 함수 선언 이후에 호출해도 됨
compute (100, 10);
function compute (a, b) {
var result = a / b;
console.log (result);
}
⭐ 선언적 함수는 함수를 변수에 저장할 수 있다
function method3 ( ) {
alert ("method3 실행");
}
var a = method3; ⚠️ 변수에 저장할 때 보통 자주하는 실수 : var = method3 ( ); 👉 저장하는 것이어서 호출 불가능
a( ); ✅ 함수를 a에 저장할 때 변수 선언 이후에 호출해야 한다
함수 (선언적 함수) 생성해보기
<script>
func1(); // 호이스팅 (선언적 함수에서 가능 - 당겨서 사용해도 오류 발생 X)
var result = func2; //함수의 return
console.log(result);
var result2 = func3(1, 2, 3);
console.log(result2);
function func1() {
console.log('func1 실행');
}
// 함수 사용
// func1();
function func2(){
console.log('func2 실행');
return 'func2반환';
}
function func3(a, b, c) {
console.log('func3 실행');
return a + b + c;
}
// 함수를 변수에 저장할 수 있다
var a = func1;
console.log( typeof a ); // function
console.log( a ); // function func1() {console.log('func1 실행');}
a(); // a의 호출 >> 결과값: func1 실행
</script>
함수(익명 함수)
익명함수는 변수에 함수 데이터를 저장해 변수를 마치 함수처럼 사용하도록 만들어준다
var compute = function ( ) { } ⭐ 함수 선언을 변수에 바로 한다고 생각하면 된다
⭐ 익명함수는 변수선언 이후에 호출해야 한다 (선언적 함수는 변수 선언 이전 / 이후 모두 가능)
// compute ( ); ⚠️ error
var compute = function ( ) {
console.log ( '익명함수' );
}
compute ( ); ✅ correct
함수(즉시실행 함수)
즉시실행 함수는 함수를 정의하고 바로 실행하는 특징을 가지고 있다 (함수를 정의하자마자 바로 호출하는 것)
( function ( ) { } ) ( );
🙋♀️ : 근데 이거 왜 써?
👩💻 : 페이지 시작 시 호출할 함수를 기술하려고..
함수 (익명함수) 생성해보기
<script>
//1st
// function func1(){
// }
// var a = func1;
//a(); //호이스팅 - 에러
var a = function() {
console.log('a함수');
}
a();
var b = function(x, y) {
return x + y;
}
var result = b(1, 2); //리턴이 있어서 호출만 했을 때 출력 x
console.log('b함수:', result);
console.log('------------------------------------------');
//실습
// 1. 익명함수로 변경해보기
function method1(x){
if(x % 2 == 0) {
return '짝수';
} else {
return '홀수';
}
}
// 익명함수
var method1 = function(x) {
return x % 2 == 0 ? "짝수" : "홀수";
}
var result2 = method1(2);
console.log('method1함수 값:', result2);
// 2. 매개변수를 3개 받아서 평균을 반환하는 익명함수 선언
var method2 = function (a, b, c) {
return (a+b+c) / 3;
}
var result3 = method2(3, 4, 5);
console.log('평균값:', result3);
console.log('------------------------------------------');
//즉시 실행 함수
(function(x, y, z){
console.log("즉시실행" , (x + y + z));
})(1, 2, 3); // 나 자신을 호출하겠다! (재활용 x)
</script>
함수의 가변 인자 argument
자바스크립트에서 매개변수는 단순히 인자 값에 들어오는 것에 이름을 붙이는 형태라고 생각하면 된다 (굉장히 가변적)
method ( 1, 2, 3, 4, 5, 6, 7 );
function method ( a, b ){
return a + b;
}
argument 사용해보기
<script>
function func1(x, y) {
console.log( "매개변수의 길이:" + arguments.length ); // 매개변수의 길이: 5
console.log( arguments[0] ); // 1
console.log( arguments[1] ); // 2
console.log( arguments[2] ); // 3
return x + y; // 3
}
// 매개변수 자체는 큰 의미가 없다. 단순히, 사용할 값에 이름을 붙이는 형태
// console.log( func1(1) );
// console.log( func1(1, 2) );
console.log( func1(1, 2, 3, 4, 5) );
</script>
전역변수(global)와 지역변수(local)
변수 범위 | 변수 선언 | 특징 |
함수 레벨 스코프 | var | 변수의 중복 선언 가능 함수 블록 { } 내부에서 지역 변수가 존재 |
블록 레벨 스코프 | let | 같은 블록 { } 에서는 이미 선언한 변수를 중복 선언 불가 블록 { }, 제어문 블록 { } 에서도 지역변수가 존재 |
✅ 스코프란? 변수 접근 규칙에 따른 유효범위를 의미한다
1️⃣ var 변수
var num1 = 50;
if ( num1 === 50 ) {
var num1 = 60; // 덮어쓰기 가능
}
alert ( "num1은?" + num1 ); // 60
var num2 = 50;
function add ( ) { // 지역 변수는 함수 내에서만 기능을 하고
var num2 = 60; 일반적인 { } 에서는 전역 변수처럼 사용
var num2 = 70;
}
add ( );
alert ( "num2는?" + num2 ); // 50
2️⃣ let 변수
let num3 = 100;
if ( num1 === 100 ) {
let num3= 200; // 덮어쓰기 불가능 ( 지역변수 취급 )
}
alert ( "num3는?" + num3 ); // 100
let num4 = 100;
function add ( ) {
var num4 = 200;
// var num4 = 300; // 동일한 이름의 변수 사용 불가
}
add ( );
alert ( "num4는?" + num4); // 100
<script>
//var 변수의 유효범위는 함수이다
var num1 = 50; //전역변수
if(true){
var num2 = 100; //전역변수 취급
}
console.log(num2);
var num3 = 100; //전역변수
function add() {
var num4 = 200; //함수 안에서 만들어졌기 때문에 지역변수 취급
}
// console.log(num4); //출력값 X
//ES6 - let 변수, 중괄호 스코프, 변수의 중복 선언 X (자바의 변수와 유사)
let x1 = 100;
if(true){
let x2 = 200; //지역변수 취급
}
console.log(x2); //err
let x3 = 100; //전역변수
function add2(){
let x4 = 200; //지역변수
}
console.log(x4); //err
</script>
클로저
클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다
👉 스코프를 이용해 변수의 접근 범위를 닫는 것(폐쇄)을 의미한다
클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다
function init() {
var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.-
function displayName() { // displayName()은 내부 함수이며, 클로저다
alert(name); // 부모 함수에서 선언된 변수를 사용한다.
}
displayName();
}
init();
init( )은 지역 변수 name과 함수 displayName( )을 생성한다
displayName( )은 init( )안에 정의된 내부 함수이며, init( ) 내부에서만 사용할 수 있다 (*자신만의 지역변수가 없다)
그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 displayName( )도 부모 함수 init( )에서
선언된 변수 name에 접근할 수 있다
( 만약 displayName( )가 자신만의 name 변수를 가지고 있었다면, name 대신 this.name을 사용했겠지! )
위의 코드 경우 경고창에 성공적으로 name변수 즉 'Mozilla'가 출력된다
이는 함수가 중첩된 상황에서 어떻게 변수를 처리하는지 확인할 수 있고 어휘적 범위 지정(렉시컬 스코핑)의 예시이다
"lexical"이란?
어휘적 범위 지정 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지
고려한다는 것을 의미한다
<script>
//렉시칼 스코프 - 함수의 선언위치에 따라서 상위 스코프를 결정하게 된다
// var a = 1;
// function x(){
// a = 10;
// console.log(a); //10 //함수 내의 가까운 지역변수를 출력
// }
// x();
var b = 1;
function y() {
var b = 10; //함수 y를 실행 body에서 실행하게 되면 z함수가 호출되는데,
z(); //함수 z가 실행되면 콘솔창에 b가 출력된다
} //이때 출력되는 b는 전역변수로 선언된 1이 출력된다
function z() {
console.log(b);
}
y(); //실행
var b = 1;
function y() { //이 경우는 함수 z가 함수 y 내부에 위치하고 있어 다른 결과값이 나온다
var b = 10; //함수 z는 내부함수로 외부함수의 변수에 접근이 가능하기 때문에
z(); //출력되는 b는 y함수에서 선언된 지역변수가 출력된다 (10 출력)
function z() {
console.log(b);
}
}
y(); //실행
</script>
이제 다음의 예시를 통해 클로저에 대해 이해해보자
클로저는 내부함수와 밀접한 관계를 가지고 있는 주제로,
내부함수 자체는 외부함수의 지역변수에 접근이 가능한데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있다 (이러한 매커니즘은 클로저라고 한다)
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)
외부 함수 makeFunc( ) 내부에는 지역 변수 name과 내부 함수 displayName가 선언되어 있다
내부 함수는 특성상 외부 함수(makeFunc)의 지역 변수에 접근할 수 있기 때문에 위의 예시처럼 출력이 가능하다
그런데 위의 경우 makeFunc( ) 함수가 실행되면서 myFunc이라는 변수에 저장되었다 (외부 함수의 실행이 종료된 것)
원래는 함수의 실행이 종료되면 그에 따라 변수에도 접근이 불가능한 것이 기본인데 위와 같은 경우에는 리턴된 displayName 함수를 실행시키면서 지역변수 name에 접근이 가능했는데 이러한 매커니즘이 바로 클로저이다
근데 클로저 함수 왜 써?
장점 1. 데이터를 보존할 수 있다
클로저는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다
(특정 데이터를 스코프 안에 가두어 두고 계속 사용할 수 있게끔!)
장점 2. 정보의 접근을 제한할 수 있다(캡슐화)
'클로저 모듈 패턴'을 사용해 객체에 담아 여러 개의 함수를 리턴하도록 만든다
장점 3. 모듈화에 유리하다
모듈화는 함수의 재사용성을 극대화하여 함수 하나를 독립적인 부품의 형태로 분리하는 것을 의미하는데
클로저를 통해 데이터와 메소드를 묶을 수 있기에 모듈화에 유리하다
⭐내부함수를 활용해서 정보를 은닉할 수 있다? 없다?
//클로저가 아닌 상황
function compute(){
var count = 0;
return ++count;
}
console.log( compute() ); //1
console.log( compute() ); //1
위의 코드 속 compute함수는 실행시킬 때마다 변수의 값이 초기화 되어서 출력할 때마다 1이라는 값이 나온다
이를 반복문처럼 누적해서 값이 출력되게끔 하려면 어떻게 해야 할까?
//변수를 함수에 은닉하기
function compute(){
var count = 0; // private 변수
return function(){ // ( ≑ 자바의 getter 메서드 )
return ++count;
} // 내부함수를 이용해서 count 변수에 접근을 함
}
var result2 = compute(); //result2는 내부함수
console.log( result2() ); //1
console.log( result2() ); //2
console.log( result2() ); //3
console.log( result2() ); //4
변수 count를 숨길 수 있는 함수를 하나 생성해 compute함수 내부에 위치시키면 된다
이렇게 코드를 작성하면 count변수가 1씩 증가하는 값이 함수에 기록된 채로 함수 자체가 리턴이 되어 다음
외부 함수인 compute를 실행시킬 때도 누적되어서 값이 출력된다
클로저 은닉
1️⃣ 내부함수로 getter 메서드 역할 해보기
function obj() {
var name = "홍길동";
return function (){ // 지역변수에 접근하려는..getter 메서드
return name;
}
}
var getObj = obj();
console.log(getObj());
2️⃣ 내부함수로 setter 메서드 역할 해보기
function obj() {
var name = "홍길동";
return function(aaa){
name = aaa;
console.log(name); // 외부에서 지역변수를 설정하는 setter 메서드
}
}
var setobj = obj();
setobj("이순신");
3️⃣ 문자열 변수 은닉하기
function obj() {
var name = "홍길동";
return {
getName : function() { //key에 function 저장
return name;
},
setName : function(aaa) {
name = aaa;
}
}
}
var result = obj(); //obj 반환
result.setName("이순신"); //setter
console.log( result.getName() ); //getter
obj 함수를 실행시켜 result라는 변수에 저장한 다음 result를 참조해 setName(key)에 저장된 함수를 실행시킨다
이때 매개변수로 들어간 "이순신"이 name 변수에 저장된다
그리고 getName을 호출해보면 name값을 리턴하는 함수인데 이 떄 setName으로 저장된 "이순신"이 출력값으로
나오게 된다
객체(JSON)
자바스크립트의 객체는 { }로 표기하며 함수로도 표기한다
객체의 표현 방법
//객체의 표현 { }
var person = { name : 'hong', age : 20, info : [1, 2, 3] };
console.log(person);
객체에 접근하는 방법
1️⃣ ( . ) 을 찍어 접근하기
// 객체의 접근방법이 2개이다
// 1. (.)을 찍어 접근
console.log(person.name); //hong
console.log(person.age); //20
console.log(person.info); //[1, 2, 3]
2️⃣ 이름 [ key ]로 접근하기
// 2. 이름[키]
// key 값은 문자로 표현
console.log(person['name']);
console.log(person['age']);
console.log(person['info']);
객체 안에 객체
//객체 안에 객체
var exam = {kor: 10, eng: 20};
var kim = {name:'김길동', exam/*key*/: exam /*{kor: 10, eng: 20}*/ };
//kim이 가지고 있는 kor값의 사용은?
console.log(kim.exam.kor);
console.log(kim['exam']['kor']);
console.log(kim.exam['kor']);
https://developer.mozilla.org/ko/docs/Web/JavaScript
'JavaScript' 카테고리의 다른 글
[JavaScript] ES6문법 - 클래스, 클래스 상속 (0) | 2023.01.13 |
---|---|
[JavaScript] 여러 태그에 한번에 이벤트 걸기 가능...? (0) | 2023.01.03 |
[JavaScript] 노드 보러 왔다가 클래스 속성 제어도 배우고 갑니다 (0) | 2023.01.02 |
[JavaScript] this 연산자 정복해보자 (0) | 2023.01.01 |
[JavaScript] 자바스크립트 이벤트핸들러 (0) | 2022.12.29 |