자바스크립트 기본과 함수, 표현식 그리고 이벤트 처리

gdhi·2023년 11월 6일

JavaScript + JQuery

목록 보기

2/6

📌콘솔창에서 오류를 찾고 수정하기

👉 f12눌러서 에러 확인

📖자바스크립트 스타일 가이드

📌코딩 규칙이 왜 필요할까

마음대로 쓰면 협업 할 때 어디서 문제가 발생했는지 추측하기 힘들다.

표준 코딩 스타일 따르자

코드 들여쓰기를 잘하자

세미콜론 ; 구분을 잘하자

공백을 넣어 구분을 잘하자

주석을 잘달자 // /**/ 

식별자(변수명)에 맞게 지어라

예약어를 식별자로 쓰지말자

👉 구글의 자바스크립트 스타일 가이드

📖변수 알아보기

Java에서 기본적인 것은 했다. 조금 다른 것 위주로 배운다.

📌변수 선언하기

var(예약어) 변수명;
java 처럼 일일이 자료형을 써줄 필요 없이 자동으로 변환/추가된다.

📌나이 계산 프로그램 만들기

👉 자동으로 바뀌는 것이 많고, 어떤게 문자열이고 숫자인지 어떻게 인식하는지 알고 있어야 한다.

📖자료형

📌숫자형

👉 콘솔창에서도 확인이 가능하다

📌문자열

📌논리형

📌undefined, null

❗ 큰 따옴표 안엔 작은 따옴표로 표기한다

👉 실행은 됐지만 명령문이라 알 수 없는 자료형이다

📌배열

📌⭐자바스크립트의 데이터 유형 자동 변환⭐

자바스크립트의 편리한 점이면서도 약점인 부분은 데이터 유형이 유연하다는 것이다. 변수의 데이터 유형이 중간에 바뀔 수 있다는 것이다. 나이 계산 프로그램에서 프롬프트 창으로 사용자의 태어난 해를 입력 받았는데, 입력받은 값은 문자열이었지만 사칙연산에 사용된 문자열은 자동으로 숫자형으로 변환된다.

📖연산자

📌산술연산자

스킵, 다 해봤고 다 아는 것

📌할당 연산자

복합 대입 연산자와 같다

📌연결 연산자

"나이는 " + age + "세 입니다."

📌비교 연산자

java와 자료형 구분이 다르므로 약간 다른 것이 있다

👉 정확하게 자료형 까지 비교 하려면 연산자를 3개(!== ===) 써서 비교해야 한다.

👉 문자열 비교

📌논리 연산자

||, &&, !

📖조건문 알아보기

이미 알고 있다.

if if~else

switch

(조건) ? true 일 때 실행할 명령 : false 일 때 실행할 명령

📌if, if~else

👉 취소 클릭해야 null 값이 들어간다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    var userNumber = prompt("숫자를 입력하세요");

    if(userNumber !== null){
        if(userNumber % 3 === 0) /*문자열을 넣었지만 자동으로 숫자형으로 바꿈*/  
            alert("3의 배수입니다."); /*한 줄은 { } 안 써도 된다.*/        
        else
            alert("3의 배수가 아닙니다."); /*한 줄은 { } 안 써도 된다.*/
    }
    else
        alert("입력이 취소됐습니다.")  /*한 줄은 { } 안 써도 된다.*/
    </script>
</body>
</html>

📌switch

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: navy;
        }
        p{
            color: wheat;
        }
        p b{
            font-size: 2em;
            color: yellow;
        }
    </style>
</head>
<body>
    <script>
        document.write("")
        var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인");
        switch (session){
            case "1" : document.write("<p>마케팅 세션은 <b>201호</b>에서 진행 됩니다.");
                break;
            case "2" : document.write("<p>개발 세션은 <b>203호</b>에서 진행 됩니다.");
                break;
            case "3" : document.write("<p>디자인 세션은 <b>205호</b>에서 진행 됩니다.");
                break;
            default: alert("잘못 입력했습니다.");
        }
    </script>
</body>
</html>

👁‍🗨Quiz

Int 형으로 출력하려면 paresInt( ) 함수를 이용하면 된다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var enterNum = prompt("입장객 수를 입력하세요.");
        var onelineNum = prompt("한 줄에 몇 명씩 앉힐 것인지 입력하세요");
        
        if(enterNum%onelineNum === 0){
            document.write("총 " + parseInt(enterNum/onelineNum) + "줄 필요합니다.");
        }
        else{
            document.write("총 " + parseInt(enterNum/onelineNum + 1) + "줄 필요합니다.");
        }
        
    </script>
</body>
</html>

📖반복문 알아보기

이미 알고있다.

for

중첩된 for

while

break, continue

📌for

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container{
            width: 100px;
            height: 300px;
            border: 1px solid black;
            text-align: center;
            padding: 10px;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <script>
        for (i = 1; i <= 9; i++) {
            document.write("<div id = 'container'>");
            document.write("<h2>" + i + "단</h2>" + "<br>");
            for (j = 1; j <= 9; j++){
                document.write(i + " x " + j + " = " + (i*j) + "<br>");
                
            }
            document.write("</div>");
        }
    </script>
    </div>
</body>
</html>

📌while

📌break, continue

👁‍🗨Quiz

🎲Quiz1

<!DOCTYPE html>
<html>
    <head>
        <title>문제 1</title>
        <style>
            table{
                border-collapse: collapse;
            }
            td{
                padding: 5px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <script>
            var hnumber = prompt("입장객은 몇 명인가요?");
            var snumber = prompt("한 줄에 몇 명씩 앉습니까?");
            var printNumber;
            document.write("<h1>자리배치도</h1>")
            if(hnumber % snumber == 0){
                printNumber = parseInt(hnumber/snumber);
            }
            else{
                printNumber = parseInt(hnumber/snumber) + 1;
            }
            document.write("<table>")
            for(i = 0;i<printNumber;i++){ // 행
                document.write("<tr>");
                for(j = 1;j<=snumber;j++){ // 열
                    var temp = i*snumber+j;
                    if(hnumber<temp){
                        break;
                    }
                    document.write("<td> 좌석 "+temp+"</td>");
                }
                document.write("</tr>")
            }
            document.write("</table>")

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

🎲Quiz2

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var num1 = prompt("알아볼 배수 입력");
        var num2 = prompt("숫자 입력");
        
        document.write("<h1>" + num1 + "의 배수일까 아닐까?" + "</h1>");

        if(num2 % num1 ===0){
            document.write("<p>" + num2 + "는 " + num1 + "의 배수입니다.")
        }
        else{
            document.write("<p>" + num2 + "는 " + num1 + "의 배수가 아닙니다.")
        }
    </script>
</body>
</html>

🎲Quiz3

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            display: inline;
            font-weight: bold;
            font-size: 1.5em;
        }
    </style>
</head>
<body>
    <script>
        var num1 = prompt("알아볼 배수 입력");
        var num2 = prompt("몇 까지의 " + num1 + "의 배수를 찾을까요?");
        var count = "";
        
        document.write("<h1>" + num1 + "의 배수찾기" + "</h1>");

        for(i = 1; i <= num2; i++){
            if(i % num1 ===0){
            document.write("<p>" + i +" ,</p>")
            count++;
            }
        }

        document.write("<br>"+"<span style = 'color:red'>" + 
            "<p>" + num2 +" 까지의 " + num1+ " 의 배수의 개수 : "+ count + 
                "</span></p>");
    </script>
</body>
</html>

📖함수 알아보기

java의 method
void는 쓸 필요없이 return이 필요하면 그냥 쓰면된다
function name(a, b){
	명령;
    return a+b;
}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function addNumber(){
            var num1 = 5;
            var num2 = 2;
            alert("결과 값 : " + (num1 + num2));
        }
        addNumber();
    </script>
</body>
</html>

📖var를 사용한 변수의 특징

📌지역 변수(로컬 변수), 전역 변수(글로벌 변수)

👉 num1 , num2 는 지역 변수

👉 num1 은 지역 변수, num2는 전역 변수

❗ 함수 에서 var가 붙으면 지역 변수

👉 함수 밖인 var x 는 전역 변수

👉 num1 = 20; 덮어쓰기 된다.

❗ alert(num1);는 에러이다. var num1 = 5;로 이미 정의를 해놔서 지역변수이다.

📌var와 호이스팅

상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어 올리는 것

👉 호이스팅 처럼 var예약어를 사용한 변수는 선언하기 전에 사용하면 오류를 발생 시킬 수 있다.

📌변수 재선언과 재할당

👉 java와는 다르게 에러가 안남

📖let과 const

📌let을 사용한 변수의 특징

{ } 안에서만 사용 할 수 있다

👉 let을 { } 안에 사용

👉 let을 { } 밖에 사용, 에러는 안나지만 이렇게 사용 하면 안된다!

👉 재선언 불가. 호이스팅이 없다

📌const를 사용한 변수의 특징

java의 final과 같다. 한 번 선언하면 재할당 재선언 불가

📌자바스크립트 변수, 이렇게 사용하라

전역 변수는 최소한으로 사용

var 변수는 함수의 시작 부분에서 선언

for 문에서 var 변수 사용 자제

ES6인 경우 var 보다 let 사용

📖재사용할 수 있는 함수 만들기

📌매개변수, 인수, return

아는 내용

📌매개변수 기본값 지정하기

❗ function multiple(a, b, c)
function multiple(a = 10, b, c)
function multiple(a, b = 5, c)
안됨!!! 👉 뒤에 변수는 채워줘야 함

📖Quiz

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function calcSum(n){
            let sum = 0;
            for(let i = 1; i <= n; i++){
                sum += i;
            }
            return sum;
        }
        var inputNumber = prompt("얼마까지 더할까요?");
        if(inputNumber !== null){
            document.write("1부터 " + inputNumber + "까지 더하면 " + calcSum(inputNumber));
        }
        else{
            document.write("취소됐습니다.")
        }
    </script>
</body>
</html>

⭐📖함수 표현식⭐

Node.js 에서 엄청 나온다

📌⚡익명 함수⚡

정말 많이 쓴다

function(a, b){ 👉 이름이 없다. 익명
}
var result = function(a, b){
	return a+b;
}
result(10, 20); 👉 함수를 변수 처럼

👉 에러

👉 에러 X

📌⚡⚡즉시 실행 함수⚡⚡

일회용 함수. 한 번 돌리면 끝

function ( ){
	명령;
}
(function (num){ // 즉시 실행 함수
	명령;
}(5))
👉 5를 넣어서 실행 됨

📌⚡⚡⚡화살표 함수⚡⚡⚡

java의 람다식(lambda) 과 비슷
(매개변수) => { 함수 내용 }

📍매개변수가 0개

👉 익명 함수. 쓰기 귀찮다

👉 화살표 함수. return도 귀찮다

👉 많이 줄어듦.

📍매개변수가 1개

📍매개변수가 2개 이상

📖이벤트와 이벤트 처리기

📌이벤트 알아보기

📍마우스 이벤트

click : 사용자가 HTML 요소를 클릭할 때 이벤트 발생

dbclik : 사용자가 HTML 요소를 더블클릭할 때 이벤트 발생

mousedown : 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트 발생

mousemove : 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트 발생

mouseover : 마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생

mouseout : 마우스 포인터가 요소를 벗어날 때 이벤트 발생

mouseup : 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트 발생

📍키보드 이벤트

keydown : 사용자가 키를 누르는 동안 이벤트 발생

keypress : 사용자가 키를 눌렀을 때 이벤트 발생

keyup : 사용자가 키에서 손을 뗄 때 이벤트 발생

📍문서 로딩 이벤트

abort : 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생

error : 문서가 정확히 로딩되지 않았을 때 이벤트 발생

load : 문서 로딩이 끝나면 이벤트 발생

resize : 문서 화면 크기가 바뀌었을 때 이벤트 발생

scroll : 문서 화면이 스크롤되었을 때 이벤트 발생

unload : 문서에서 벗어날 때 이벤트 발생

📍폼 이벤트

blur : 폼 요소에 포커스를 잃었을 때 이벤틑 발생

⚡change : 목록이나 체크 상태 등이 변경되면 이벤트 발생. <input>, <select>, <textarea> 태그에서 사용⚡

focus : 폼 요소에서 포커스가 놓였을 때 이벤트 발생. <label>, <select>, <textarea>, <button> 태그에서 사용

reset : 폼이 리셋됐을 때 이벤트 발생

submit : submit 버튼을 클릭했을 때 이벤트 발생

📌이벤트 처리기 알아보기

<태그 on이벤트명 = "함수명">

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 20px auto;
        }
        #result{
            width: 500px;
            height: 400px;
            margin: 30px auto ;
            border: 1px solid black;
            border-radius: 20px;
        }
        ul{
            list-style: none;
            width: 500px;
            margin: 0 auto;
        }
        ul li{
            display: inline-block;
            width: 120px;
            border: 1px solid black;
            text-align: center;
        }
        a:link, a:visited{
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href = "#" onclick="changeBG('red')">Red</a></li>
        <li><a href = "#" onclick="changeBG('orange')">Orange</a></li>
        <li><a href = "#" onclick="changeBG('yellow')">Yellow</a></li>
    </ul>
    <div id = "result"></div>

    <script>
        function changeBG(color){
            var result = document.querySelector("#result");
            result.style.backgroundColor = color;
        }
    </script>
</body>
</html>

👁‍🗨Quiz

❗ 내 답

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .detail{
            width: 400px;
            height: 300px;
            line-height: 1.7em;
        }
        .over{
            position: absolute;
            top : 270px;
            left: 20px;
            background-color: rgba(255, 255, 255, 0.5);
        }
        #close{
            background-color: rgba(255, 255, 255, 0.5);
        }
        #open{
            background-color: rgba(255, 255, 255, 0.5);
        }
        #desc{
            display: none;
        }
    </style>
</head>
<body>
    <img src = "images/등심붓꽃.jpg" alt ="">
    <button class = "over" id = "open" onclick="showDetail()">상세 설명 보기</button>
    <div id = "desc" class="detail">
        <h4>등심붓꽃</h4>
        <p>
            북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화 식물이다. 
            길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고
             있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한
              개체들을 많이 만들어 냄으로써 번식한다.
        </p>
        <button id = "close" onclick="hideDetail()">상세 설명 닫기</button>
    </div>
    <script>
        function showDetail(){
            document.querySelector('#desc').style.display = "block";
            document.querySelector('#open').style.display = "none";
        }
        function hideDetail(){
            document.querySelector('#desc').style.display = "none";
            document.querySelector('#open').style.display = "block";
        }
    </script>
</body>
</html>

❗ 강사님 답

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>문제 6(등심붓꽃)</title>
        <style>
            #dsbgm{
                margin: 20px auto;
                width: 400px;
                border: 1px solid hotpink;
                padding: 20px;
            }
            #dsbg{
                position: relative;
                width: 400px;
                height: auto;
            }
            #open{
                position: absolute;
                left: 40px;
                bottom: 30px;
            }
            #desc{
                border: 1px solid red;
                background-color: yellow;
                display: none;
                width: 400px;
            }
        </style>
    </head>
    <body>
        <div id="dsbgm">
        <div id="dsbg">
        <img src="images/flower.jpg">
        <button class="over" id="open">상세 설명 보기</button>
        </div>
        <div id="desc" class="detail">
            <h4>등심붓꽃</h4>
            <p>북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다.
                길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고
                있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한 개체들을 많이 만들어 냄으로써 번식한다.
            </p>
            <button id="close">상세 설명 닫기</button>
        </div>
    </div>
    <script>
        document.querySelector("#open").onclick = showDetail;
        document.querySelector("#close").onclick = function (){
            document.querySelector("#desc").style.display = "none";
            document.querySelector("#open").style.display = "block";
        };

        function showDetail(){
            document.querySelector("#desc").style.display = "block";
            document.querySelector("#open").style.display = "none";
        }
        
    </script>
    </body>
</html>

📖DOM을 이용한 이벤트 처리기

DOM : 문서 객체 모델, <img>, document 태그 들

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .detail{
            width: 400px;
            height: 300px;
            line-height: 1.7em;
        }
        .over{
            position: absolute;
            top : 270px;
            left: 20px;
            background-color: rgba(255, 255, 255, 0.5);
        }
        #close{
            background-color: rgba(255, 255, 255, 0.5);
        }
        #open{
            background-color: rgba(255, 255, 255, 0.5);
        }
        #desc{
            display: none;
        }
    </style>
</head>
<body>
    <img src = "images/등심붓꽃.jpg" alt ="">
    <button class = "over" id = "open">상세 설명 보기</button>
    <div id = "desc" class="detail">
        <h4>등심붓꽃</h4>
        <p>
            북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화 식물이다. 
            길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고
             있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한
              개체들을 많이 만들어 냄으로써 번식한다.
        </p>
        <button id = "close">상세 설명 닫기</button>
    </div>
    <script>
        document.querySelector("#open").onclick = showDetail;
        document.querySelector("#close").onclick = hideDetail;
        function showDetail(){
            document.querySelector('#desc').style.display = "block";
            document.querySelector('#open').style.display = "none";
        }
        function hideDetail(){
            document.querySelector('#desc').style.display = "none";
            document.querySelector('#open').style.display = "block";
        }
    </script>
</body>
</html>

document.querySelector("#open").onclick = showDetail;
        document.querySelector("#close").onclick = hideDetail;

👉 이런 식으로 바꿔 쓸 수 있다

📖객체 알아보기

📌객체?

java와 같다
new 객체명

📖자바스크립트의 내장 객체

📌Array 객체

👉 java와 다르게 배열에 어떤 자료형이든 넣을 수 있다. 배열을 감쌀 때 { } 아니고 [ ] 이다.

📌Array 객체의 메서드

Array 객체의 메서드 정리

다음 날에 예제 하나씩 다 해볼 예정

gdhi

이전 포스트

웹 브라우저와 자바스크립트

다음 포스트

자바스크립트 기본과 함수, 표현식 그리고 이벤트 처리

JavaScript + JQuery

📌콘솔창에서 오류를 찾고 수정하기

📖자바스크립트 스타일 가이드

📌코딩 규칙이 왜 필요할까

📖변수 알아보기

📌변수 선언하기

📌나이 계산 프로그램 만들기

📖자료형

📌숫자형

📌문자열

📌논리형

📌undefined, null

📌배열

📌⭐자바스크립트의 데이터 유형 자동 변환⭐

📖연산자

📌산술연산자

📌할당 연산자

📌연결 연산자

📌비교 연산자

📌논리 연산자

📖조건문 알아보기

📌if, if~else

📌switch

👁‍🗨Quiz

📖반복문 알아보기

📌for

📌while

📌break, continue

👁‍🗨Quiz

🎲Quiz1

🎲Quiz2

🎲Quiz3

📖함수 알아보기

📖var를 사용한 변수의 특징

📌지역 변수(로컬 변수), 전역 변수(글로벌 변수)

📌var와 호이스팅

📌변수 재선언과 재할당

📖let과 const

📌let을 사용한 변수의 특징

📌const를 사용한 변수의 특징

📌자바스크립트 변수, 이렇게 사용하라

📖재사용할 수 있는 함수 만들기

📌매개변수, 인수, return

📌매개변수 기본값 지정하기

📖Quiz

⭐📖함수 표현식⭐

📌⚡익명 함수⚡

📌⚡⚡즉시 실행 함수⚡⚡

📌⚡⚡⚡화살표 함수⚡⚡⚡

📍매개변수가 0개

📍매개변수가 1개

📍매개변수가 2개 이상

📖이벤트와 이벤트 처리기

📌이벤트 알아보기

📍마우스 이벤트

📍키보드 이벤트

📍문서 로딩 이벤트

📍폼 이벤트

📌이벤트 처리기 알아보기

👁‍🗨Quiz

📖DOM을 이용한 이벤트 처리기

📖객체 알아보기

📌객체?

📖자바스크립트의 내장 객체

📌Array 객체

📌Array 객체의 메서드

웹 브라우저와 자바스크립트

객체그리고 DOM

0개의 댓글