<22.12.30 1교시>
자바스크립트 : 비동적
1. 기본뼈대
<script>
//자바스크립트 실행문;
</script>
<script src="자바스크립트 경로/파일명.js"></script>
2. 규칙
1) <head> 태그 안 <style> 태그 밑에 쓸 것!
2) 실행문 끝마다 세미콜론(;) 쓰기
3) 변수명은 대소문자 가림( 오타 주의!!!!!)
4) 주석처리 : // (한줄 주석처리) /* ~~~~~~~~ */ (여러줄 OR 영역 주석처리)
* 태그 주석처리는 ctrl + shift + / : <!-- --> *
5) = : 같다는 의미 X, 대입처리임
<변수선언> : 메모리 상에 공간 만들어서 임의로 저장함(휘발성) [ 1230_01.html ]
ㄴ> var num =5;
: num(변수명)이라는
변수(var : 생략가능, 가능한 한 쓰자!!)를
5(vaule)라는 값을 저장 ( = num 상자에 5를 집어넣음)
document(객체:많은것을 하나로 뭉치는 것).(속성,함수 나옴)write(num); : 브라우저에 num 변수의 값을 출력(.write)해라
3. 명령어 [ 1230_02.html ] [ 1230_03.html ] * 함수(메소드) : 괄호 *
1) 입력
--> prompt('입력제목' , '입력내용') : 입력창 띄우기
2) 출력
--> document.write('출력 내용') : 화면에 출력됨
--> alert('경고 내용') : 경고창 띄우기
--> console.log('브라우저 콜솔에 내용 출력문') : 우측마우스 - 검사 - console 에 결과 뜸
3) 확인
--> confirm('확인 내용') : 확인(true), 취소(false) 버튼 생성됨
document.write(prompt("도움말","")); : 괄호 안에 있는 prompt를 먼저 실행하고 write 실행 순으로
사용자 입력값은 무조건 "문자열"로(숫자여도 ㅇㅇ)
var str=prompt("이름을 입력하세요","");
document.write(str);
alert(str); --> 경고창 띄우기
confirm("삭제하시겠습니까?");
var result= confirm("삭제하시겠습니까?");
document.write(result); : 확인 누르면 true 적힘, 취소 누르면 false 적힘
console.log(result); : 검사-console 에 값 적힘
<22.12.30 2교시>
같다 : ==
var str=confirm("확인, 취소를 눌러보세요.");
if(str == true) {
alert("확인을 눌렀다.");
} else {
alert("취소를 눌렀다.");
}
4. 식별자와 변수
--> 식별자 선언 시
1) 알파벳(대,소 가림), 언더바, 숫자, $ 사용가능
2) 이미 있는 단어 사용 X
3) 숫자로 시작 X
4) 언더바, $로 시작하는거 추천 X
5) 특수문자 X
* 초기화했다 : 젤 처음 값을 대입했다 *
5. 변수 선언 방법 [ 1230_04.html ]
*자바스크립트에선 "" or '' 동일하게 문자열로 취급함 *
*자바스크립트는 오류 생기면 아무것도 안보여줌*
1) var
document.write(a+ "<br>"); 변수a + <br>(엔터역할) 출력
2) let
3) const
<22.12.30 3교시>
6. 데이터 타입 [ 1230_05.html ]
1) 숫자형
2) 문자열(형) : 자바스크립트에선 같은 말임
3) 논리형
4) 선언만 한 경우
5) null
6) typeof 명령어
7. 산술 연산자 [ 1230_06.html ]
1) +
2) -
3) *
4) / --> 분모가 0이면 오류뜸
5) % ex) 사과 10 바구니 3 => 몫:3 나머지:1 ( 3 3 3 1 )
6) ++ : 1씩 증가
7) -- : 1씩 차감
parseInt( 숫자 ) : 정수로 강제적으로 변환시키는 함수(숫자 형태의 문자열을 정수로 변환)
ㄴ> Number(숫자) 동일
예제 타임~ [ 1230_07.html ]
<22.12.30 4교시>
for( i=0 (초기화) ; i<10; i++)
i++ : i = i+1
i+2 : i = i+2
i-- : i = i-1
i-2 : I = i-2
8. 대입연산자 [ 1230_08.html ]
9. 비교연산자 [ 1230_08.html ]
10. 논리연산자 [ 1230_08.html ]
11. 삼항연산자 [ 1230_08.html ]
var a=5, b=3;
--------->위, 아래 둘다 같은 역할임
var a=5;
var b=3;
참과 거짓 사이엔 :(클론)으로
<22.12.30 5교시>
조건문 [ 1230_09.html ] [ 1230_10.html ]
1. if문
if (조건1)
else if (조건 2,3 등등)
else (조건 모두 제외한 나머지)
2. switch구문 ( case의 조건 쓰고 그 밑에 break; 꼭 넣어야함) [ 1230_11.html ] [ 1230_12.html ]
case --> if
break;
case --> else if
break;
case --> else if
break;
default --> else
break;
break; --> 부수다 의미
<22.12.30 6교시>
반복문 [ 1230_13.html ] [ 1230_14.html ] [ 1230_15.html ] [ 1230_16.html ]
1. for문
: 주로 산수계산에 사용, 반복 횟수 알고있을 때 주로 사용, 배열과 함께 사용
for( i =0 ; i <= 숫자 ; i++) {
sum += i ; --------------> 설정한 숫자까지 반복해서 다 더함
}
console.log(sum) ; ---> console에서 확인할 수 있게
2. while문
: DB list 출력할때 사용, 조건식이 true 일 때(비교 or 논리) 사용, 무한 or 특정조건만족할때까지 반복
i = 0;
while( i <= 숫자 ) {
sum += i ;
i++;
}
console.log(sum) ;
3. do문
: 실행문 먼저 실행하고 조건 검사해 반복
i = 0;
do {
console.log(i)
i++;
} while( i <= 숫자) ;
+ break 문
if( 조건) {
break ; --> 조건 만족 시 반복 취소
}
+ continue 문
if( 조건) {
continue ; --> 증감식(for문 경우) or 조건식(while, do문 경우)로 이동
}
<1230_01.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
<script>
var num=5; //num 변수에 정수 5값을 대입처리한다.
document.write(num); //num 변수를 출력 : 5
var str="유관순";
document.write(str); // str 변수를 출력 : 유관순
document.write(6); // 6 정수 값을 출력
document.write("홍길동"); // 홍길동 문자열 값을 출력
</script>
</head>
<body>
</body>
</html>
<1230_02.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
/* <ex>
var str=prompt("이름을 입력하세요","");
document.write(str);
alert(str); --> 입력한 값 경고창에 띄워줌
*/
var result= confirm("삭제하시겠습니까?"); //boolean 타입(참, 거짓)의 값을 반환
document.write(result);
console.log(result); --> console창에 true or false 값 반환
if(result == true){ //확인을 눌렀다면
//location.href="1230_01.html"; //삭제페이지로 이동
} else{ // 취소를 눌렀을 경우(아무것도 안함)
}
document.write(result);
</script>
</head>
<body>
</body>
</html>
<1230_03.html>
<Script>
//str 변수에 confirm() 이용을 해서 값을 전달(대입)한다.
var str=confirm("확인, 취소를 눌러보세요.");
if(str == false) {
alert("취소를 눌렀다.");
} else {
alert("확인을 눌렀다.");
}
/*
var result= confirm("삭제하시겠습니까?");
if(result == true){ //확인을 눌렀다면
location.href="1230_01.html"; //삭제페이지로 이동
} else{ // 취소를 눌렀을 경우
// 아무것도 안함
}
document.write(result);
*/
</Script>
<1230_04.html>
<script>
// 1. var : 이름이 같은 변수를 중복 선언 가능. 변수의 값 변경 가능..
document.write("============= var ===========<br>")
var a; // 변수 a "선언" : undefined (선언은 했지만 초기화는 안헀음을 알려줌)
document.write(a + "<br>");
var b =1; // 변수 b 선언과 동시에 1 값으로 초기화(대입연산자 이용 O)
a = 1; //변수 a 에 1 이라는 값으로 초기화했다.
document.write(a + "<br>");
b = 2; // 변수 b에 2 라는 값으로 업데이트했다.
var b=3; // 변수 b에 3이라는 값으로 업데이트했다.
a = 5;
document.write(a + "<br>");
var a =10
document.write(a + "<br>");
document.write("============= let ===========<br>")
// 2. let : 이름이 같은 변수를 중복 선언 할 수 없음. 값 변경 가능.
// let a =1; // 위에 var a 변수 선언되어있어서 안됨.
let c = 1;
document.write(c+"<br>");
c=2;
document.write(c+"<br>");
// let c=3;
// document.write(c+"<br>"); --> 같은 변수 중복 선언이라서 오류 뜸(빈화면 나옴)
// 3. const : 이름이 같은 변수를 중복 선언 할 수 없음. 값 변경 안됨. 변수명 대문자로.
document.write("============= const ===========<br>")
const PI = 3.14;
document.write(PI + "<br>");
//const PI = 3.14;
//document.write(PI + "<br>"); --> 같은 변수 중복 선언이라 오류 뜸(빈화면 나옴)
PI = 3.14345345;
document.write(PI + "<br>"); // --> 값 변경이 안됨. 젤 처음 값으로 뜸
</script>
<1230_05.html>
<script>
// 1. number 숫자형
document.write("============= number ===========<br>")
var num1 = 1;
var num2 = 2;
var num3 = 1e+2; //1*10의 2승
document.write(num1+"<br>");
document.write(num2+"<br>");
document.write(num3+"<br>");
document.write(1+2+"<br>");
document.write(num1+num2+"<br>");
document.write("총합:"+(1+2)+"<br>");
// 2. string 문자형(열)
document.write("============= string ===========<br>");
var str1='문자1';
var str2="문자2";
var str3="문자'2";
var str4='문자\1'; // backspace 밑에꺼임
document.write(str1 + "<br>");
document.write(str2 + "<br>");
document.write(str1 + str2 + "<br>");
document.write(str3 + "<br>");
document.write(str4 + "<br>");
var subject="제목 구문의 \"내용\" '문자열'이다.";
document.write(subject + "<br>");
// 3. boolean 논리형 : true, false 값으로 반환
document.write("============= boolean ===========<br>");
var temp1 = 5>4; // true
var temp2 = 5<4; // false
// 4. undefined : 변수를 선언만 하고 값을 초기화 하지 않은 경우
document.write("============= undefined ===========<br>");
var aa;
// 5. null : 자바스크립트에서 많이 쓰이지 않음. 비어있음을 의미
var a = "a"; // a 방에 a를 집어넣음
var a = ""; // a 방에 문을 열고 아무것도 없음을 확인하고 문닫음
var a = null; // a 방 문을 열지않음
// 6. typeof : 명령어
document.write("============= typeof ===========<br>");
document.write(typeof temp1);
</script>
<1230_06.html>
<script>
// 산술연산자 : + , - , / , * , % , ++ , --
var num1 = 10;
var num2 = 3;
var s1 = num1 + num2;
var s2 = num1 - num2;
var s3 = num1 * num2;
var s4 = parseInt(num1 / num2); // 몫
var s5 = num1 % num2; // 나머지
var total_page = s4 + s5; // 총 페이지 수(3 3 3 1 이므로 4페이지), 게시판 만들 때 필요함
document.write(s1+"<br>");
document.write(s2+"<br>");
document.write(s3+"<br>");
document.write(s4+"<br>");
document.write(s5+"<br>");
document.write("============= ex ===========<br>");
// 짝수, 홀수를 구하는 식
var n1 = 10;
if(n1 % 2 ==0) { //짝수
document.write("짝수");
} else { // 그 나머지는 홀수
document.write("홀수");
}
var n2 = 9;
if(n2 % 2 ==0) { //짝수
document.write("짝수");
} else { // 그 나머지는 홀수
document.write("홀수");
}
var n3 = 9;
if(n1 % 4 ==0) { //4의배수
document.write("짝수");
} else { // 4의 배수가 아니다
document.write("홀수");
}
</script>
<1230_07.html>
<script>
// 사용자가 입력한 값을 가지고 짝수인지 홀수인지 출력하시오.
/* 1. 조건에 입력값 넣어버리기~
if(prompt("짝홀","")%2==0) {
document.write("짝수");
} else {
document.write("홀수");
}
*/
/* 2. 입력값 변수로 설정
var str = prompt("짝홀", "");
if(str % 2 == 0) {
document.write("짝수");
} else {
document.write("홀수");
}
*/
// 두 수를 입력받아 합산을 출력하시오
/* 1. 출력할때 parseInt 설정하기
var str1 = prompt("첫번째 수를 입력하세요","");
var str2 = prompt("두번째 수를 입력하세요","");
document.write(parseInt(str1)+parseInt(str2));
*/
/* 2. 변수 설정할때 parseInt 설정하기
var str1 = parseInt(prompt("첫번째 수를 입력하세요",""));
var str2 = parseInt(prompt("두번째 수를 입력하세요",""));
document.write(str1+str2);
*/
</script>
<1230_08.html>
<script>
// 대입연산자 = , += , -= , *= , /= , %=
var a = 1; //1
a += 2; //3
a *= 3; //9 "a = a * 3;" 같은의미
a *= 3; //27
a = a % 3 // 0
a %= 3; // 0
for(i=0; i<10; i+=2) { // i+=2 or i=i+2
}
</script>
<br>
<script>
// 비교연산자 > , < , >= , <= , ==(같다) , !=(같지않다) , ===(type이랑 값 둘다 같음) , !==
var c =3;
var d =4;
document.write(c>d); // false
if(c == d) {
} else { // false 이므로 else 실행
}
</script>
// 논리연산자 <br>
<script>
// &&(교집합, and) , ||(합집합, or) , !(아니다, not)
var a = 1;
var b = 1;
var c = 2;
if(a == b && b == c) {
} else {
}
if(a != b && b != c) {
} else {
}
</script>
// 삼항연산자 <br>
<script>
/*
var a=5;
var b=3;
*/
var a=5, b=3;
if(a>d) {
document.write(a-d);
} else {
document.write(b-a);
}
if(a>d) {
document.write(a-d);
} else {
if(a==b) {
document.write(b-a);
} else {
document.write(b-a);
}
}
//(조건식)? 참 : 거짓
document.write((a>d)?a-b:b-a);
document.write("<br>");
document.write("123"+123);
</script>
<1230_09.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var a=5 , b=3;
// if
if(a>d) {
document.write("a가 크다.");
}
//if, else
if(a>d) {
document.write("a가 크다");
} else {
document.write("a가 b보다 작거나 같다");
}
// if, else if, else
if(a>d) {
document.write("a가 b보다 크다");
} else if(a==b) {
document.write("a와 b는 같다");
} else {
document.write("a가 b보다 작다");
}
</script>
</body>
</html>
<1230_10.html>
<script>
// 0 - 100 사이의 키보드 입력 값을 받는다.
// A - F 학점을 출력하시오..
// 출력구문 예) 점수:75점 - c학점
/*
var num=prompt("점수를 입력하시오.","");
num = parseInt(num);
if(num>=90) {
document.write("점수: "+num+"점 - A학점");
}
else if(num>=80) {
document.write("점수: "+num+"점-B학점");
}
else if(num>=70) {
document.write("점수: "+num+"점-C학점");
}
else if(num>=50) {
document.write("점수: "+num+"점-D학점");
}
else if(num>=40) {
document.write("점수: "+num+"점-E학점");
}
else {
document.write("점수: "+num+"점-F학점");
}
*/
var num=prompt("점수를 입력하시오.","");
num = parseInt(num);
hakjum = "A"; // 전역변수(은행)
if(num>=90) {
hakjum = "A"; // 지역변수(온라인) --> 이걸 위에 전역변수한테 전달
}
else if(num>=80) {
hakjum = "B";
}
else if(num>=70) {
hakjum = "C";
}
else if(num>=50) {
hakjum = "D";
}
else if(num>=40) {
hakjum = "E";
}
else {
hakjum = "F";
}
document.write("점수: "+num+"점 -"+hakjum+"학점"); // hakjum 전역변수임 (위 전역변수가 지역변수의 값을 받아서 여기 전역변수로 보내기)
</script>
<1230_11.html>
<script>
/*
var g = prompt("사고 싶은 과일은?");
price = 0; // 전역변수
switch(g) { //g == "사과" // 문자열, 숫자 값인 경우 switch문 사용(if,else 대신)
case "사과" :
price = 2000;
break;
case "바나나" :
price = 3000;
break;
case "딸기" :
price = 4000;
break;
default :
price = 0;
}
document.write("과일 : "+g+" 가격 : "+price);
*/
var g = parseInt(prompt("숫자"));
price = 0; // 전역변수
switch(g) { // g == 1
case 1 :
price = 2000;
break;
case 2 :
price = 3000;
break;
case 3 :
price = 4000;
break;
default :
price = 0;
}
document.write("숫자 : "+g+" 가격 : "+price);
</script>
<1230_12.html>
<script>
/*
var str ="사과"; // 변수 선언 및 초기화
var price = 0; // 변수 선언 및 초기화 (전역변수)
if(str == "딸기") {
price = 3000;
} else if(str == "사과") {
price = 2000;
} else {
price = 0;
}
document.write("과일 : "+str+" - 가격 : "+price+"원");
*/
switch(str) {
case "딸기" :
price = 3000;
break;
case "사과" :
price = 2000;
break;
default :
price = 0;
}
document.write("과일 : "+str+" - 가격 : "+price+"원");
</script>
<1230_13.html>
// 반복문 구조 파악하기
<script>
/////////////////////for///////////////
for(i=0; i<10; i++) {
document.write(i+"<br>");
}
for(i=0; i<10; i+=3) {
document.write(i+"<br>");
}
/////////////////////while///////////////
i=0; // 변수 선언 및 초기화
while(i<10) {
document.write(i+"<br>");
i++;
}
////////////////////do///////////////
i=0;
do {
document.write(i+"<br>");
i++;
} while(i<10);
</script>
<1230_14.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
/*
document.write("<table border=1>");
document.write("<tr>");
document.write("<td>");
document.write("들어갈 내용");
document.write("</td>");
document.write("</tr>");
document.write("</table>");
*/
// 반복문을 이용해서 10px ~35px 크기 출력(5px 씩 증가) --> 자바스크립트 + html 같이 이용
for(i=10; i<=35; i+=5) {
document.write("<span style='font-size: "+i+"px'>"+i+"px</span>" );
}
for(i=10; i<=35; i+=5) {
document.write("<div style='font-size: "+i+"px'>"+i+"px</div>" ); // div는 <br>이 포함되어있기 때문에 세로로 나옴!
}
</script>
<!--<span style="font-size: 10px">10px</span> -->
</body>
</html>
<1230_15.html>
<script>
// 0 - 20까지 수 중에 3의 배수의 합을 구해서 출력하시오
/*
for(i=0; i<=20; i++) {
document.write(i);
}
*/
var total =0;
for(i=0; i<=20; i++) {
if(i%3 ==0) { // 3의배수
total += i; // total = total + i;
}
}
document.write("0-20까지의 3의배수 합:"+total+"<br>");
// 0-10까지의 합 출력
var sum=0;
for(i=0; i<=10; i++) {
sum +=i; // sum = sum + i;
}
document.write("0-10까지의 합: "+sum+"<br>");
// 0-10까지의 짝수의 합, 홀수의 합 출력
var sum_0 =0; //짝수
var sum_1 =0; //홀수
for(i=0; i<=10; i++) {
if(i%2==0) { //짝수
sum_0 += i;
} else { //홀수
sum_1 += i;
}
}
document.write("0-10까지의 짝수의 합: "+sum_0+"<br>");
document.write("0-10까지의 홀수의 합: "+sum_1+"<br>");
document.write("짝수, 홀수 총합: "+(sum_0+sum_1));
</script>
<1230_16.html>
<script>
// 두수를 입력받는다
// 작은 수 부터 큰 수까지 반복문을 통해 총 합을 구해 출력
/*
var a = parseInt(prompt("숫자를 입력하세요",""));
var b = parseInt(prompt("숫자를 입력하세요",""));
// 조건을 통해 어느 변수가 작은지 판단
var c,d; // 변수 선언만(전역변수)
if(a<b) { // a 값이 b보다 작다면~~~
c=a; // 변수에 초기화(지역변수)
d=b; // 변수에 초기화(지역변수)
} else { // a 값이 b보다 크다면~~~
c=b;
d=a;
}
var sum=0;
for(i=c; i<=d; i++) {
sum += i;
}
document.write(sum);
*/
var a = parseInt(prompt("숫자를 입력하세요",""));
var b = parseInt(prompt("숫자를 입력하세요",""));
var sum = 0;
if(a<b) {
for(i=a; i<=b; i++) {
sum += i;
}
} else {
for(i=a; i<=b; i++) {
sum += i;
}
}
document.write(sum);
</script>'JAVA > html' 카테고리의 다른 글
| 230103_구구단, form (1) | 2023.01.03 |
|---|---|
| 230102_교재, form, 구구단 (0) | 2023.01.02 |
| 221229_로또, dance블로그 (0) | 2022.12.29 |
| 221228_CSS (2) | 2022.12.28 |
| 221227_네이버,영역태그 (0) | 2022.12.27 |
