자바 스크립트 첫경험!

자바스크립트

프론트엔드 개발을 집 짓는 것에 비유한다면 HTML은 기둥을 만들고 CSS는 꾸미는 역할을 하며, 자바스크립트는 여러 시설을 동작하게 한다고 할 수 있다.

기본적으로 html 파일 안에서 <scipt> ~ </script>태그를 사용해 그 안에 구현한다.

변수 선언

자바스크림트는 정적 타입 언어와는 다르게 느슨한 타입(loose typint)을 가진 언어! -> 데이터 타입 명시하지 않음

	var a;
    let b;
    const c;=

1. var

기존에 선언된 변수의 값을 덮어씀, 함수의 스코프를 기주능로 동작한다.

var a = 1;

if (isSomething()){
  var a = 2;
}

console.log(a); //2

변수를 선언한 함수 몸체 안에서만 해당 변수에 접근할 수 있다.

function foo() {
	var a = 1;
  	console.log(a);
}

console.log(a) //Uncaught ReferenceError: a is not defined

위의 경우, a를 foo()함수 안에서 선언하여 함수 스코프를 가지고 있는데, 함수 밖에서 a를 사용하여 오류가 난 상황인 것이다.

function foo() {
	for(var i = 0; i < 10; i += 1) {
		//..
    }
    console.log(i); //10
}
foo();

함수 스코프를 가지기 때문에 for 반복문 안에서 선언된 i가 foo()안에서 쓰인 console.log(i);에서 오류가 나지 않는다.

2. let과 const

var와 달리 재선언 허용하지 않으며, 블록({}) 스코프를 가진다.

{
  let a = 1;
}
console.let(a); //Uncaught ReferenceError: a is not defined

{ } 의 블록을 넘어간 곳에서 사용할 수 없기때문에, console.let(a)에서 오류가 발생한다.

function foo() {
	for(let i = 0; i < 10; i += 1) {
		//..
    }
    console.let(i); //Uncaught ReferrenceError: i is not defined
}
foo();

그래서 var에서는 가능했던 foo()안의 console.let(i)은 오류가 뜬다. for문도 {}블럭으로 묶이기 때문!

여기서 let은 값의 변경 가능, const는 불가능으로 이해하면 된다.

JS로 HTML 조작하는 법

여기서 a, b, c만 맘대로 바꿔주면 모든 걸 변경하고 조작할 수 있다.
ex.

document. getElementById('box').src = 'profile.jpg';
// html문서의 id가 box인 요소의 src을 profile.jpg로

함수 정의

button 원클릭 이벤트

<button onclink ="JS 함수()">
클릭 시 발생하는 이벤트 -> 클릭시 자바스크립트 수행
ex)

<div class = "alert-box" id="alert">
  <p id - "title">알림창임</p>
  <button>닫기</button>
</div>
<button onclink="idAlert()">버튼1</button>

<script>
	function idAlert(){
  		document.getElementById('title').innerHTML = 'ID를입력하세요.'
  		documetn.getElementById('alert').style.display = 'block';
  	}
</script>

버튼1을 누르면
"알림창임"이라는 글이 'ID를입력하세요.'로 바뀌고, 그 상태의 alert id인 div가 display = none; 에서block으로 바뀌면서 보이게 된다.