ex01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 리스너 속성에 자바스크립트 코드</title>
</head>
<body>
<p>자바스크립트</p>
<hr>
<script>
alert('Hello, World!');
</script>
</body>
</html>
ex02.html
<!DOCTYPE html>
<html lang="" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="hello.js"></script>
</body>
</html>
ex03.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let message;
message = 'Hello';
alert(message);
let $ = 1;
let _ = 10; // 변수명에 _ 입력 가능
alert(_);
const color = 'yellow';
alert(color);
console.log('로그찍자');
color = 'blue'; // yellow가 안나옴
</script>
</body>
</html>
ex04.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let n = 123;
n = 12.345;
alert(1 / 0); // Infinity
alert("하이" / 0); // NaN
alert(12 / 2); // 6
</script>
</body>
</html>
ex05.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let str = "Hello";
let str2 = 'Hi';
let str3 = `Good!`;
let str4 = `${str2}, Tom`;
alert(str4); // Hi, Tom
let isGreater = 4 > 1;
alert(isGreater); // true
</script>
</body>
</html>
ex06.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let age = prompt('나이 입력:', 100); // default가 100
alert(`당신 나이 ${age} 야`); // 입력하고 알려주는..
let isRest = confirm('잠시 쉴까요?'); // 확인 취소 누르면 True or False 나온다.
alert(isRest);
</script>
</body>
</html>
ex07.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let value = true;
alert(typeof value); // boolean
value = String(value);
alert(typeof value); // stirng
alert("6" / "2"); // 3
let str = "123";
let num = Number(str);
alert(num);// 123
alert(Boolean(1)); // true
alert(Boolean(0)); //false
alert(Boolean("hello")); // 글자가 있으면 true
alert(Boolean("")); // false
alert(Boolean("0")); //true
</script>
</body>
</html>
ex08.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let s = "my" + "String";
alert(s); // 문자열일 경우 붙여준다.
alert('1'+2); // 하나라도 문자열이 있을 경우에는 문자 취급
alert(2 + '1');
alert(2 * '1'); // '1'을 숫자 취급
alert(2 + 2 + '1') // 41 4는 계산 1은 붙여줌
</script>
</body>
</html>
ex09.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
alert(+true); // 1이 나온다.
alert(+""); // 0이 나온다.
// +연자 붙이면 숫자로 바꿔줌 false면 0
let apples = "2";
let oranges = "3";
alert(apples + oranges); // 23
alert(+apples + +oranges) // 5 숫자로 계산하고 싶으면 +를 붙여라
</script>
</body>
</html>
ex10.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let a = 1;
let b = 2;
let c = 3 - (a = b +1);
alert(a); // 3 [2+1=3]
alert(c); // 0 [3-3=0]
let e = (1 + 2, 3 + 4);
alert(e); // 7 맨 마지막이 할당
</script>
</body>
</html>
ex11.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
alert( true == 1); // true
alert( false == 0); // true false가 1이면 false
alert( false === 0); // flase 값과 값의 종류(Data Type)가 모두 같은지 비교
alert( null == 0); // false
alert( null >= 0); // true
</script>
</body>
</html>
ex12.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let age = 18
let result = age > 18 ? true: false; // 삼항연산자 false
alert(result);
let a = null;
let b = 10;
let s = a??b; // null이거나 undifiend라면 b값을 아니면 a값이 나온다.
// 여기서는 b의 값 10이나옴
alert(s); // 10
</script>
</body>
</html>
ex13.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
for (let i = 0; i < 3; i++){
alert(i); // 0, 1, 2가 나온다.
}
</script>
</body>
</html>
ex14.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function showMessage() {
alert('안녕');
}
function sum(a,b) {
return a + b;
}
</script>
<body>
<script type="text/javascript">
showMessage();
let result = sum(1,2);
alert(result); // 3이 나옴
</script>
</body>
</html>
ex15.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function sayHi() {
alert('Hello');
}
let sayHi2 = function(){
alert('Hello2');
};
</script>
<body>
<script type="text/javascript">
let func = sayHi;
func(); // hello
sayHi(); // hello
sayHi2(); // Hello2
</script>
</body>
</html>
ex16.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
sayHi("John");
function sayHi(name){
alert(`Hello, ${name}`);
}
// let sayHi = function(name){
// alert(`Hello, ${name}`);
// }; // 에러남.. 함수 표현식
</script>
</body>
</html>
ex17.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let sum = (a, b) => a + b; // lambda
alert(sum(1, 2)); // 3
</script>
</body>
</html>
hello.js
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let sum = (a, b) => a + b; // lambda
alert(sum(1, 2)); // 3
</script>
</body>
</html>
댓글