Web 8일차 2-1(자바스크립트)
2022. 12. 29. 12:42ㆍ코딩배움일지/Web 구현
자바스크립트.
<script src="js/commom.js"></script>외부에서 작성해논것을 불러오기
<button onclick="helloworld()">Hello World!</button>외부
const helloworld = () => {
alert('HelloWorld');
}
오늘 한것 html
example03
<!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>Javascript 3</title>
<script src="js/commom.js"></script>
<script>
//Function 1 직접적으로 명시하면 구분하기 좋다.
function func1(){
alert('func1 - 안녕하세요.');
}
// func1();
// Function 2
// let, const
const func2 = () => {
alert('func2 - 안녕하세요');
}
// func2();
</script>
</head>
<body>
<button id="btn1">Btn 1</button>
<input style="width: 100px;"/>
<button onclick="helloworld()">Hello World!</button>
<button onclick="moveExample02()">Move 02</button>
<button><a href="./example02.html" style="text-decoration: none; text-transform: uppercase;">move 02</a></button>
<script>
// const onClickHandler = document.querySelector('#btn1');
// onClickHandler.onclick = func1;
document.querySelector('#btn1').onclick = func2;
</script>
</body>
</html>example 02
<!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>Javascript 2</title>
<script src="js/commom.js"></script>
</head>
<body>
<button onclick="back();">back</button>
<script>
// 자료형
// number, string, boolean
var num = 1000;
console.log(num);
console.log(typeof(num));
var str = 'string';
console.log(str);
console.log(typeof(str));
var bool = true;
console.log(bool);
console.log(typeof(bool));
// array, object
/*원래 안나왔다.*/
var arr = [1, 2, 3, 4, 5];
arr[2] = 10; /*데이터가 바뀌었지 주소 는 변하지 않았다. 컴퓨터는 3 과 10을 같다고 인식한다.*/
console.log(arr);
console.log(typeof(arr));
var obj = {
'name' : '홍길동',
'age' : 20
}
console.log(obj);
console.log(obj.name);
console.log(typeof(obj));
// undefined, null
console.log(typeof(cat));
var dog;
console.log(dog);
console.log(typeof(dog));
var bird = null;
console.log(bird);
console.log(typeof(bird));
// 산술연산
var a =10;
var b = 3;
console.log(a+b);
console.log(a-b);
console.log(a*b);
console.log(a/b);
console.log(a%b);
console.log(++a);
console.log(a++);
console.log(--a);
console.log(a--);
// 대입연산
var c = 5;
console.log(c = 5);
console.log(c += 5);
console.log(c -= 5);
console.log(c *= 5);
console.log(c /= 5);
console.log(c %= 5);
console.log(c); // 마지막의 연산결과 0 이 나온다.
</script>
</body>
</html>자바스크립트
const helloworld = () => {
alert('HelloWorld');
}
const moveExample02 = () => {
location.replace('./example02.html');
}
const back = () => {
history.back();
}'코딩배움일지 > Web 구현' 카테고리의 다른 글
| Web 9일차 () (0) | 2022.12.30 |
|---|---|
| Web 8일차 1-1(자바스크립트 함수) (0) | 2022.12.29 |
| Web 8일차 1(함수와 이벤트) (0) | 2022.12.29 |
| Web 7일차 3-1(자바스크립트 기본 문법) (0) | 2022.12.28 |
| Web 7일차 3(자바스크립트 기본 문법) (0) | 2022.12.28 |