JavaScript

자바스크립트 문법 배우기

걷는 청년 2024. 7. 24. 11:57

 

기초적인 문법들(if, for, while, array)을 자바스크립트로 활용하여 써보기

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript</title>
</head>
<body>
<h1>자바스크립트 연습</h1>
<script type="text/javascript">
console.log("보인당");
document.write("화면에 보임");
</script>
<br>여기는 html

<script type="text/javascript">
"use strict";
var a = 5;
let b = 10;
const c = a + b;
document.write(c);
</script>

<br>여기는 또 html
<hr>
<script type="text/javascript">
document.write("이건 자바스크립트");
document.write("변수 선언시 let과", "const 강력 추천");

document.write("<br>kbs : ", kbs)
var kbs = 9;	//var은 전역적 global scope
// 호이스팅이란 변수와 함수 선언이 맨 위로 이동되는 자바스크립트 매커니즘
document.write("<br>kbs : ", kbs)

{
	var v1 = 1;
	{
		var v2 = 2;
		{
			var v3 = 3;
		}
	}
}
document.write("<br>", v1, v2, v3);

//document.write("<br>mbc : ", mbc) error
let mbc=11;	//let은 지역적 local scope
document.write("<br>mbc : ", mbc)

{
	let w1 = 1;
	{
		let w2 = 2;
		{
			let w3 = 3;
		}
	}
}
//document.write("<br>", w1, w2, w3);

const sbs = 5;
//sbs = 3; error
document.write("<br>sbs : ", sbs)

document.write("<br>원시 타입 : Number, String, Boolean, Undefined, Null, Simbol");
document.write("<br>참조 타입 : Object, Array, Function");
document.write("<br>type 확인 : ", typeof(1), ' ', typeof 1.5, ' ', typeof -12, ' ', typeof 'kor', ' ',
		typeof true, ' ', typeof false, ' ', typeof null, ' ', typeof undefined)

let aa = null;
let bb = undefined;
let cc;
document.write("<br>aa : ", aa, ", bb : ", bb, ", cc : ", cc)
document.write(`<br>aa : ${aa}, bb : ${bb}, cc : ${cc}`)	// back tic
document.write(`<br>${1 + 5 * 2}`);
</script>
<br>연산자<br>
<script type="text/javascript">
let x = 5, y = 2;
document.write('<br>x:', x, ', y:', y);
document.write('<br>산술 연산');
document.write('<br>x:', x + y, ' ', x - y, ' ', x * y);
document.write('<br>', x / y, ' ', x % y);
document.write('<br>', x ** y, ' ', 4 ** (1/2), ' ', 8 ** (1/3));

document.write('<br>관계연산');
document.write('<br>', x > y, ' ', x <= y, ' ', x == y, ' ', x != y);
document.write('<br>', 5 == '5', ' ', 5 === '5', ' ', 5 !== '5', ' ', 5 !== '5');
// == 타입에 의한 비교(형변환 알아서 해서 타입이 같아짐), === 값 비교

document.write('<br>논리연산');
document.write('<br>', x > y && 7 > x);
document.write('<br>', x > y || 7 > x);

document.write('<br>삼항연산');
document.write('<br>', (x > y)?100:200);

let kor = null;
//let kor = null;
let eng = 90;
let result1 = (kor !== null && a !== undefined)?kor:eng;
document.write(`<br>result1의 결과는 ${result1}입니다`);
let result2 = kor??eng;
document.write(`<br>result2의 결과는 ${result2}입니다`);

document.write('<br>연산자 우선 순위', 10 + 20 * 2, ' ', (10 + 20) * 2);
// ( ) > 산술(*, / > + -) > 관계 > 논리 > 치환

document.write('<br>문자열 더하기 연산');
document.write('<br>', '대한' + '민국', ' ', '5' + '6', ' ', '5' + 6);
document.write('<br>', '5' + 6 , Number('5') + Number('6'), ' ', +'5' + 6);
// + '숫자모양의 문자열' : 단항 덧셈 연산자. 숫자로 강제 형변환(Number 역할)
document.write('<br>', '1' + 2, ' ', 1 + '2', ' ', 1 + +'2');
document.write('<br>', 6 - '2', ' ', 6 * '2', ' ', 6 / '2');
document.write('<br>', 'c' + 'a' + 't' === 'cat');
document.write('<br>', Boolean(true), ' ', Boolean(false));
document.write('<br>', Boolean('true'), ' ', Boolean('false'));
document.write('<br>', Boolean(123), ' ', Boolean(-123.4), ' ', Boolean('0'));
document.write('<br>', Boolean('kor'), ' ', Boolean('홍길동'), ' ', Boolean('5'));

document.write('<br>', Boolean(0), ' ', Boolean(false), ' ', Boolean(''));
document.write('<br>', Boolean(null), ' ', Boolean(undefined), ' ', Boolean(NaN));

document.write('<br>', '국어' / 2);

document.write('<br>기타 연산');
let s1, s2, s3;
s1 = s2 = s3 = 3 + 4;// 할당(치환) 연산자 체이닝
document.write(`<br>v1 = ${s1} v2 = ${s2} v3 = ${s3}`);

document.write('<br>');
let my = 1;
document.write(my);
my = my + 1;
document.write(my)
my += 1;
document.write(my);
my++;
document.write(my);
++my;
document.write(my)

let f1 = 1, f2 = 2;
document.write('<br>', 3 - (f1 = f2 + 1), ' ', '2' > 1);
</script>

</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h2>조건 판단문 if</h2>
<script type="text/javascript">
const irum = '한국인';
if(irum == '한국인'){
	document.write("맞아");
}else{
	document.write("아니");
}

//let res = prompt("점수 입력", "80");
let res = +"67";
let re = res + 5;
if(re >= 90){
	document.write(`점수가 ${re}이므로 <b style='color:blue'>상</b>`)
}else if(re >= 70){
	document.write(`점수가 ${re}이므로 <b style='color:green'>중</b>`)
}else{
	document.write(`점수가 ${re}이므로 <b style='color:red'>하</b>`)
}
</script>

<h2>조건 판단문 switch</h2>
<script type="text/javascript">
let hak = "A";
switch(hak.toLowerCase()){	// toLowerCase() : 소문자화
case "a":
case "b":
case "c":
	document.write("잘하고 있슈");
	break;
case "d":
	document.write("분발하슈");
	break;
default:
	document.write("기타");
}

</script>

</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>반복문 for</h2>
<script type="text/javascript">
for(let a=1; a<=5; a++){
	document.write(`a값은 ${a}<br>`);
}
//document.write(`for문을 벗어난 a값은 ${a}<br>`); error

for(let a=(2*5); a>=1; a-=2){
	document.write(`a값은 ${a}<br>`);
}

document.write('<br>');
for(let a=1; a<=3; a++){
	document.write(`a값은 ${a}&nbsp;&nbsp;`);
	for(let b=1; b<=4; b++){
		document.write(`b값은 ${b}&nbsp;&nbsp;`);
	}
	document.write('<br>');
}

document.write('<br>');
for(let a=1; a<=10; a++){
	if(a === 3)continue;
	if(a === 6)break;
	document.write(`a값은 ${a} `);
}
</script>
<h1>문제</h1>
<script type="text/javascript">
//문1) 1~100 사이의 정수 중 3의 배수의 합과 갯수 출력
let cnt=0, sum=0;
for(let i=1; i<101; i++){
	if(i % 3 == 0){
		cnt++;
		sum += i;
	}
}
document.write(`문제 1: 합은 ${sum}, 개수는 ${cnt} <br><br>`);



//문2) 1~1000 사이의 정수 중 2의 배수이나 5의 배수가 아닌 수의 합 출력
//조건 : 숫자가 100을 넘으면 작업 중지
let hap=0;
for(let i=1; i<=1000; i++){
	if(i % 2 == 0 && i<=100){
		if(i % 5 != 0){
			hap += i;
		}
	}
}
document.write(`문제 2 : 합은 ${hap}<br><br>`);

//문3) 2 ~ 9단 까지의 구구단 출력. (table tag를 사용. border='1')
//조건 : 각 단은 행으로 구분
//조건 : 짝수 단은 노랑으로 배경을 채움. style 적용(인라인 방식)

for(let i=2; i<=9; i++){
	if(i % 2 ==0){
		document.write(`
				<table style="border: 1px solid black; background-color: yellow; width:75%;">
					<tr>`);
		}else{
			document.write(`
					<table border='1' width='75%'>
						<tr>`);
			}
	for(let j=1; j<=9; j++){
						document.write(`<td style="border: 1px solid black;">${i} * ${j} = ${i * j}</td>`);
	}
					document.write(`</tr>
				</table>`);
}



</script>

</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>반복문 while</h2>
<script type="text/javascript">
let a = 1;
while(a <= 5){
	document.write("반복<br>");
	a++;
}
document.write(`<br>반복문 탈출 후 a : ${a} `);

document.write(`<br>`);
let b = 10;
do{
	document.write(`<br>최소 1회 실행`);
	b++;
}while(b <= 5);

</script>
<br>별도 작성된 js 문서 읽기<br>
<script type="text/javascript" src="js/js04.js">
</script>
<hr>

<script type="text/javascript">


let k = 0;
while(k <= 10){
	k++;
	if(k === 3 || k === 5) continue;
	document.write(`k : ${k}&nbsp;&nbsp;`);
	if(k === 7) break;
}

document.write("<p>");
while('true'){
	let nai = +prompt("나이 입력 : ", "0");
	nai = nai - nai % 10;
	//document.write(`나이는 ${nai}대`);
	console.log(`나이는 ${nai}대`);
	let result = confirm('계속 할까요?');
	if(result === false) break;
}

alert('여기까지~~~');
</script>
</body>
</html>

 

자바스크립트 파일 따로 만들어서 참조하기

/**
js 별도 작성 
 */

let i = 0, tot = 0;
do{
	i++;
	tot += i;
}while(i < 10);

document.write(`<br>합은 ${tot}`);

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>배열</h2>
여러 개의 기억장소에 대해 대표명(배열명) 하나만을 부여하고.
배열명[첨자] 형태로 각 기억장소를 구분. 반복처리가 효과적<br>
<br>형식 : 배열명 = new Array();
<hr>
<script type="text/javascript">
let aa = new Array();
aa[0] = 10;
aa[1] = 10.5;
aa[3] = '결과는';
aa[4] = "안녕";
aa[5] = true;
aa[6] = {kbs:9, sbs:5};	//json format

document.write('<br>');
document.write(typeof aa, "<== 보이죠 참조형 <br>");

let i1=3;	// 첨자 변수로 사용할 목적
document.write(`${aa[i1]} aa[0] : ${aa[0]} aa[1] : ${aa[1]} 전체 크기는 ${aa.length}`);
// length : prototype member field
document.write('<br>', aa[2]);
document.write('<br>', aa[4], aa[5], aa[6].kbs, aa[6]['sbs']);

document.write('<br>');
let bb = new Array(100, 200, 300);	// 선언과 함께 초기치 부여
document.write(`bb[0] : ${bb[0]} bb[1] : ${bb[1]} bb[2] : ${bb[2]} 전체 크기는 ${bb.length}`);

document.write('<br>');
let cc = [];	// 비어있는 배열 선언
cc[0] = 'tom';
cc.push(23);	// prototype method
cc.push('seoul');
cc.push(82, 1234, 5678);
cc[99] = 'wow';
document.write(cc[0], ' ', cc[1], ' ', cc[2], ' ', cc[3], ' ', cc[4]);
document.write(`cc 배열의 크기는 ${cc.length}`);

document.write('<br>');
let dd = new Array();	// 배열 선언 후 for를 통해 입출력
for(let m=0; m<10; m++){	// 입력
	dd[m] = m + 1;
}

for(let m=0; m<10; m++){	// 출력
	document.write(dd[m] + " ");
}

document.write('<br>');
let animal = ['토끼', '사슴', '침팬지'];
for(let ani=0; ani< animal.length; ani++){
	document.write(animal[ani] + " ");
}


</script>

</body>
</html>

'JavaScript' 카테고리의 다른 글

자바스크립트 돔(DOM)  (1) 2024.07.24
자바스크립트 폼(form)과 부트스트랩(bootstrap) 활용  (0) 2024.07.24
자바스크립트 이벤트(javascript event)  (4) 2024.07.24
자바스크립트 함수(Arrow 함수, 재귀함수)  (1) 2024.07.24
자바스크립트 배열과 함수  (2) 2024.07.24

'JavaScript'의 다른글

  • 현재글자바스크립트 문법 배우기

관련글

티스토리툴바