JavaScript
자바스크립트는 객체 기반의 클라이언트 스크립트 언어로 웹 페이지에서 동적으로 만드는데 사용하는 언어입니다.
- 자바스크립트는 인터프린터 언어입니다.
- 자바스크립트 코드는 작성한 순서대로 구문을 분석합니다. 만약 코드에 문제가 생기면 에러가 발생한 다음 줄 부터는 구문을 분석하지 않습니다
- 자바스크립트는 클라이언트 스크립트 언어입니다.
- 자바스크립트는 서버에서 실행되지 않고, 사용자 컴퓨터에서 실행되는 클라이언트 언어 서버에서 운영이 되는 언어는 PHP, ASP, JSP 언어가 있습니다.
- 자바스크립트는 객체 기반의 언어입니다.
- C++와 JAVA와 같이 클래스를 이용하여 객체를 생성하는 클래스 기반 객체 지향 언어입니다. 자바스크립트는 클래스가 아닌 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어업니다.
- 자바스크립트는 다양한 라이브러리가 지원되는 언어입니다
- 자바스크립트를 이용한 라이브러리에는 (jQuery), (Angular).js, (React).js, (Node).js, Vue.js, Three.js
자바스크립트 기초
자바스크립트 주석
자바스크립트 주석은 일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용합니다.
/* */ : 여려 줄에 주석을 적용하는 경우
// : 한 줄에 주석을 저용하는 경우
1. 자바스크립트 대문자 소문자
자바스크립트는 대문자와 소문자를 구별합니다.
배열 객체(기능/옵션) 생성 : New Array() : (X) 배열 객체(기능/옵션) 생성 : new Array() : (O)
2. 세미콜론
코드 한 줄을 작성한 후에는 세미콜론(;)을 쓰는 것이 좋습니다. 세미콜론을 쓰지 않으면 다음 예제처럼 한 줄에 2개의 코드를 자ㅑㄱ성할 경우 오류가 발생합니다.
document.write("hi") document.write("bye") (X) document.write("hi") document.write("bye"); (O)
3. 가독성
하지만 코드를 작성할 때는 한 줄에 한 문장만 작성하는 것이 가독성을 위해 좋습니다.
4. 큰따옴표(" ") 작은따옴표(' ')
문자형 데이터를 작성할 때는 큰따옴표(" ") 작은따옴표(' ')의 겹침 오류를 주의해야 합니다.
큰따옴표 겹침 오류
document.write("책에 "자바스크립트는 대소문자를 구분해야 합니다"라고 나와 있다.");
잘된 예
document.write('책에 "자바스크립트는 대소문자를 구분해야 합니다"라고 나와있다.');
document.write("책에 /"자바스크립트는 대소문자를 구분해야 합니다"라고 나와 있다.");
5. 짝
코드를 작성할 때 중괄호{} 또는 소괄호()의 짝이 맞아야 합니다.
document.write("welcome!"; (X)
document.write("welcome!"); (O)
자바스크립트 사용방법
자바스크립트 사용하는 방법은 외부파일, 스크립트 태그, 태그에 직접 기술하는 방법이 있습니다.
자바스크립트 사용방법 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript</title>
<!-- 외부 파일로 로드하는 방법 -->
<script src="javascript.js"></script>
<!-- 스크립트에 기술하는 방법-->
<script>
document.write("javascript");
</script>
</head>
<body>
<!-- 태그에 직접 기술하는 방법 -->
<a href="#" onclick="alert('javascript')">클릭</a>
</body>
</html>
자바스크립트 출력방법
자바스크립트 출력하는 방법은 내장 객체(기본적으로 있는 기능) 콘솔(console), document.write(), alert()을 이용하는 방법이 있습니다.
자바스크립트 사용방법 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
//콘솔 로그를 이용하는 방법
console.log("01. 자바스크립트가 출력되었습니다.")
//웹 문서에 출력하는 방법
document.write("02. 자바스크립트가 출력되었습니다.")
//경고창을 이용하여 출력하는 방법
alert("03. 자바스크립트가 출력되었습니다.")
</script>
</head>
<body>
</body>
</html>
변수
변수(Variables)는 변하는 하나의 데이터 값을 저장하는 저장소입니다.
변수명
키워드 : 자바스크립트에서 사용하는 단어, 즉 자바스크립트 문법을 규정짓기 위해 자바스크립트에서 사용하는 특수한 키워드입니다.
식별자 : 사용자가 임의로 사용하는 단어, 즉 변수나 함수를 사용할 때 정의하는 키워드입니다.
시별자를 만드는 규칙
- 사용자가 사용할 수 있는 문자 : 알파벳 (a~z, A~Z), 숫자 (0~9), 특수기호 ('-', '$')
- 첫 글자는 숫자를 사용할 수 없습니다.
- 공백을 사용할 수 없습니다. : 밑줄(_) 사용가능 하이픈(-) 사용안 됨
- 특수기호는 사용할 수 없습니다. : 달러($) 사용 가능
- 키워드를 사용할 수 없습니다.
단어를 조합할 때 규칙
- 언더스코어 노테이션(스네이크 표기법) : color_top와 같이 중간에 '_'를 사용합니다.
- 캐멀 노테이션 : colorTop와 같이 두번 째 단어의 첫 글자를 대문자로 사용합니다.
- 파스칼 노테이션 : ColorTop와 같이 모든 단어의 첫 글자를 대문자로 사용합니다.
변수 선언
var(div) 변수명 = 값; or let(section) 변수명 = 값
변수 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript</title>
<script>
//변수 선언
var x = 100; //변수 x에 숫자 100을 저장
var y = 200; //변수 y에 숫자 200을 저장
var z = "자바스크립트"; //변수 z에 문자 "자바스크립트"를 저장
document.write(x);
document.write("<br>");
document.write(y);
document.write("<br>");
document.write(z);
document.write("<br><br>");
//변수 선언
let a =100;
let b =200;
let c ="자바스크립트";
document.write(a);
document.write("<br>");
document.write(b);
document.write("<br>");
document.write(c);
document.write("<br><br>");
//변수 변경
x = 300; //변수 x의 값이 100에서 300으로 변경
y = 400; //변수 y의 값을 200에서 400으로 변경
z = "javascript"; //변수 z의 값을 "자바스크립트"에서 "javascript" 변경
document.write(x);
document.write("<br>");
document.write(y);
document.write("<br>");
document.write(z);
document.write("<br>");
</script>
</head>
<body>
</body>
</html>
변수 유형(자료형)
| 변수의유형 | 설명 |
|---|---|
| 숫자(Number) | 숫자를 사용할 수 있습니다 |
| 문자(String)) | 문자를 사용할 수 있습니다. 큰따옴표(") 또는 작은 따옴표를 (') |
| 논리형(Boolean))) | 참(true)과 거짓(false)을 사용할 수 있습니다. |
| 특수값(null) | 아무런 값이 없을 경우로 표현합니다 |
| 특수값(undefined) | 정의되지 않은 상태를 표현합니다. |
| 심벌(symbol) | 자기 자신을 제외한 유일한 값일 때 표현합니다. |
| 객체(object)) | 객체 형태도 사용 가능합니다. |
| 함수(function)) | 함수 형태도 사용 가능합니다 |
변수 유형 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript</title>
<script>
let x1 = 100; //변수에 숫자를 저장
let x2 = "100"; //변수에 문자를 저장
let x3 = "javascript"; //변수에 문자를 저장
let x4 = true; //변수에 논리값을 저장
let x5 = false; //변수에 논리값을 저장
let x6; //특수값
let x7 = undefined; //특수값
let x8 = function(){}; //변수에 함수를 저장
let x9 = {}; //변수에 객체를 저장
let x0 = Symbol(); //변수에 심볼를 저장
document.write(typeof(x1),"<br>");
document.write(typeof(x2),"<br>");
document.write(typeof(x3),"<br>");
document.write(typeof(x4),"<br>");
document.write(typeof(x5),"<br>");
document.write(typeof(x6),"<br>");
document.write(typeof(x7),"<br>");
document.write(typeof(x8),"<br>");
document.write(typeof(x9),"<br>");
document.write(typeof(x0),"<br>");
</script>
</head>
<body>
</body>
</html>
배열
배열은 여러개의 데이터를 순차적으로 저장하는 저장소 입니다.
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript</title>
<script>
//변수 x = 100 변수 y = 200을 저장한 다음에 출력해주세요!
let x =100;
let y =200;
document.write (x, "<br>")
document.write (y, "<br><br>");
//배열을 선언하고 데이터 입력
const arr1 = new Array();
arr1[0] = 100; //첫번째 배열 저장소에 100을 저장
arr1[1] = 200; //두번째 배열 저장소에 200을 저장
document.write (arr1[0], "<br>");
document.write (arr1[1], "<br><br>");
//배열을 선언하고 동시에 데이터 입력
const arr2 = new Array(100,200);
document.write (arr2[0], "<br>");
document.write (arr2[1], "<br><br>");
//배열을 선언하지 않고 데이터를 입력
const arr3 = [ ]
arr3[0] = 100;
arr3[1] = 200;
document.write (arr3[0], "<br>" );
document.write (arr3[1], "<br><br>" );
//배열을 선언하지 않고 동시에 데이터를 입력
const arr4 = [100,200,300];
document.write (arr4[0], "<br>" );
document.write (arr4[1], "<br>" );
document.write (arr4[2], "<br><br>" );
//배열의 크기 구하기
const arr5 = [100,200,300,400,500]
document.write(arr5.length)
document.write("<br><br>" )
//배열을 가져오기
const arr6 = [100,200,300,400,500,600,700,800];
// 반복문
for(let i=0; i<arr6.length; i++){
document.write(arr6[i]);
}
document.write("<br><br>" )
//배열의 합 구하기
const arr7 = [100,200,300,400,500];
let sum =0;
for(let i =0; i<arr7.length; i++){
sum = sum + arr7[i];
}
document.write(sum)
document.write("<br><br>" )
</script>
</head>
<body>
</body>
</html>
연산자
산술연산자
| 연산자 | 예시 | 설명 |
|---|---|---|
| + | x + y | 더하기 |
| - | x - y | 빼기 |
| * | x * y | 곱하기 |
| / | x / y | 나누기 |
| % | x % y | 나머지 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript06</title>
<script>
var num1 = 15;
var num2 = 2;
var result; result = num1 + num2;
document.write(result, "<br>"); // 17
result = num1 - num2;
document.write(result, "<br>"); // 13
result = num1 * num2;
document.write(result, "<br>"); //30
result = num1 / num2;
document.write(result, "<br>"); //7.5
result = num1 % num2;
document.write(result, "<br>"); //1
</script>
</head>
<body>
</body>
</html>대입연산자
| 연산자 | 예시 | 설명 |
|---|---|---|
| += | x+=10 | x = x + 10 |
| -= | x-=10 | x = x - 10 |
| *= | x *= y | x = x * 10 |
| /= | x /= y | x = x / 10 |
| %= | x %= y | x = x % 10 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript07-대입 연산자</title>
<script>
var num1 = 10;
var num2 = 3;
num1 += num2; // num1 = num1(10) + num2(3);
document.write(num1, "<br>"); //13
num1 -= num2; // num1 = num1(13) - num2(3);
document.write(num1, "<br>"); // 10
num1 *= num2; // num1 = num1(10) * num2(3);
document.write(num1, "<br>"); //30
num1 %= num2; // num1 = num1(30) % num2(3);
document.write(num1,"<br>"); //0
</script>
</head>
<body>
</body>
</html>
증감연산자
| 연산자 | 예시 | 설명 |
|---|---|---|
| ++ | x++ 또는 ++x | x = x + 1 |
| -- | x-- 또는 --x | x = x - 1 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var num1 = 10;
var num2 = 20;
var result;
num1--;
document.write(num1, "<br>"); //9
num1++; // 10
document.write(num1, "<br>");
result = num2++; //result: 20, num2:21
document.write(result, "<br>");
result = ++num2; //result: 22, num2: 22
document.write(result, "<br>");
</script>
</head>
<body>
</body>
</html>
비교연산자
| 연산자 | 예시 | 설명 |
|---|---|---|
| == | x == y | 좌변과 우변이 같다 |
| === | x === y | 좌변과 우변이 같다. 데이터형도 같다. |
| != | x != y | 좌변과 우변이 다르다. |
| !== | x !== y | 좌변과 우변이 다르다. 데이터형도 다르다. |
| > | x > y | 좌변이 우변보다 크다 |
| < | x < y | 좌변이 우변보다 작다 |
| >= | x >= y | 좌변이 우변보다 크거나 같다 |
| <= | x <= y | 좌변이 우변보다 작거나 같다 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript08-비교연산자</title>
<script>
var a = 10;
var b = 20;
var c = 10;
var f = "20";
var result;
result = a > b; // false
document.write(result, "<br>");
result = a < b; //true
document.write(result, "<br>");
result = a <= b; //true
document.write(result, "<br>");
result = b == f; //true
document.write(result, "<br>");
result = a != b; //true
document.write(result, "<br>");
result = b === f; //false
document.write(result, "<br>");
</script>
</head>
<body>
</body>
</html>
논리연산자
| 연산자 | 예시 | 설명 |
|---|---|---|
| && | x && y | 둘다 true인 경우에 true를 반환합니다.[AND] |
| || | x || y | 둘 중의 하나 이상이 true인 경우 true를 반환합니다.[OR] |
| ! | !x | 반대 값을 반환합니다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript10-논리 연산자</title>
<script>
var a=10;
var b=20;
var m=30;
var n=40;
var result;
result = a > b || b >= m || m > n; // false || false || false
document.write(result, "<br>"); // false
result = a > b || b >= m || m <= n; // false || false || true
document.write(result, "<br>"); //true
result = a <= b && b >= m && m <= n; //true && false && true
document.write(result, "<br>"); //false
result = a <= b && b <= m && m<= n; //true && true && true
document.write(result, "<br>"); //true
result= !(a > b); //false를 계산
document.write(result, "<br>"); //true
</script>
</head>
<body>
</body>
</html>
조건문
조건문은 조건식의 값이 참(true)인지, 거짓(false) 인지에 따라 자바스크립트 코드를 제어합니다.
if문
if(조건식){
//실행코드 }
VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
//변수 num에 숫자 100을 지정하고 출력하시오
let num = 100;
document.write(num);
document.write("<br><br>");
//변수 num2에 값이 숫자 200보다 크면 출력하시요.
let num2 = 201;
if(num2 > 200){
document.write(num2);
document.write("<br><br>");
}
// 조건 갑이 true 무조건 실행
if(true){
document.write(num2);
document.write("<br><br>");
}
// if문 약식
if(true) document.write(num2);
document.write("<br><br>");
//짝수
let num3 = prompt("숫자를 입력해주세요!")
if( num3 % 2 === 0 ){
document.write("당신이 입력한 숫자는 짝수 입니다.");
}
document.write("<br><br>");
//방문자 이름
let userName = prompt("당신의 이름은 무엇입니까?","")
if(userName){
document.write(userName+"님 반갑습니다. 방문을 환영합니다.")
}
</script>
</head>
<body>
</body>
</html>
if~else문
if(조건식){
//참(true)실행코드
} else {
//거짓(false))실행코드
if~else문
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
let num = 200;
if( num > 100){
document.write("숫자가 100보다 큽니다.<br><br>")
} else{
document.write("숫자가 100보다 작습니다.<br><br>")
}
//짝수 홀수 구하기
let num2 = prompt("당신이 좋아하는 숫자는 무엇입니까?")
if( num2 % 2 == 0) {
document.write("당신이 좋아하는 숫자는 짝수입니다.<br><br>")
} else {
document.write("당신이 좋아하는 숫자는 홀수입니다.<br><br>")
}
//아이디 비밀번호 구분하기
let userID = prompt("아이디를 입력하세요");
let userPW = prompt("비밀번호를 입력하세요");
if( userID == "webstoryboy" && userPW == "1245"){
document.write("환영합니다. <br><br>");
} else {
document.write("아이디 또는 비밀번호가 틀렸습니다 <br><br>");
}
//확인하기
let result = confirm("정말로 회원을 탈퇴하시겠습니까?")
if(result){
document.write("탈퇴 처리되었습니다.")
}else {
document.write("탈퇴 취소되었습니다.")
}
</script>
</head>
<body>
</body>
</html>
다중 if문
if(조건식){
//참 일때 실행코드
} else if(조건식2){
//앞 조건이 거짓일 때 실행코드
} else if(조건식3){
//앞 조건이 거짓일 때 실행코드
} else if(조건식4){
//앞 조건이 거짓일 때 실행코드
}
........
} else {
//앞의 모든 조건이 거짓일 때 실행코드
}
다중 if문
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
let food = prompt("다음 중 가장 먹고 싶은 음식은? 1.카레, 2.레몬 3.팝콘, 4.커피, 5초코릿")
if(food == "카레"){
document.write("매콤한 음식을 고른 당신은 사람에게 첫눈에 반하기 보다는 서서히 사랑에 빠지는 스타일입니다.")
} else if (food == "레몬"){
document.write("새콤한 과일을 고른 당신은 쉽게 마음을 열고 또 쉽게 사람을 믿는 스타일입니다.")
} else if (food == "팝콘"){
document.write("짭짤하고 고소한 팝콘을 고른 당신은 오래 알고 지낸 사람들에게서보이는 으외에 모습에 약한 스타일입니다.")
} else if (food == "커피"){
document.write("쌉싸름한 커피를 고른 당신은 사랑에 누구보다 적극적인 스타일입니다.")
} else if (food == "초코릿"){
document.write("달콤한 초콜릿을 선택한 당신은 금방 사랑에 빠지는 스타일입니다.")
} else {
document.write("해달 과일이 없습니다.")
}
</script>
</head>
<body>
</body>
</html>
다중 if문2
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript 숙제</title>
<script>
var mon = prompt("현재는 몇 월입니까?", "0");
if(mon >= 9 && mon <= 11){ //9 ~ 11
document.write("독서의 계절 가을이네요!!");
}else if(mon >= 6 && mon <= 8){ //6 ~ 8
document.write("여행가기 좋은 여름이네요!!");
}else if(mon >= 3 && mon <= 5){ //3 ~ 5
document.write("햇살 가득한 봄이네요!!");
}else{ // 나머지 입력
document.write("스키의 계절 겨울이네요!!");
}
</script>
</head>
<body>
</body>
</html>
중첩 if문
if(조건식1){
if(조건식2){
//실행문
}
}
다중 if문
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
let id ="iuu0304";
let pw = "1234";
let useId = prompt("아이디는 무엇입니까?");
let userPw = prompt("비밀번호가 무엇십니까?");
if(id == useId){
if(pw ==userPw ){
document.write(useId+"님 반갑습니다!")
} else {
alert("비밀번호가일치하지 않습니다.");
location.reload();
}
}else {
alert("아이디가 일치하지 않습니다.");
location.reload();
}
</script>
</head>
<body>
</body>
</html>
witch문
var 변수 = 초깃값;
switch( 조건을 체크할 변수 ){
case 값1:
//조건에 체크할 변수가 값1을 가지면 실행
break;
case 값2:
//조건에 체크할 변수가 값1을 가지면 실행
break;
case 값3:
//조건에 체크할 변수가 값1을 가지면 실행
break;
...........................
default:
//해당되는 값을 가지고 있지 않을 경우에 실행
break;
}
witch문
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
let first = prompt("제일 먼저 잡고 싶은 물건은? 1.과일, 2.떡, 3.수정구슬, 4.현찰, 5.반지");
switch(first){
case "과일" :
document.write("생각이 많고 진지해 보이는 이성 타입입니다.")
break;
case "떡" :
document.write("무드에 약하고 화술과 매너가 좋은 이성 타입입니다.")
break;
case "수정구슬" :
document.write("정열적이고 열중하는 이성 타입입니다.")
break;
case "현찰" :
document.write("부드럽고 따듯한 이성 타입입니다.")
break;
case "반지" :
document.write("자기를 보호해 줄 수 있는 이성 타입입니다.")
break;
default :
document.write("잘못 선택했습니다.")
break;
}
</script>
</head>
<body>
</body>
</html>
witch문2
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
var mon = prompt("현재는 몇 월입니까?");
switch(mon) {
case "11": case "10": case "9":
document.write("독서의 계절 가을이네요!!"); break;
case "8": case "7": case "6" :
document.write("여행가기 좋은 여름이네요!!"); break;
case "5": case "4": case "3" :
document.write("햇살 가득한 봄이네요!!"); break;
default : document.write("지구에 살지 않네요!!"); break;
};
</script>
</head>
<body>
</body>
</html>
witch문3
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
let site = prompt("네이버, 다음, 네이트, 구긍 중 즐겨 사용하는 포털 사이트는?")
let url;
switch(site){
case "네이버" : url = "https://www.naver.com/";
break;
case "다음" : url = "https://www.daum.net/";
break;
case "네이트" : url = "https://www.nate.com/";
break;
case "구글" : url = "https://www.google.co.kr/";
break;
default : document.write("그런 사이트 없습니다")
break;
}
//alert(url)
if(url) location.href = url
</script>
</head>
<body>
</body>
</html>
witch문4
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
let site = prompt("네이버, 다음, 네이트, 구글 중 즐겨 사용하는 포털 사이트는?")
let url;
if(site == "네이버"){
url = "https://www.naver.com/";
} else if(site == "다음"){
url = "https://www.daum.net/";
} else if(site == "네이트"){
url = "https://www.nate.com/";
} else if(site == "구글"){
url = "https://www.google.co.kr/";
} else {
document.write("그런사이트 없어요~")
}
//alert(url)
if(url) location.href = url
</script>
</head>
<body>
</body>
</html>
조건부 연산자(삼항 연산자)
(조건) ? (참일 때 실행코드) : (거짓일 때 실행코드)
삼항 연산자
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
//사용자가 숫자를 넣으면 짝수인지 홀수인지 구분하는 스크립트를 작성하시오!
let num = prompt("숫자를 입력하세요")
if(num % 2 == 0){
document.write("짝수")
}else{
document.write("홀수")
}
//삼항 연산자
( num % 2 == 0) ? document.write("짝수") : document.write("홀수")
</script>
</head>
<body>
</body>
</html>
반복문
반복문을 사용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있습니다.
while문
var 변수 = 초깃값;
while(조건식){
실행문;
증감식
}
while문
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
//100보다 작은 수 출력하기
let num = 0; //초깃값 설정
while( num < 100 ){ //조건식 설정
num++;
document.write(num,"<br>");
}
// 100보다 작은 수(짝수만) 출력하기
let num2 = 0;
while( num2 < 100 ){
if( num2 % 2 == 0){
document.write(num2,"<br>");
}
num2++;
}
//100보다 작은 수(4의배수) 출력하기
let num3 = 0;
while( num3 <= 100 ){
if( num3 % 4 == 0){
document.write(num3,"<br>");
}
num3++;
}
// 100보다 작은 수(4의 배수와 6의배수)출력하기
let num4 = 1;
while( num4 <= 100){
if(num4 % 4 == 0 || num4 % 4 == 0){
document.write(num4)
}
num4++;
}
//1~100까지 짝수는 파란색, 홀수는 빨간색으로 출력하세요~
let num5 = 1;
while(num5 <= 100){
if(num5 % 2 == 0){
document.write( "<span style='color:blue'>"+num5+"</span>" )
} else{
document.write("<span style='color:red'>"+num5+"</span>")
}
num5++
}
</script>
</head>
<body>
</body>
</html>
do~while문
while문은 조건을 검사하고 코드를 반보적으로 실행합니다. 첫 조건이 거짓이라면 코드를 실행하지 않을 수 있습니다. 하지만 do while문은 조건이 참, 거짓과 상관없이 최소한 한 번은 실행합니다
var 변수 = 초깃값;
do{
실행문;
증감식;
} while(조건식)
do~while문
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
//while 문을 이용해서 1~20까지 출력하세요~
let num = 1;
while(num <= 20){
document.write(num);
num++;
}
document.write("<br>");
//do while 문을 이용해서 1~20까지 출력하세요~
let num2 = 0;
do {
num2++;
document.write(num2);
} while(num2 <=19);
</script>
</head>
<body>
</body>
</html>
for 문
for(초기값; 조건식; 증감식){
//반복 실행코드
}
for 문
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
//브라우저에 1~10까지 출력해주세요~
document.write(1);
document.write(2);
document.write(3);
document.write(4);
document.write(5);
document.write(6);
document.write(7);
document.write(8);
document.write(9);
document.write(10);
document.write("<br><br>");
//for문을 이용해서 1~100까지 출력~
for(let i=1; i<=100; i++ ){
document.write(i, ",")
}
document.write("<br><br>");
//for문을 이용해서 1~100까지(짝수만) 출력~
for(let i=1; i<=100; i++ ){
if(i % 2 ==0)
document.write(i, ",")
}
document.write("<br><br>");
// for문을 이용해서 5의 배수 빨간색, 7의 배수일 때는 초록색,
//5와 7의 배수는 아쿠아색으로 출력하세요~
for(let i =1; i <=100; i++){
if( i % 5 ==0 && i % 7 !=0){
document.write("<span style='color:red'>"+i+"</span>");
} else if ( i % 7 == 0 && i % 5 != 0){
document.write("<span style='color:green'>"+i+"</span>");
} else if ( i % 7 == 0 && i % 5 == 0){
document.write("<span style='color:blue'>"+i+"</span>");
}
}
</script>
</head>
<body>
</body>
</html>
for in 문
for(초기값; 조건식; 증감식){
//반복 실행코드
}
중첩for 문
for(var i=0; i<100li++){
for(var j = 0; j<100; j++){
//반복코드
}
}
중첩for 문1
VIEW<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//for문을 이용해서 1부터 10까지 출력해주세요~
for(let i=1; i <= 10; i++){
document.write(i)
}
document.write("<br>");
for(let i=1; i <= 10; i++){
for(let j=1; j <= 10; j++){
document.write(i +","+j,"<br>");
}
}
</script>
</head>
<body>
</body>
</html>
중첩for 문2
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
//구구단
// i * j = sum
for (let i =2; i <=9; i++){
for(let j =1; j <=9; j++){
let sum = i * j;
document.write(i + "*" +j +"=" + sum)
document.write("<br>")
}
}
</script>
</head>
<body>
</body>
</html>
중첩for 문3
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
let table = "<table border='1'>";
let num = "1";
for(let i = 1; i<=50; i++){
table += "<tr>";
for(let j = 1; j<=50; j++){
table += "<td>"+num+"</td>";
num++;
}
table += "</tr>";
}
table += "</table>";
document.write(table)
</script>
</head>
<body>
</body>
</html>
for in문
break 문
for(초깃값, 조건식, 증감식){
break; // 반복문을 강제로 종료합니다.
자바스크립트 코드;
}
var 변수=초깃값;
while(조건식){
break; // 반복문을 강제로 종료합니다.
자바스크립트 코드;
증감식;
}
중break 문
VIEW<script>
for(var i = 1; i<= 10; i++){
if(i == 6) break;
document.write(i, "<br>");
}
document.write("=== The End ===");
</script>
continue 문
for(초깃값, 조건식, 증감식){
continue;
자바스크립트 코드;
}
var 변수=초깃값;
while(조건식){
증감식;
continue;
자바스크립트 코드;
}
continue 문
VIEW<script>
for(var i = 1; i<= 10; i++) {
if(i%2 == 0) continue;
document.write(i, "<br>");
}
document.write("=== The End ===");
</script>
함수
함수는 하나의 실행문을 저장하고 변수는 하나의 데이터를 저장하여 사용합니다. 함수는 스크립트 실행문을 보관하는 역할을 하기 때문에 반복 사용되는 코드를 구조화하거나 재활용을 목적으로 사용합니다.
함수를 사용하는 이유
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
//" 이것은 빨간색 입니다." 문자열을 출력해주세요~
document.write("이것은 빨간색 입니다.","<br>")
//" 이것은 빨간색 입니다." 문자열을 출력해주세요~ *10
for(let i =1; i<=10; i++){
document.write("이것은 빨간색 입니다." ,"<br>")
}
//" 1. 이것은 빨간색 입니다. 2. 이것은 빨간색 입니다." 문자열을 출력해주세요~ *10
for(let i =1; i<=10; i++){
document.write(i +". 이것은 빨간색 입니다.","<br>")
}
//"이것은 검은색 입니다." *10
for(let i =1; i<=10; i++){
document.write("이것은 검은색 입니다." ,"<br>")
}
//"이것은 파란색 입니다." *10
for(let i =1; i<=10; i++){
document.write("이것은 파란색 입니다." ,"<br>")
}
document.write("<br><br><br><br><br>");
function colorName(color){
for(let i =1; i<=10; i++){
document.write(i+". 이것은 "+color+" 입니다." ,"<br>");
}
}
colorName("빨간색")
colorName("파란색")
colorName("검은색")
</script>
</head>
<body>
</body>
</html>
선언전 함수
function 함수명(){
//실행함수
}
함수명() --> 함수 호출
함수
VIEW<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script>
//선언적 함수
function func1(){
document.write("1.함수가 실행 되었습니다. <br><br>");
}
func1();
//익명 함수
const func2 = function(){
document.write("2.함수가 실행 되었습니다. <br><br>");
}
func2();
//매개변수 함수
function func3(str){
document.write(str);
}
func3("3.함수가 실행 되었습니다. <br><br>");
//리턴값이 있는 함수
function func4(){
const str = "4.함수가 실행 되었습니다. <br><br>";
return str;
}
const val = func4();
document.write(val);
//재귀함수 :함수 정의문 내에 함수를 호출하여 실행하는 함수
function func5(){
document.write("5.함수가 실행 되었습니다. <br><br>");
//func5();
}
func5();
//재귀함수2 : 함수를 여러번 실행하고 싶을 때
function func6(num){
if(num == 0){
document.write("6.함수가 실행 되었습니다. <br><br>");
} else {
document.write("6.함수가 실행 되었습니다. <br><br>");
func6( num -1);
}
}
func6(9);
//콜백함수 : 함수를 변수에 저장하고 변수를 함수의 인자로 사용하여 매개변수 전달하는 함수
function callback(num){
for(let i = 1; i<=10; i++){
num(i)
}
}
const func7 = function(i){
document.write("7.함수가 실행 되었습니다. <br><br>");
}
callback(func7);
//내부 함수 : 함수 안에 함수를 선언하는 함수
function func8out(){
function func8in(){
document.write("8.함수가 실행 되었습니다. <br><br>");
}
func8in();
}
func8out();
//화살표 함수 - 선언적 함수
func9 = () => {
document.write("9.함수가 실행 되었습니다. <br><br>");
}
func9();
//화살표 함수 - 익명 함수
const func10 = () => {
document.write("10.함수가 실행 되었습니다. <br><br>");
}
func10();
//화살표 함수 - 리턴문
func11 = () => {
const str = "11.함수가 실행 되었습니다. <br><br>";
return str;
}
const val11 = func11();
document.write(val11);
//화살표 함수 - 매개변수, 괄호
const func12 = (str) => {
return str;
}
const val12 = func12("12.함수가 실행 되었습니다. <br><br>");
document.write(val12)
//화살표 함수 - 매개변수, 괄호 생략
const func13 = str => {
return str;
}
const val13 = func13("13.함수가 실행 되었습니다. <br><br>");
document.write(val13);
//화살표 함수 - 리턴 생략
const func14 = str => str;
const val14 = func14("14.함수가 실행 되었습니다. <br><br>");
document.write(val14);
</script>
</head>
<body>
</body>
</html>