변수 선언 초기화 재할당(재사용), 재선언 // var 변수명; // let 변수명 = 값;
// var a ; //선언 // a = 1; //초기화 // a = '가나다'; //재할당
// var a = 5; //재선언
// var => 전역: 재선언 ,재할당 // let => 지역 : 재할당 // const => 상수 : 둘 다 안 됨.
// 호이스팅(Hoisting) : // 해당 지역에서 모든 선언부를 가장 최상단으로 // 강제로 끌어올리는 방법 // 호이스팅이 가능한 경우 : var변수 선언, 선언적 함수로 선언하는 경우만 가능
// var 예약어 사용
// undefined은 변수를 선언하고 값을 할당하지 않은 상태, // null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. // 즉, undefined는 자료형이 없는 상태이다.
// undefined : 어떠한 값이 할당되었는지 알 수가 없다. 할당이 되어있지 않은 값 // null : 값이 비어있다라는 의미, 비어있는 값 // '' 또는 "" : 빈 문자열값
variable.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변수 선언 및 사용</title>
<script>
// 변수 선언 초기화 재할당(재사용), 재선언
// var 변수명;
// let 변수명 = 값;
// var a ; //선언
// a = 1; //초기화
// a = '가나다'; //재할당
// var a = 5; //재선언
// var => 전역: 재선언 ,재할당
// let => 지역 : 재할당
// const => 상수 : 둘 다 안 됨.
// 호이스팅(Hoisting) :
// 해당 지역에서 모든 선언부를 가장 최상단으로
// 강제로 끌어올리는 방법
// 호이스팅이 가능한 경우 : var변수 선언, 선언적 함수로 선언하는 경우만 가능
// var 예약어 사용
// undefined은 변수를 선언하고 값을 할당하지 않은 상태,
// null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다.
// 즉, undefined는 자료형이 없는 상태이다.
// undefined : 어떠한 값이 할당되었는지 알 수가 없다. 할당이 되어있지 않은 값
// null : 값이 비어있다라는 의미, 비어있는 값
// '' 또는 "" : 빈 문자열값
box;
document.write(box + "<br>");
var box = '빈';
document.write(box, "<br>");
var box = null;
document.write(box, "<br>");
box = 30;
document.write(box + "<br>");
box = "재선언 가능";
document.write(box + "<br>");
// [let예약어] 사용 - 동일한 이름으로 재선언 불가, 재할당까지만 가능
let a = true;
document.write(a, "<br>");
a = true;
document.write(a, "<br>");
// let a = "재선언 불가";
a="재할당 가능"
document.write(a, "<br>");
// [const예약어] 사용
// 선언만 하는 것은 불가
// const b;
const b= "상수";
// const b= "재선언 불가";
// b= "재할당 불가";
document.write(b,"<br>");
</script>
</head>
<body>
</body>
</html>
variable02.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>변수 선언 및 사용</title>
<script>
// 자바 스크립의 함수 형식\선언적 함수 선언 형식
// function함수명(매개변수명1, 매개변수명2, ....){
// 실행문 ;
// ....
// [return값;]
// }
// 함수 호출 형식
// 함수명(매개인자값1, 매개인자값2, ....);
function pClick() {
// innerText(값자리에 있는 경우) :
// 해당 엘레먼트의 자식 요소 중 텍스트를 가져온다.
// 복수로 가져오는 경우, 인덱스 번호 지정해야한다.
var y = document.getElementByClassName("pclass")[0].innerText;
// innerText(공간 자리에 있는경우):
// inner 해당 엘리먼트의 자식 요소를 싹 다 지우고
// Text 해당 값을 텍스트를 넣는다.
// document.getElementByClassName("pclass")[0].innerText = 555;
-
// var y = document.getElementByName("pname")[0].innerText;
alert("y: " + y);
document.write("다시 쓰기 <br>"); //innerHTML 숨어있음
document.write("답: " + y);
}
</script>
</head>
<body>
<h2>변수 선언 및 사용</h2>
<p>var키워드는 지역의 의미가 없다.</p>
<!-- onclick->인라인 -->
<p
id="demo"name="pname"class="pclass"onclick="pClick()"style="cursor: pointer;"
>
클릭하세요.
</p>
<script>
var x = 10;
document.write("전역var1 : " + x + "<br>");
{
var x = 2222;
document.write("지역var: " + x + "<br>");
}
// innerHTML: 해당 요소안에 html내용으로 넣는다.
// 요소제거 안 되고 안의 데이터만 변경됨.
document.getElementById("demo").innerHTML = x;
document.write("전역var2: " + x + "<br>");
</script>
</body>
</html>
variable02.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>변수 선언 및 사용</title>
<script>
// 자바 스크립의 함수 형식\선언적 함수 선언 형식
// function함수명(매개변수명1, 매개변수명2, ....){
// 실행문 ;
// ....
// [return값;]
// }
// 함수 호출 형식
// 함수명(매개인자값1, 매개인자값2, ....);
function pClick() {
// innerText(값자리에 있는 경우) :
// 해당 엘레먼트의 자식 요소 중 텍스트를 가져온다.
// 복수로 가져오는 경우, 인덱스 번호 지정해야한다.
var y = document.getElementByClassName("pclass")[0].innerText;
// innerText(공간 자리에 있는경우):
// inner 해당 엘리먼트의 자식 요소를 싹 다 지우고
// Text 해당 값을 텍스트를 넣는다.
// document.getElementByClassName("pclass")[0].innerText = 555;
-
// var y = document.getElementByName("pname")[0].innerText;
alert("y: " + y);
document.write("다시 쓰기 <br>"); //innerHTML 숨어있음
document.write("답: " + y);
}
</script>
</head>
<body>
<h2>변수 선언 및 사용</h2>
<p>var키워드는 지역의 의미가 없다.</p>
<!-- onclick->인라인 -->
<p
id="demo"name="pname"class="pclass"onclick="pClick()"style="cursor: pointer;"
>
클릭하세요.
</p>
<script>
var x = 10;
document.write("전역var1 : " + x + "<br>");
{
var x = 2222;
document.write("지역var: " + x + "<br>");
}
// innerHTML: 해당 요소안에 html내용으로 넣는다.
// 요소제거 안 되고 안의 데이터만 변경됨.
document.getElementById("demo").innerHTML = x;
document.write("전역var2: " + x + "<br>");
</script>
</body>
</html>
safd
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변수 선언 및 사용</title>
<script>
let x = 10;
document.write("전역x1: " + x + "<br>");
{
let x = 2;
document.write("전역x: " + x + "<br>");
}
// document.getElementById("demo").innerHTML = x;
//javascript는 함수에 묶어놓지 않은 이상 기술된 순서대로..
//생성되지 않은 값에 대한 호출이 제한적
document.write("전역x2: "+ x + "<br>");
</script>
</head>
<body>
<h2>변수 선언 및 사용</h2>
<p>let키워드는 지역의 의미가 있다.</p>
<p id="demo" style="border:1px solid #000;"></p>
<script> document.getElementById("demo").innerHTML = x;</script>
</body>
</html>
variable04.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h2>변수 선언 및 사용</h2>
<p>const키워드는 지역의 의미가 있다.</p>
<p id="demo" style="border: 1px solid #000"><span>하하하</span></p>
<script>
const x = 10;
document.write("전역x1: " + x + "<br>");
{
const x = 2;
document.write("지역x: " + x + "<br>");
}
document.write("전역x2: " + x + "<br>");
let i = "<span>50</span>";
// document.getElementById("demo").innerHTML = i;
// document.getElementById("demo").innerHTML = x;
document.getElementById("demo").innerText = i;
// id="demo"에 있는 <span>마저 지워버림
</script>
</body>
</html>
