-
1. 자바스크립트 기본 문법개발자 수업/JavaScript 2021. 11. 1. 17:43
1. 자바스크립트
1) 웹 브라우저에 내장되어 있는 스크립트(script) 언어
2) 객체지향 프로그래밍
3) 인터프리터(interpreter) 방식
4) 동적이면서 약한 타입 언어
5) 서버 측에서의 자바스크립트 프로그래밍
2. 변수
1) 저장되는 값에 따라 변수의 데이터 타입이 바뀜
2) 데이터 타입 : 숫자, 문자열, 불리언, 배열, 객체, 함수- 객체(Object) : 이름이 붙은 값들의 모음임
- 객체 프로퍼티는 객체명.프로퍼티명 접근할 수 있음//변수 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> //let x = "나는 '이순신'입니다."; //let x = "나는 "이순신"입니다."; let x = "나는 \"이순신\"입니다."; document.write(x); </script> </body> </html>//배열 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> let colors = ["빨강", "노랑", "파랑"]; document.write(colors); document.write("<br>"); document.write(colors[0]); document.write("<br>"); document.write(colors[1]); </script> </body> </html>3. 리터럴
1) 데이터의 값
2) 숫자 리터럴, 문자열 리터럴, 배열 리터럴, ...
- undefind : 변수는 선언되었으나 값이 할당된 적이 없는 변수에 접근하거나 존재하지 않는 객체 프로퍼티에 접근할 경우 반환되는 값
- null : 어떠한 객체도 나타내지 않는 특수한 값으로 사용
- NaN : Not a Number 숫자가 아님을 나타내는 특수한 숫자 값임 isNaN()
- Infinity : 무한대를 나타내는 특수한 숫자 값임 isInfinity()<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> //변수 선언 let a; document.write('a : ' + a + '<br>'); let b = 10; document.write('b : ' + b + '<br>'); document.write('typeof b: ' + typeof b + '<br>'); document.write('isNaN(b) : ' + isNaN(b) + '<br>'); //숫자가 아니냐? let obj = {}; //프로퍼티가 없는 빈 객체를 생성함 document.write('obj : ' + obj + '<br>'); document.write('obj.prop : ' + obj.prop + '<br>'); obj = null; //객체 참조를 제거함 document.write('obj : ' + obj + '<br>'); </script> </body> </html>
4. 연산자<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> let scores = {kor: 80, eng: 90, math: 100}; let total = scores.kor + scores.eng + scores.math; let avg = total / 3; document.write('합계 : ' + total); document.write("<br>"); document.write('평균 : ' + avg) </script> </body> </html>
5. 조건문
1) if문<!DOCTYPE html> <!-- if문을 이용하여 입력된 아이디가 'admin'인 경우에만 글쓰기 버튼을 보여준다. --> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div id="condition"></div> <script type="text/javascript"> let userId = prompt('아이디를 입력하세요 : '); if(userId == "admin") { document.getElementById("condition").innerHTML = "<button>글쓰기</button>"; } </script> </body> </html><!DOCTYPE html> <!-- if~else 구문을 이용하여 입력된 수가 짝수인지 홀수인지 판별하는 프로그램을 작성하시오 tip) parseInt() <출력 예시> 홀수입니다. 짝수입니다. 숫자만 입력해주세요. --> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> let x = parseInt(prompt("정수를 입력하세요: ")); if(!isNaN(x)) { if(x%2 == 0) { document.write("짝수입니다."); } else { document.write("홀수입니다."); } } else { document.write("숫자만 입력해주세요."); } </script> </body> </html><!DOCTYPE html> <!-- 글쓰기 버튼을 화면에 보여줄까요? 란 물음에 'y'를 입력하면 화면에 '글쓰기' 버튼을 보여주고 그렇지 않은 경우에는 '글수정' 버튼을 보여주세요. --> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div id="btn"></div> <script type="text/javascript"> let show = prompt("글쓰기 버튼을 화면에 보여줄까요?"); if(show == 'y') { document.getElementById("btn").innerHTML = "<input type='button' value='글쓰기'>"; } else { document.getElementById("btn").innerHTML = "<input type='button' value='글수정'>" } </script> </body> </html><!DOCTYPE html> <!-- if ~ else if ~ else 구문을 이용하여 점수에 따른 학점을 계산하는 프로그램을 구현하시오 점수 95~100 90~94 85~89 80~84 75~79 70~74 65~69 60~64 0~59 학점 A+ A B+ B C+ C D+ D F * 출력예시 점수가 잘못 입력되었습니다. 점수 : 95, 등급 : A+ 숫자를 입력하세요. --> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> let score = parseInt(prompt("점수를 입력하세요")); if(!isNaN(score)) { if(score<0 || score>100) { document.write("점수가 잘못 입력되었습니다.") } else if(score>=95) { let grade = "A+" document.write("점수 : " + score + ", 등급 : " + grade); } else if(score>=90) { let grade = "A" document.write("점수 : " + score + ", 등급 : " + grade); } else if(score>=85) { let grade = "B+" document.write("점수 : " + score + ", 등급 : " + grade); } else if(score>=80) { let grade = "B" document.write("점수 : " + score + ", 등급 : " + grade); } else if(score>=75) { let grade = "C+" document.write("점수 : " + score + ", 등급 : " + grade); } else if(score>=70) { let grade = "C" document.write("점수 : " + score + ", 등급 : " + grade); } else if(score>=65) { let grade = "D+" document.write("점수 : " + score + ", 등급 : " + grade); } else if(score>=60) { let grade = "D" document.write("점수 : " + score + ", 등급 : " + grade); } else { let grade = "F" document.write("점수 : " + score + ", 등급 : " + grade); } } else { document.write("숫자를 입력하세요.") } </script> </body> </html><!DOCTYPE html> <!-- if ~ else if ~ else 구문을 이용하여 월을 입력받아 계절을 표시해 주는 프로그램을 작성하시오 월 3/4/5월 6/7/8월 9/10/11월 12/1/2월 계절 봄 여름 가을 겨울 * 출력예시 월에 해당하는 숫자를 입력하세요. 월이 잘못 입력되었습니다. 3월은 봄입니다. --> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> let month = parseInt(prompt("월을 입력하세요.")) if(!isNaN(month)) { if(month < 1 || month > 12) { document.write("월이 잘못 입력되었습니다.") } else if(month >= 3 && month <= 5) { let season = "봄"; document.write(month + "월은 " + season + "입니다."); } else if(month >= 6 && month <= 8) { let season = "여름"; document.write(month + "월은 " + season + "입니다."); } else if(month >= 9 && month <= 11) { let season = "가을"; document.write(month + "월은 " + season + "입니다."); } else { let season = "겨울"; document.write(month + "월은 " + season + "입니다."); } } else { document.write("월에 해당하는 숫자를 입력하세요.") } </script> </body> </html><!DOCTYPE html> <!-- 영문 소문자가 모음인지 자음인지를 판별하는 프로그램을 구현하시오. * 출력예시 영문 소문자를 입력하세요. a 은(는) 모음입니다. b 은(는) 자음입니다. --> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div id="eng"></div> <script type="text/javascript"> let x = prompt("영문 소문자를 입력하세요."); if(x >= 'a' && x <= 'z') { if(x == 'a' || x == 'e' || x == 'i' || x == 'o' || x == 'u') { document.write(x + "은(는) 모음입니다."); } else { document.write(x + "은(는) 자음입니다."); } } else { document.write("영문 소문자를 입력하세요.") } </script> </body> </html><!DOCTYPE html> <!-- * 키와 몸무게를 입력받아 다이어트 유무를 판정하는 프로그램을 구현하시오 - 판정 기준 std = (키 - 100) * 0.9 - 출력 예시 몸무게가 std보다 큰 경우 ==> '다이어트가 필요할 수 있습니다.' 그렇지 않은 경우 ==> '표준 체형입니다.' - Number() : 무조건 숫자로 이루어진 것만 숫자로 리턴함 --> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> let height; //키 let weight; //몸무게 let standard; //(표준 체형) 판단 기준 height = Number(prompt("키를 입력하세요.")); weight = Number(prompt("몸무게를 입력하세요.")); standard = (height - 100) * 0.9; document.write("키 : " + height + "cm<br>"); document.write("몸무게 : " + weight + "kg<br>"); if(weight > standard) { document.write("다이어트가 필요할 수 있습니다."); } else { document.write("표준 체형입니다."); } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> function add(num) { if(num < 0) { return false; //함수 종료 } let num2 = num + 10; console.log(num2); } add(7); add(0); add(99); add(-2); </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> function whatTime(time) { if(time == 24 || time >= 0 && time < 6) { console.log('새벽'); } else if(time >= 6 && time < 12) { console.log('아침'); } else if(time >= 12 && time < 18) { console.log('오후'); } else if(time >= 18 && time < 24) { console.log('저녁'); } else { console.log('블랙홀'); } } whatTime(0); whatTime(4); whatTime(8); whatTime(15); whatTime(22); whatTime(26); whatTime('ezenac'); </script> </body> </html><!DOCTYPE html> <!-- * 조건부 연산자 - 3항 연산자 - 세 개의 피연산 함수를 취할 수 있는 유일한 자바스크립트 연산자 - if 조건문의 축약형으로 자주 사용됨 - 조건 ? 표현식1 : 표현식2 - 조건이 true면 표현식1을 실행하고 조건이 false면 표현식2를 실행함 - 조건1 ? (조건2 ? 표현식1 : 표현식2) : (조건3 ? 표현식 3 : 표현식4) - 하나의 표현식 내부에서 새로운 '3항 연산'을 할 수 있음 - 다중 3항 연산 --> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> let price = 3500000; console.log('Apple MacBook Pro ' + (price > 3000000 ? 'expensive.' : 'cheap.')); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <section id="wrap"> <article class="box1">Happy</article> <article class="box2">New</article> <article class="box3">Year</article> </section> <script type="text/javascript" src="lab04.js"></script> </body> </html>/* 요소를 1개만 선택하기 */ const article = document.querySelector("#wrap"); console.log(article); /* 클래스명이 box1인 요소 선택하기 */ const box1 = document.querySelector("#wrap .box1"); console.log(box1); /* 요소를 여러 개 선택하기 - for of문 사용 */ const items = document.querySelectorAll("#wrap article"); for(let item of items) { console.log(item); } for(let i=0; i<items.length; i++) { console.log(items[i]); }
2) switch문
- if문과 유사하지만 값이 명확한 경우에 많이 사용함<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> function price(fruit) { switch (fruit) { case 'Apple': console.log('$1000'); break; case 'Banana': console.log('$1500'); break; case 'Orange': console.log('$2000'); break; default: console.log('Happy New Year'); } } function price2(fruit) { if(fruit === 'Apple') { console.log('$1000'); } else if(fruit === 'Banana') { console.log('$1500'); } else if(fruit === 'Orange') { console.log('$2000'); } else { console.log('Happy New Year'); } } price2('Apple'); price2('Orange'); price2("2022"); </script> </body> </html>
6. 반복문
1) while문<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> let x = 1; while(x<=5) { document.write("좋은 하루 되세요 <br>"); x++; } </script> </body> </html><!DOCTYPE html> <!-- 1~100의 3의 배수의 합계 : 1683 --> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> let x = 1; let sum = 0; while(x <= 100) { if(x%3 == 0) { sum += x; } x++; } document.write('1~100의 3의 배수의 합계 : ' + sum); </script> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Insert title here</title> </head> <body> <div id="result"></div> <script type="text/javascript"> let contents = ""; let n = 1; while(n<=4) { contents += "<img src='../images/fish1.jpg'>"; n++; } document.getElementById("result").innerHTML = contents; </script> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Insert title here</title> </head> <body> <div id="result"></div> <script type="text/javascript"> let contents = ""; let n = 1; while(n<=6) { if(n%2 == 1) { contents += "<img src='../images/image1.png'>"; } else { contents += "<img src='../images/image2.png'>"; } n++; } document.getElementById("result").innerHTML = contents; </script> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Insert title here</title> <style type="text/css"> table {border-collapse: collapse;} th, td {border: solid 1px gray;} th {width: 120px; padding: 5px; background-color: #eeeeee;} td {padding: 5px; text-align: center;} </style> </head> <body> <div id="result"></div> <script type="text/javascript"> let city = ["서울", "부산", "인천", "대전", "광주"]; let low_temp = [7, 8, 7, 8, 8]; let high_temp = [18, 20, 17, 19, 20]; let contents = ""; contents += "<h3>지역별 기온과 일교차</h3>"; contents += "<table>"; contents += "<tr><th>지역</th><th>최저기온</th><th>최고기온</th><th>일교차</th></tr>"; let i = 0; while(i<=4) { let diff = high_temp[i] - low_temp[i]; contents += "<tr>"; contents += "<td>" + city[i] + "</td>"; contents += "<td>" + low_temp[i] + "</td>"; contents += "<td>" + high_temp[i] + "</td>"; contents += "<td>" + diff + "</td>"; contents += "</tr>"; i++; } contents += "</table>"; document.getElementById("result").innerHTML = contents; </script> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> let color = ["red", "green", "blue", "yellow", "skyblue"]; for(let i=0; i<color.length; i++) { document.write("<span style='color: " + color[i] + " '>안녕하세요</span>"); } </script> </body> </html>
2) for문
- for(시작조건; 종료조건; 변화조건) {
//
}<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Insert title here</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <ul class="list"> <li></li> <li></li> <li></li> </ul> <!-- JavaScript와 jQuery --> <script type="text/javascript"> let list = document.querySelectorAll('.list li'); /* for(let i=0; i<list.length; i++) { list[i].textContent = i + 1; } */ $('.list li').each(function(i){ $(this).text(i + 1); }); </script> </body> </html>
7. 함수
Document 객체의 prompt(), alert(), write(), Number(), parseInt() 등<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Insert title here</title> <script type="text/javascript"> function hello(){ let name = "이순신"; alert(name + "님 안녕하세요."); } function hello2(name){ alert(name + "님 안녕하세요."); } </script> </head> <body> <button onclick="hello()">인사하기</button><br> <button onclick="hello2('이도')">인사하기2</button> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Insert title here</title> <script type="text/javascript"> function getArea(r) { let result = r * r * 3.14; return result; } function getLength(r) { let result = 2 * r * 3.14; return result; } let radious = 30; //반지름 let area; //원의 넓이 let length; //원의 둘레 area = getArea(radious); length = getLength(radious); document.write("반지름 : " + radious + "<br>"); document.write("원의 넓이 : " + area + "<br>"); document.write("원의 둘레 : " + length); </script> </head> <body> </body> </html>