반응형
반응형

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

</style>
<body>
    <button id ="btn" style ="padding:10px"></button>
    <script>
        var btn = document.getElementById('btn');

        function setColor(){
            this.style.backgroundColor = '#333';
            this.style.color = 'orange';
        }

        btn.addEventListener('click',setColor);

    </script>
</body>
</html>

이와 같이 함수 정의를 따로 적어주는걸 이벤트 바인딩이라고합니다.

btn.addEventListner를 보시면 setColor를 안에서 적지 않고 밖에다 적어줬다

반응형
반응형

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id ="btn">click</button>
    <script>
        var btn = document.getElementById("btn");
    
        btn.onclick = function(){
            alert("event 1");
        }

        btn.onclick = function(){
            alert("event 2");
        }
        
    </script>
</body>
</html>

기존의 이벤트 핸들러는 해당 요소에 하나의 이벤트만 적용시킬 수 있었습니다.

하지만 이벤트 리스너를 이용해 하나의 요소에 여러 개 이벤트 처리가 가능하게 됩니다.

위와 같은경우에는 두번째의 onclick으로 덮어씌워지게 됩니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id ="btn">click</button>
    <script>
        var btn = document.getElementById('btn');

        btn.addEventListener('click',function(){
            alert('event 1');
        });
        
        btn.addEventListener('click',function(){
            alert('event 2');
        });
    </script>
</body>
</html>

이와 같이 addEventListener를 이용해 클릭했을 때 콜백메소드를 호출합니다. 그래서 두개의 이벤트가 순차적으로 작동하게 됩니다.

 

.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        width: 100px; height:100px;
        border: 3px solid black;
    }

    #box.hover{
        background-color:orange;
        color:white;
    }
</style>
<body>
    <div id ="box">
        <p>마우스를 올려 주세요</p>
    </div>

    <script>
        var btn = document.getElementById('box');

        
        btn.addEventListener('mouseover',function(){
            box.setAttribute('class','hover');
        });
        
        btn.addEventListener('mouseout',function(){
            box.removeAttribute('class');
        });
        
    </script>
</body>
</html>

마우스를 올렸을 때 class="hover" 속성을 추가시키고 마우스가 나가면 class속성을 없애버립니다.

이벤트 리스너의 특징은 on을 안 붙힙니다 앞에 테이블로 적어뒀던 onclick, onMouseover 등에서 on을 뺍니다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>
<body>
    <form id ="frm">
        <fieldset>
            <legend>주소록</legend>
            <textarea name ="txt" id="txt2" cols ="30" rows="10">입력해주세요</textarea><br>
            <input type ="submit" id = "q" value ="불러오기">
        </fieldset>
    </form>

    <script>
        var address =["김철수","email: kcs@gmail.com"]; // 미리 값을 준비

        var q = document.getElementById('frm'); // from id값 받아온다.
        
        function addr_search(){
            var textarea = q.txt; // q의 name값을 가져옴 q.txt 여기서 txt는 name값

            textarea.value = '이름 / 주소 \n'; // .value란 해당 태그에 해당하는 글자를 의미 여기선 입력해주세요 이다.
            textarea.value += address[0] + ' , ' + address[1] + '\n'; // 준비한 값들을 넣는 과정
        }

        q.addEventListener('submit', function(){ // 버튼을 눌렀을 때 function()이하의 내용이 작동한다. 
            event.preventDefault(); // 폼 전송 기본 이벤트 발생 안 하도록 함
            addr_search(); // addr_search 메소드를 실행시킴
        })
        
    </script>
</body>
</html>

 

반응형
반응형
이벤트 속성명 설명
onclick 마우스로 클릭할 때
onmouseover(hover 1단계) 요소 안에 마우스가 들어갔을 때
onmouseover(hover 2단계) 요소에서 마우스가 벗어났을 때
onkeydown 키보드를 입력할 때
onkeyup 키를 눌렀다 놓을 때
onfocus , onblur 요소가 선택됐거나 해제됐을 때(블록지정?)
onsubmit 폼 전송 이벤트가 발생했을 때
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href ="www.naver.com" onclick="alert('구글로 이동합니다')">구글</a>
</body>
</html>

작은 따옴표 잘 구분해주세요 저는 다 큰 따옴표로 썼는데 이제 구분해서 써야겠습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onload = function(){
        var h1 = document.querySelector('h1');
        h1.innerHTML = '문서를 로딩했습니다.';
    }
</script>
<body>
    <h1>홈페이지에 오신 것을 환영합니다.</h1>
</body>
</html>

바로 바뀌는 것이 아닌 홈페이지에 엑세스 됐을 때 바뀝니다. 새로고침 연타해서 보시면 바뀌과정이 눈에 보입니다.

window.onload란 홈페이지가 떴을때 function을 실행시키는 것입니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onload = function(){
        var h1 = document.querySelector('h1');
        
        h1.onclick = function(){
            this.innerHTML = '문서를 로딩했습니다.';
        }
    }
</script>
<body>
    <h1>홈페이지에 오신 것을 환영합니다.</h1>
</body>
</html>

홈페이지가 준비가 완료되면 h1 css생성자를 가져오고 h1.onclick 을 사용할 수 있게 합니다.

 

this는 자기자신을 의미합니다. 여기선 h1을 의미하죠

 

 

// ──────────────────────────── 이벤트 바인딩 ────────────────────────────

// 우측 마우스 클릭시 이벤트 리스너
document.addEventListener('contextmenu', handleCreateContextMenu);

// 좌측 마우스 클릭시 이벤트 리스너
document.addEventListener('click', handleClearContextMenu);

// 드래그 했을 때 이벤트 리스너
document.addEventListener("drag", function (event) {
    console.log("이동 중");
}, false);

// 블럭지정 했을 때 이벤트 리스너
document.addEventListener('selectionchange', () => {
    console.log(document.getSelection().toString()); // 블럭지정 내용
});
반응형
반응형

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        width:100px;
        height:100px;
        border:3px solid black;
    }
    .box{
        background-color: orange;
    }
</style>
<body>
    <div id = "box" onclick ="chnageColor()">Hello box</div>

    <script>
        function chnageColor(){
            var box = document.getElementById("box");
            box.setAttribute("class","box");
        }
    </script>
</body>
</html>

📝setAttribute

원래 div는 id값만 가지고 있지만 Id값을 받아와 class="box"라는 속성을 setAttribute로 추가시켰습니다.

 

그래서 background-color가 바뀌게 된 거죠

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        width:100px;
        height:100px;
        border:3px solid black;
    }
    .box{
        background-color: orange;
    }
</style>
<body>
    <div id = "box" onclick ="chnageColor()">Hello box</div>

    <script>
        function chnageColor(){
            var box = document.getElementById("box");
            box.setAttribute("class","box");

            var getAttr = box.getAttribute("class");
            alert(getAttr);
        }
    </script>
</body>
</html>

📝getAttribute

getAttribute는 속성에 해당하는 값을 가져옵니다 여기선 class="box"이니 box가 alert으로 경고창이 뜨는겁니다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        width:100px;
        height:100px;
        border:3px solid black;
    }
    .box{
        background-color: orange;
    }
</style>
<body>
    <div id = "box" onclick ="chnageColor()">Hello box</div>
    <button onclick="removeColor()">버튼</button>
    <script>
        function chnageColor(){
            var box = document.getElementById("box");
            box.setAttribute("class","box");

            var getAttr = box.getAttribute("class");
            alert(getAttr);
        }

        function removeColor(){
            var box = document.getElementById("box");
            box.removeAttribute("class");
            
        }
    </script>
</body>
</html>

 

📝removeAttribute

버튼을 누르면 removeAttributeclass 속성을 없애서 .box에 적용된 내부스타일이 적용이 안 되게 되는 거입니다.

 

반응형
반응형

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id ="title">
        여기를 변경해주세요
    </h1>

    <script>
        var title = document.getElementById("title");
        
        title.style.color = "white";
        title.style.background = "orange";
        title.innerHTML = "JavaScript로 문서를 조작";
    </script>
</body>
</html>

이런식으로 자바스크립트로 HTML 태그의 id값으로 접근해 조작할 수 있습니다.

 

📝document.getElementById

 

일단 태그에 id값을 주고 document.getElementById(id값)으로 접근할 수 있습니다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
    </ul>


    <script>
        var li = document.querySelector("li");

        li.style.color = "red";
        li.style.background = "blue";
    </script>
</body>
</html>

CSS 선택자를 사용해 접근할 수 있습니다.

 

📝document.querySelector

document.querySelector("CSS선택자")로 접근할 수 있습니다. 가장 편하지만 첫 번째 요소만 선택할 수 있습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
    </ul>


    <script>
        var li = document.getElementsByTagName('li');
        li[1].style.backgroundColor = "red";
        li[1].style.color ="white";
    </script>
</body>
</html>

📝document.getELementsByTagName

document.getElementsByTagName으로 태그명으로 접근 가능합니다 이와 같은 경우 인덱스로 다른 요소에 접근이 가능합니다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
    </ul>

    <button onClick = "setColor()"> click</button>


    <script>
        function setColor(){
            var li = document.querySelectorAll("li");

            for(var i = 0; i < li.length ; i++){
                li[i].style.color = "green";
                li[i].style.backgroundColor ="orange";
            }
        }
    </script>
</body>
</html>

📝onClick, document.querySelectorAll

onClick 이란 클릭시 setColor()라는 메소드가 실행됩니다.

document.querySelectorAll(CSS선택자)선택자 각각 다 접근이 가능합니다.

그리고 배열로 잡히게됩니다. 각 인덱스를 for문으로 돌아서 적용시키는 문입니다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="a">first</li>
        <li class="a">second</li>
        <li class="a">third</li>
    </ul>

    <button onClick = "setColor()"> click</button>


    <script>
        function setColor(){
            var li = document.getElementsByClassName("a");

            for(var i = 0; i < li.length ; i++){
                li[i].style.color = "green";
                li[i].style.backgroundColor ="orange";
            }
        }
    </script>
</body>
</html>

📝getElementsByClassName

위와 동일하지만 class이름으로 가져옵니다 getElementsByClassName을 이용해 같은 클래스 이름으로 배열로 가져옵니다.

반응형
반응형
  • 초기값 데이터 선언
let customer_name =["Lee","Kim","Park","Sung"];
let score =[90,55,40,100,10];

 

📝reverse, sort

console.log(customer_name.reverse()); //[ 'Sung', 'Park', 'Kim', 'Lee' ]

//매개변수를 주지않으면 문자열의 경우 알파벳순으로만 정렬한다.
console.log(customer_name.sort()); // [ 'Kim', 'Lee', 'Park', 'Sung' ]
console.log(score.sort());         // [ 10, 100, 40, 55, 90 ] => 내가 원치 않는 정렬

console.log(score.sort(function(a,b){return a - b;})); // 오름차순 [ 10, 40, 55, 90, 100 ]
console.log(score.sort(function(a,b){return b - a;})); // 내림차순 [ 100, 90, 55, 40, 10 ]

reverse의 경우 역순으로 정렬을 합니다

sort의 경우 숫자 및 문자열을 정렬해주는데 매개변수에 아무것도 입력 안 하면 알파벳 순으로 정렬하게 됩니다 그래서 숫자로 정렬을 하려면 익명함수를 사용해 a - b (오름차순) 또는 b - a (내림차순)을 리턴해줘야합니다

 

📝slice

console.log(customer_name.slice(1,3)); // [ 'Lee', 'Park' ] 1번 ~ 2번 인덱스까지

slice함수를 이용해 배열에서 원하는 요소를 뽑아서 배열을 만들 수 있습니다

 

📝concat

console.log(customer_name.concat("Lee")); // [ 'Kim', 'Lee', 'Park', 'Sung', 'Lee' ]
console.log(customer_name.concat(score)); // [ 'Kim',  'Lee', 'Park','Sung', 100, 90, 55, 40, 10 ]

concat이란 함수를 이용해 배열끼리 합칠 수 있습니다

 

 

📝shift , unshift, pop

customer_name.shift(); // Jung 맨 앞 인덱스 제거
console.log(customer_name); //  [ 'Lee', 'Park', 'Sung' ]

customer_name.unshift("jung"); // 맨 앞 인덱스에 추가
console.log(customer_name); // [ 'jung', 'Lee', 'Park', 'Sung' ]

customer_name.pop(); // 끝 인덱스 제거
console.log(customer_name); // [ 'jung', 'Lee', 'Park' ]

customer_name.push("Hello"); // 끝 인덱스 추가
console.log(customer_name); // [ 'jung', 'Kim', 'Park', 'Hello' ]
  • shift맨 앞 인덱스를 제거할 수 있습니다
  • unshift를 이용해 맨 앞 인덱스를 추가할 수 있습니다
  • pop을 이용해 끝에 있는 인덱스를 제거할 수 있습니다
  • push를 이용해 끝에 있는 인덱스를 추가할 수 있습니다

 

📝join

let A = customer_name.join(','); // 인덱스로 구분되어있는 배열을 :로 엮는 문자열로 만든다.
console.log(A); // Lee,Kim,Park,Sung

join 함수를 이용해 배열의 요소를 하나로 합쳐문자열로 만들 수 있습니다

반응형
반응형

📝함수 선언

function sum(a,b){
	var result = a + b;
	return result; 
}

console.log(sum(10,20)); // return 값이 없으면 출력을 못 한다.

// 함수 만들기

function 함수이름(sum) 인자값(a,b) {

    ... 내용

}

 

 

📝callback함수 [Prompt]

function sum(a,b,callback){
	var result = a + b;

	callback();
	return result;
}

var r = sum(10,20,function(){
	alert('a + b를 더했습니다.'); // chrome
}); // 여기에서 바로 alert이 실행된다.

console.log(r); // 30

// 콜백함수 (함수를 매개변수로 전달할 수 있다. 이걸 콜백함수라고 한다.)
// 여기에서 보면 sum이라는 함수는 처음에 10(a) + 20(b) 를하고 매개변수로 받은 function()을 실행시킨다.

콜백함란 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수입니다.

 

와같이 매개변수( function(){...}) 함수를 매개변수로 받아

함수(sum)을 실행 시키면 alert('a + b를 더했습니다.'); 실행됩니다.

 

(chrome 개발자화면에서 실행시켜주세요)

 

 

var customer_name =["Lee","Kim","Park"];

customer_name[0]="Sung";
console.log(customer_name[0]);
// 인덱스

customer_name[3]="Jung";
console.log(customer_name[3]);
// 추가

var my_list = ["string",5,["sub1","sub2"]];
console.log(my_list[0]);
console.log(my_list[2][1]);
// 이차원 배열

배열은[ ]으로 구성되어있습니다. (var customer_name =["Lee","Kim","Park"];)

 

[0] [1]로 인덱스 지정 접근할 수 있고 값이 있으면 수정도 가능합니다. (customer_name[0]="Sung";)

 

없는 인덱스를 지정해 추가할 수도 있습니다. (var my_list = ["string",5,["sub1","sub2"]];)

 

var customer_name =["Lee","Kim","Park"];

var search_name = prompt('이름 조회','조회할 이름을 입력하세요'); // chrome

for(var i = 0 ; i < customer_name.length ; i++){
	if(search_name == customer_name[i]){
		console.log(customer_name[i]);
	}
}
// 내가 찾고자하는 이름 출력

내가 찾고자하는 이름을 prompt라는 기능을 이용해서 찾을 수 있습니다.

 

적은 값이 search_name에 들어가고 그거와 for문을 돌아 배열값에 똑같은 걸 찾아 출력합니다.

 

📝익명 함수

// callback function
function printQuizResult(answer, userAnswer, printYes, printNo){
    
    if(answer === userAnswer) printYes();
    else printNo();

}

// anonymous function (익명 함수)
//  - you can use debug easily
//  - you can use recursion
const printYes = function(){
    console.log('정답입니다.')
}

const printNo = function(){
    console.log('틀렸습니다.')
}

console.log('자바스크립트 스펠링을 적어주세요')
printQuizResult('javascript','javascript',printYes, printNo);

// 함수형 프로그래밍은 호이스팅이 안 된다.

 

반응형
반응형

📝if문

var i = 5;

if(i == 5){
	console.log("i와 5는 같습니다.");
}else{
	console.log("i와 5는 같지 않습니다.."); 
}

// if문

 

📝for문

var number = 5;

for(var i = 1; i < 10 ; i++){
	console.log(number * i );
}

 

📝switch-case문

var answer = 3;
switch(answer){
	case 1:
		msg = "틀렸습니다.";
		break;
	case 2:
		msg = "틀렸습니다.";
		break;
	case 3:
		msg = "정답입니다.";
		break;
	default:
		msg = "잘못 입력하셨습니다."
		break;
}
console.log(msg);

 

📝삼항연산자

// 삼항연산자
console.log('5 > 3 ? ' + (5 > 3 ? 'yes' : 'no'));
반응형
반응형

📝 console.log()

출력하는 함수입니다. print와 같다고 생각하시면 됩니다.

console.log(5 * 1 );
console.log(5 * 2 );
console.log(5 * 3 );
console.log(5 * 4 );
console.log(5 * 5 );
console.log(5 * 6 );
console.log(5 * 7 );
console.log(5 * 8 );
console.log(5 * 9 );

// console.log 예제

 

📝Javascript 변수 타입

var number = 5; // 숫자
var string = "고양이"; // 문자
var bool = true; // boolean
var array = []; // 배열
var object = {}; // 객체
var who_am_i; // 변수에 값 지정 안 함

console.log(typeof number ); // number
console.log(typeof string ); // string
console.log(typeof bool ); // boolean
console.log(typeof array ); // object
console.log(typeof object ); // object
console.log(typeof who_am_i ); // undefined

자바스크립트 변수는 동적타입으로 할당된 값에 따라 자동으로 지정됩니다

 

 

📝Symbol

const id1 = Symbol('id');
const id2 = Symbol('id');

console.log(id1 === id2); // false

const id = Symbol('id');
const age = Symbol(20);
const user = {
    name : 'Mike',
    age : 30,
    [id] : 'myid',
    [age] : 20
}

console.log(Object.keys(user));    // [ 'name', 'age' ]
console.log(Object.values(user));  // [ 'Mike', 30 ]
console.log(Object.entries(user)); // [ [ 'name', 'Mike' ], [ 'age', 30 ] ]

심볼의 경우 유일한 식별자로 유일성을 보장하는데 그래서 같은 형태로 만들어도 같지 않습니다. 또한 객체에서 값을 추출할 때 값이 출력이 안 됩니다 아래와 같이 활용이 가능하다는데 솔직히 제대로 안 써봐서 잘 모르겠습니다.

 

const user = {name :"Mike", age: 30, showAge : () => {console.log(this.age)}}
const showName = Symbol("show name");

user[showName] = function () { // user.showName으로 접근시 Symbol객체로 안 들어가니 []로 사용 유의
    console.log(this.name);
}

user[showName]();  // Mike
console.log(user);
// {
//     name: 'Mike',
//     age: 30,
//     showAge: [Function: showAge],
//     [Symbol(show name)]: [Function (anonymous)]
// }


for (let key in user) {
    console.log(`key : ${key}, value : ${user[key]}`);
    // key : name, value : Mike
    // key : age, value : 30
    // key : showAge, value : () => {console.log(this.age)}

}

showAge의 경우 출력이 되지만 Synmbol로 선언한 거는 노출이 안 되는 걸 확인 할 수 있습니다

 

🔗 참고 및 출처

https://www.youtube.com/watch?v=E9uCNn6BaGQ&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=4

 

반응형