1. JavaScript 시작하기
- html 문서를 열고, head 태그 안에 script 태그를 넣고 적는다.
- JS는 웹 브라우저가 실행시킨다.
1-1. alert() : 팝업창 띄우기
<script>
alert("Hello World~");
</script>
1-2. document.write() : 스크립트로 글 쓰기
- head의 script로 쓴 것이 먼저 출력되고, body에서 쓴 것이 다음에 출력된다.
- 문자열 이어붙이기가 가능하다.,
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.write("<h1>안녕하세요~</h1>");
</script>
</head>
<body>
<h1>안녕하세요!!</h1>
</body>
</html>
2. 프로그래밍 언어의 형태
- 컴파일 언어 : 컴퓨터가 컴파일러를 거쳐 기계언어로 모두 바꾸고 실행한다, 무언가 하나 에러가 있으면 컴파일조차 안됨.
- 인터프리터 언어 : 컴퓨터가 1줄씩 위에서부터 해석하면서 출력, 잘못된 언어는 스킵하고 다음 것을 출력함
3. js 파일 만들기
html을 작업하는 폴더 안에 JavaScript를 관리하는 폴더를 하나 만들고, 그 곳에 .js 파일을 만들고 작업한다.
- html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/hello.js">
</script>
</head>
<body>
<h1>안녕하세요!!</h1>
</body>
</html>- js
alert("Hello World");
document.write("<h1>안녕하세요~~</h1>");4. 웹 브라우저에서 Debug하기
4-1. 디버깅 하는 방법
- 개발자 모드 (F12)에서 js 한 줄을 클릭하고 새로고침
- F10을 눌러가면서 1줄씩 실행
4-2. 콘솔에 출력하기
- JS
console.log("Hello World");
console.log("JavaScript");
console.log("Console Test");- 브라우저에서 소스를 한 줄 잡고 F10 눌러가면서 확인
5. prompt(), confirm()
5-1. prompt(), confirm()을 alert()로 알리기
<script>
alert("Hello JavaScript");
var inputPrompt = prompt("출력 창입니다", "문장을 입력하세요");
alert(inputPrompt);
var inputConfirm = confirm("진행하겠습니까?");
alert(inputConfirm);
</script>-
prompt() : 출력창
-
confirm() : 확인은 true, 취소는 false
5-2. prompt(), confirm()에서 받은 변수의 값을 document.write()로 출력하기
var inputPrompt = prompt("출력 창입니다", "문장을 입력하세요");
document.write(inputPrompt);
var inputConfirm = confirm("진행하겠습니까?");
document.write(inputConfirm);
5-3. 점수를 입력받고 출력하기
var inputKor = prompt("국어 점수", "국어 점수를 입력하세요");
document.write("<h1>국어 점수 : " + inputKor + "</h1>");
var inputMath = prompt("수학 점수", "수학 점수를 입력하세요");
document.write("<h1>수학 점수 : " + inputMath + "</h1>");
- prompt로 받으면 문자열로 출력된다.
- 따옴표는 'aaa'도, "aaa"도 모두 문자열로 처리한다.
document.write("<h1>총점 : " + (inputKor + inputMath) + "</h1>");
// 문자열로 출력
document.write("<h1>총점 : " + Number(inputKor) + Number(inputMath) + "</h1>");
// Number(숫자)를 이용하여, 문자열을 숫자로 변환한다.
디버깅용 코드
var inputKor = prompt("국어 점수", "국어 점수를 입력하세요");
console.log(inputKor);
document.write("<h1>국어 점수 : " + inputKor + "</h1>");
var inputMath = prompt("수학 점수", "수학 점수를 입력하세요");
console.log(inputMath);
document.write("<h1>수학 점수 : " + inputMath + "</h1>");
var inputEng = prompt("영어 점수", "영어 점수를 입력하세요");
console.log(inputEng);
document.write("<h1>영어 점수 : " + inputEng + "</h1>");
var sum = Number(inputKor) + Number(inputMath) + Number(inputEng);
var avg = sum / 3;
document.write("<h1>총점 : " + sum + "</h1>");
document.write("<h1>평균 : " + avg + "</h1>");
6. JavaScript의 자료형
- string : "String",'String'
- Number : 123, 12.3
- boolean : true, false
- function(){}
- object : {}
- undefined : 값을 미지정함, 값을 할당하지 않은 상태 (null과는 다름)
var str = "가나다라마바사";
console.log(str);
console.log(str + " " + 'ABCDE');
var num = 1234;
console.log("num : " + num);
var double = 3.14;
console.log(double);
var b1 = true;
var b2 = false;
console.log(b1 + " " + b2);
- 형 변환에 구애받지 않는다. var에 담아서 다양하게 쓸 수 있다.
- JavaScript는 var 변수 안에 실제로는 object의 주소를 담기 때문에, 유연한 코딩을 할 수 있다.
var name1 = 100;
document.write("<h1>" + name1 + "</h1>");
var name2 = 200;
name2 = 300;
document.write("<h1>" + name2 + "</h1>");
// 문자형
var varStr = "ABCDEF";
console.log("varStr : " + varStr);
console.log(typeof(varStr));
// 숫자형
var varNum = 123456;
console.log("varNum : " + varNum);
console.log(typeof(varNum));
// boolean형
var varBoo = false;
console.log("varBoo : " + varBoo);
console.log(typeof(varBoo));
// 함수형
var varFun = function fun() { };
console.log("varFun : " + varFun);
console.log(typeof(varFun));
// 객체형
var varObj = {};
console.log("varObj : " + varObj);
console.log(typeof(varObj));
// 미지정
var varUnd = undefined;
console.log("varUnd : " + varUnd);
console.log(typeof(varUnd));
7. 배열
7-1. 배열 선언
- 정적으로 정하지 않아도 된다.
- 자료형이 다른 배열요소를 담아도 된다. (모두 4byte 주소를 담는 참조형 객체 변수이기 때문이다.)
//크기를 지정하지 않은 배열 객체 생성
var varArr1 = new Array();
//크기를 지정한 배열 객체 생성
var varArr2 = new Array(5);
//배열 생성과 데이터저장을 동시에
var varArr3 = new Array(123, "ABC", true, function fun() { }, {}, undefined);
//배열 생성과 데이터저장을 동시에
var varArr4 = [123, "ABC", true, function fun() { }, {}, undefined];
console.log("varArr1 : " + varArr1);
console.log("varArr2 : " + varArr2);
console.log("varArr3 : " + varArr3);
console.log("varArr4 : " + varArr4);
- 요소의 길이는 (.length)
- 요소를 넣었다면 넣은 만큼 계산
- 정적으로 길이를 선언했다면 그 크기만큼 출력
7-2. 반복문으로 배열 출력하기
var arr = new Array();
arr[0] = "한국";
arr[1] = "미국";
arr[2] = "일본";
for (var i = 0; i < arr.length; i++) {
console.log("arr[" + i + "] : " + arr[i]);
}
// index
for (var i = 0; i < arr.length; i++) {
console.log("arr[" + i + "] : " + arr[i]);
}
// for~each
for (var a in arr) {
document.write("<h3> arr[" + a + "] : " + arr[a] + "</h3>");
}
7-3. 구구단 출력하기
velog, GitHub, Notion 등에 작업물을 정리하고 있습니다.