JavaScript
객체 기반의 클라이언트 스크립트 언어로 웹 페이지에서 동적으로 만드는데 사용하는 언어
- 인터프린터 언어
- 자바스크립트 코드는 작성한 순서대로 구문을 분석
- 만약 코드에 문제가 생기면 에러가 발생한 다음 줄 부터는 구문을 분석하지 않는다.
- 클라이언트 스크립트 언어
- 서버에서 실행되지 않고 사용자 컴퓨터에서 실행되는 클라이언트 언어
- 서버에서 운영이 되는 언어는 PHP, ASP, JSP 언어가 있다.
- 객체 기반의 언어
- C++ 와 JAVA와 같이 클래스를 이용하여 객체를 생성하는 클래스 기반 객체 지향 언어
- 자바스크립트는 클래스가 아닌 프로토타입 상속하는 프로토타입 기반 객체 지향 언어이다.
- 다양한 라이브러리가 지원되는 언어
- 자바스크립트를 이용한 라이브러리에는 jQueyr, Angular.js, React.js,Node.js, Vue.js, Three,js 등이 있다.
자바스크립트 기초
자바스크립트 주석
일반적으로 특정 코드에 대한 설명을 입력하거나 특정한 부분의 코드가 실행되지 않도록 사용
/* */ : 여러 줄에 주석을 적용하는 경우
// : 한 줄에 주석을 적용하는 경우
자바스크립트 대 소 문자
대문자와 소문자를 구별
배열 객체 생성: New Array( ) :(X)
배열 객체 생성: naw array ( ) :(O)
자바스크립트 사용방법
외부 파일, 스크립트 태그, 태그에 직접 기술하는 방법
자바스크립트 사용방법 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascrip</title>
<!-- 외부 파일로 로드하는 방법-->
<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>세미콜론 ( ; )
- 코드 한 줄을 작성 한 후 에는 세미콜론 (;)을 쓰는 것이 좋다.
- 쓰지 않는다면 다음 예제 처럼 한 줄에 2개의 코드를 작성할 경우 오류가 발생
document.write ( "hi") document.write("bye") ( X )
document.write ( "hi") ; document.write("bye") ; ( O )
가독성을 위해 한줄에 한 문장만 작성하는 것이 좋음
큰 따옴표 ( " " ) , 작은 따옴표 ( ' ' )
문장을 작성할 때 겹침오류를 주의해야 한다.
큰 따옴표 겹침 예시
큰따옴표 겹침 오류
document.write("책에 "자바스크립트는 대소문자를 구분해야 합니다."라고 나와있다.");
잘된 예
document.write('책에 "자바스크립트는 대소문자를 구분해야 합니다."라고 나와있다.');
document.write("책에 /"자바스크립트는 대소문자를 구분해야 합니다./"라고 나와있다.");
중괄호 { } , 소괄호 ( )
코드를 작성할때 중괄호 또는 소괄호 짝이 맞아야 한다.
document.write ( " welcome! " ; ( X )
document.write ( " welcome! ") ; ( O )
변수
변수(Variables)는 변하는 하나의 데이터값을 저장하는 저장소
변수명
키워드: 자바스크립트에서 사용하는 단어( 즉, 자바스크립트 문법를 규정짓기 위해 자바스크립트에서 사용하는 특수한 키워드)
식별자 : 사용자가 임의로 사용하는 단어 ( 즉, 변수나 함수를 하용할때 정의하는 키워드)
식별자를 만드는 규칙
- 사용자가 사용할 수 있는 문자 : 알파벳 (a ~z . A~ Z), 숫자(0~9), 특수기호('-','$')
- 첫 글자는 숫자를 사용할 수 없다.
- 공백을 사용할 수 없다 ( 공백 대신 밑줄( _ )사용 가능 하이픈( - ) 사용 안됨 )
- 특수 기호 사용 불가 : 달러 ($) 는 사용 가능
- 키워드를 사용 할수 없다.
단어를 조합할때 규칙
- 언더스코어 노테이션( 스네이크 표기법) : color_top와 같이 중각에 '_' 를 사용한다.
- 캐멀 노테이션: colorTop 와 같이 두번째 단어의 첫글자를 대문자로 사용
- 파스칼 노테이션 : ColorTop 와 같이 모든 단어의 첫 글자를 대문자로 사용( 가장 많이 사용)
변수 선언
var 변수명 = 값; or lat 변수명 = 값
변수 선언 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 = 150; // 변수 x에 숫자 100을 저장
var y = 200; // 변수 y에 숫자 200을 저장
var z = "자바스크립트"; // 변수 z에 문자"자바스크립트" 을 저장
document.write(x);
document.write(x);
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="javasctipt"; // 변수 z의 값을 "자바스크립트"에서 "javasctipt "변경
document.write(x);
document.write("<br>");
document.write(y);
document.write("<br>");
document.write(z);
document.write("<br> <br>");
</script>
</head>
<body>
</body>
</html>변수 유형
| 변수의 유형 | 설명 |
|---|---|
| 숫자(Number) | 숫자를 사용할수 있다. |
| 문자(String) | 문자를 사용할수 있다. 큰 따옴표(")또는 작은 따옴표를 (') 사용 |
| 논리형(Boolean) | 참 과 거짓을 사용 |
| 특수값(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>Document</title>
</head>
<body>
<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 x10= 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(x10),"<br>");
</script>
</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>
</head>
<body>
<script>
//변수 x =100 y =200 을 저장한 다음에 출력해주세요
let x = 100;
let y = 200;
document.write(x, "<br>");
document.write(y, "<br><br>");
//배열을 이용하여 화면의 100과 200을 출력하세요(배열을 선언하고 데이터 입력)
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++){
// i = 0; 0<8; 1
// i = 1; 1<8; 2
// i = 2; 2<8; 3
// i = 3; 3<8; 4
// i = 4; 4<8; 5
// i = 5; 5<8; 6
// i = 6; 6<8; 7
// i = 7; 7<8; 8
document.write(arr6[i] ,"<br>")
}
document.write("<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);
</script>
</body>
</html>연산자
산술연산자
| 연산자 | 예시 | 설명 |
|---|---|---|
| + | x + y | 더하기 |
| - | x - y | 빼기 |
| * | x * y | 곱하기 |
| / | x / y | 나누기 |
| % | x % y | 나머지 |
산술연산자 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>
</head>
<body>
<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>
</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 |
대입연산자 VIEW
<!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=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>
</body>
</html>증감연산자
| 연산자 | 예시 | 설명 |
|---|---|---|
| ++ | x++ 또는 ++x | x = x + 1 |
| -- | x-- 또는 --x | x = x - 1 |
증감연산자 VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascipt</title>
</head>
<body>
<script>
var num1 =10;
var num2 =20;
var result;
num1--; //9
document.write(num1,"<br>");
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>
</body>
</html>비교연산자
| 연산자 | 예시 | 설명 |
|---|---|---|
| == | x == y | 좌변과 우변이 같다 |
| === | x === y | 좌변과 우변이 같다. 데이터형도 같다. |
| != | x != y | 좌변과 우변이 다르다. |
| !== | x !== y | 좌변과 우변이 다르다. 데이터형도 다르다. |
| > | x > y | 좌변이 우변보다 크다 |
| < | x < y | 좌변이 우변보다 작다 |
| >= | x >= y | 좌변이 우변보다 크거나 같다 |
| <= | x <= y | 좌변이 우변보다 작거나 같다 |
비교연산자 VIEW
<!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 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>
</body>
</html>논리연산자
| 연산자 | 예시 | 설명 |
|---|---|---|
| && | x && y | 둘다 true인 경우에 true를 반환합니다.[AND] |
| || | x || y | 둘 중의 하나 이상이 true인 경우 true를 반환합니다.[OR] |
| ! | !x | 반대 값을 반환합니다. |
비교연산자 VIEW
<!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 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; //false &&false &&true
document.write(result,"<br>"); //true
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>
</body>
</html>조건문
조건식의 값의 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어 한다.
if문
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>Document</title>
</head>
<body>
<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 == "floatmoon" && userPW== "1234" ) {
document.write("환영합니다.<br><br> ")
} else {
document.write("아이디또는 비밀먼호가 틀렸습니다. <br><br>")
}
//확인하기
let result = confirm("정말로 회원을 탈퇴하겠습니까?")
if (result ) {
document.write("탈퇴 처리 되었습니다.")
} else {
document.write("탈퇴 취소되었습니다. ")
}
</script>
</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>Document</title>
</head>
<body>
<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 == "floatmoon" && userPW== "1234" ) {
document.write("환영합니다.<br><br> ")
} else {
document.write("아이디또는 비밀먼호가 틀렸습니다. <br><br>")
}
//확인하기
let result = confirm("정말로 회원을 탈퇴하겠습니까?")
if (result ) {
document.write("탈퇴 처리 되었습니다.")
} else {
document.write("탈퇴 취소되었습니다. ")
}
</script>
</body>
</html>다중 if문
if(조건식1){
// 참 일때 실행코드
}else if(조건식2) {
// 앞 조건이 거짓일때 실행코드
}
}else if(조건식3) {
// 앞 조건이 거짓일때 실행코드
}
}else if(조건식4) {
// 앞 조건이 거짓일때 실행코드
}
다중 if문 VIEW
<!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>
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>
</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>Document</title>
</head>
<body>
<script>
let mon= prompt("현재는 몇월입니까?","0");
if(mon>=9&&mon<=11){
document.write("독서의 계절 가을이네요!!");
}else if( mon >=6&&mon <=8 ){
document.write("여행가기 좋은 여름이네요!!");
}else if(mon>=3&&mon <=5){
document.write("햇살이 가득한 봄이네요!!");
} else {
document.write("스키의 계절 겨울이네요!!");
}
</script>
</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>
</head>
<body>
<script>
let id="floatmoon";
let pw="1234";
let userId =prompt("아이디는 무엇입니까?");
let userPw =prompt("비밀번호는 무엇입니까?");
if(id == userId ) {
if(pw == userPw){
document.write(userId+"님 반갑습니다. ");
}else{
alert("비밀번호가 일치 하지 않습니다. ");
location.reload();
}
} else{
alert("아이디가 일치하지 않습니다.");
location.reload();
}
</script>
</body>
</html>switch 문
var 변수 = 초깃값;
switch(조건을 체크할 변수 ) {
case 값1:
// 조건에 체크할 변수가 값1을 가지면 실행
break;
case 값2:
//조건에 체크할 변수가 값2을 가지면 실행
break;
case 값3:
//조건에 체크할 변수가 값3을 가지면 실행
break;
..................................................
default:
//해당되는 값을 가지고 있지 않을 경우에 실행
break;
}
switch 문 VIEW
<!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>
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>
</body>
</html>switch 문2 VIEW
<!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>
let mon =prompt("현재는 몇월입니까?")
switch(mon){
case "1": case "2":case "12": document.write("스키의 계절 겨울이네요!!");
break;
case "3": case "4":case "5": document.write("햇살이 가득한 봄이네요!!");
break;
case "6": case "7":case "8": document.write("여행가기 좋은 여름이네요!!");
break;
case "9": case "10":case "11": document.write("독서의 계절 가을이네요!!");
break;
}
</script>
</body>
</html>switch 문3 VIEW
<!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>
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>
</body>
</html>switch 문4 VIEW
<!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>
let site =prompt("네이버, 다음. 네이트. 구글 중 즐겨 사용하는 사이트는?");
let url= "0";
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("잘못 입력하셨습니다.")
};
if(url)location.href=url
</script>
</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>Document</title>
</head>
<body>
<script>
// 사용자가 숫자를 넣으면 짝수인지 홀수인지 구분하는 스크립트를 작성
let num = prompt("당신이 좋아하는 숫자는 무엇입니까?");
if(num%2==0) {
document.write ( " 짝수입니다.");
}else{ document.write("홀수입니다.")
}
// 위에 있는 if 문을 삼항 연산자로 바꿔보자
(num%2==0)? document.write ( " 짝수입니다.") : document.write("홀수입니다.")
</script>
</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>Document</title>
</head>
<body>
<script>
//100보다 작은 수 출력하기
let num =0; // 초기값 설정
while(num < 100 ) { // 조건식 설정
num++;
document.write(num,"<br>");
}
document.write("<br>","<br>");
//100보다 작은 짝수만 출력하기
let num2 = 0;
while(num2<=100){
if(num2%2==0) {
document.write(num2,"<br>");
}
num2++;
}
document.write("<br>","<br>");
//100보다 작은 4의 배수 출력하기
let num3 =0;
while(num3<=100) {
if(num3%4==0){
document.write(num3,"<br>");
}
num3++;
}
document.write("<br>","<br>");
//100보다 작은 수 (4의 배수 와 6의 배수) 출력
let num4 =1;
while( num4 <=100) {
if(num4%4==0 || num4%6==0){
document.write(num4);
}
num4++;
}
document.write("<br>","<br>");
// 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++;
}
document.write("<br>","<br>");
</script>
</body>
</html>do while문
while문은 조건을 검사하고 코드를 반복적으로 실행한다. 첮 조건이 거짓이라면 코드를 실행하지 않는다. (but!! do while문은 조건이 참, 거짓과 상관없이 최소한 한번은 실행한다.
ver 변수= 초기값;
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>Document</title>
</head>
<body>
<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,",")
// }
// }
for (let i = 1; i <= 100; i += 2) {
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:aqua'>" + i + "</span>")
}
}
</script>
</body>
</html>for in문
for in문VIEW
중첩 for문
for(var i=0; i<100;i++){
for(var j=0; j<100;j++){
//반복코드
}
}
중첩 for문VIEW
<!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>
// for 문을 이용하여 1~10까지 출력
for(let i=1; i<=10;i++){
document.write(i)
}
document.write("<br><br>");
//중첩 for문
for(let i=1; i<=10;i++){
for(let j=1; j<=10;j++){
document.write(i+","+j,"<br>");
}
}
</script>
</body>
</html>중첩 for문1VIEW
<!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>
// 중접 for 문을 이용하여 구구단을 만들어보자
//2*1=2
//2*2=4
//2*3=6
//2*4=8
//2*5=10
//2*6=12
//2*7=14
//2*8=16
//2*9=18
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>
</body>
</html>>중첩 for문2VIEW
<!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>break문
반복문을 강제로 종료할때 사용
break문VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>break문</title>
</head>
<body>
<script>
for(let i=1; i<=10; i++) {
if(i==6) break;
document.write(i,"<br>");
}
document.write("===the end===")
</script>
</body>
</html>continue문
반복문일때만 사용
continue문VIEW
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>continue문</title>
</head>
<body>
<script>
for(let i=1; i<=10; i++){
if(i%2==0)continue;
document.write(i,"<br>");
}
document.write("===tne end===")
</script>
</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>Document</title>
</head>
<body>
<script>
//"이것은 빨간 색입니다. " 문자열을 출력
document.write("이것은 빨간색입니다. ","<br><br>" )
//"이것은 빨간 색 입니다. " 10개
for(let i=1; i<=10; i++){
document.write("이것은 빨간색입니다. ","<br>" )
}
document.write("<br><br>")
//"이것은 빨간색 입니다. "
for(let i=1; i<=10; i++){
document.write(i+". 이것은 빨간색입니다.","<br>")
}
document.write("<br><br>")
//이것은 검은색
for(let i=1; i<=10; i++){
document.write("이것은 검은색입니다. ","<br>" )
}
document.write("<br><br>")
//이것은 파란색
for(let i=1; i<=10; i++){
document.write("이것은 파란색입니다. ","<br>" )
}
document.write("<br><br><br><br>")
function colorName(color){
for(let i=1; i<=10; i++){
document.write("이것은"+color+"입니다. ","<br>" )
}
}
colorName("빨간색")
colorName("파란색")
colorName("검은색")
</script>
</body>
</html>선언전 함수
function 함수명 () {
//실행함수
}
함수명 () --> 함수 호출
함수를 사용하는 이유VIEW