src.html
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<img src="../img/pic_bulboff.gif" alt="">
<div>
<button onclick="bulon()">불켜기</button>
<button onclick="buloff()">불끄기</button>
</div>
<script>
function buloff() {
document.querySelector('img').src = '../img/pic_bulboff.gif';
// 콘솔에 src 출력하기
console.log(document.querySelector('img').src= '../img/pic_bulboff.gif');
}
function bulon() {
document.querySelector('img').src = '../img/pic_bulbon.gif';
// 콘솔에 src 출력하기
console.log(document.querySelector('img').src= '../img/pic_bulbon.gif');
}
</script>
</body>
</html>
variable.html
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<script>
// let admin;
// let name;
// 1) 변수 선언, 아직 할당 X
// name = 'Jone';
// 2) 할당 / 숫자는 그냥 사용 / 문자는 따옴표, 쌍따옴표 다 가능
// admin = name;
// 3) name의 값을 admin에 복사
// alert(admin);
// 4) admin 의 값을 alert 창에 띄우기, Jone이 출력되어야 함
// const userName2 = 'green';
// const는 변수 선언하면 오류가남, 할당도 같이 해줘야됨
// let 은 재할당 가능 ★, 나머지는 재할당 불가
// let은 재선언 불가
// var의 문제 ) 변수명을 재선언 가능, 다른 값으로 덮어씌움
// ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// "use strict";
// let name1 = 'abc';
// let name1 = 'aaa';
// 재 선언 불가 ★
"use strict";
// 엄격 모드 ↑
var name1 = 'abc';
var name1 = 'aaa';
// 재 선언 가능 ★, 개발자 입장에선 곤란함
</script>
</body>
</html>
variable_ex.html
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<h1>자바스크립트 내용 입력하기</h1>
<p></p>
<script>
// console.log(document.querySelector('h1').innerHTML);
// 같은 방식 ↑ ↓
// h1Text = 변수
let h1Text = document.querySelector('h1').innerHTML;
console.log(h1Text);
let pNode = document.querySelector('p');
pNode.innerHTML = '안녕하세요';
</script>
</body>
</html>
prompt.html
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<script>
// 1) 입력창
// prompt('나이를 입력하세요.');
// 2) 입력 받은 값을 담을 그릇
// " = " 대입 연산자
// 오른쪽에 있는게 왼쪽에 담긴다.
let age = prompt('나이를 입력하세요.')
// age 를 숫자형으로 변경한 값을 result 에 할당
let result = Number('age');
// console.log(age);
// console.log(typeof age);
// age 는 무슨 타입이냐 ? string 으로 나옴
console.log(result);
console.log(typeof result);
// "prompt" 로 입력 받는 값은 무조건 문자취급
// 문자형을 숫자형을 변경가능 number 사용
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
[JavaScript] 조건문4 (0) | 2023.03.10 |
---|---|
[JavaScript] 조건문3 (0) | 2023.03.10 |
[JavaScript] 조건문1 (0) | 2023.03.09 |
[JavaScript] 정규표현식 (0) | 2023.03.09 |
[JavaScript] 배열3 (0) | 2023.03.09 |