[JavaScript] 자바스크립트 기초 정리

an_apricot__ 2021. 5. 18. 10:12

2021. 5. 18. 10:12

📌 자바스크립트의 특징

객체 기반의 스크립트 언어
브라우저에서 실행되는 언어
대소문자를 구분함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Alert 예시</title>
<script>
    window.alert("안녕하세요 반갑습니다 ~");
    // window 생략 가능: alert("안녕하세요 반갑습니다~");
</script>
</head>
<body>
</body>
</html>

📌 getElementById

특정 id를 가진 HTML 요소에 값을 입력할 때 사용
같은 id를 가진 요소에 값을 입력하면 마지막 값만 적용됨

🚫 잘못된 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script>
        document.getElementById("demo").innerHTML = 10 * 10;
    </script>
</head>
<body>
    <p id="demo"></p>
</body>
</html>

에러 발생: <body>가 로드되기 전에 <script>가 실행되어 demo 요소를 찾을 수 없음

✅ 올바른 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        document.getElementById("demo").innerHTML = 10 * 10;
    </script>
</body>
</html>

id를 사용하는 <p> 태그가 먼저 로드된 후 <script>가 실행되어 정상 작동

📌 자바스크립트 변수 및 데이터 타입

변수: 데이터 타입을 따로 선언할 필요 없음 (var, let, const 사용)
데이터 타입: 숫자, 문자, 오브젝트 타입

📌 변수와 오브젝트의 차이

항목	저장 가능한 값	사용 예시
변수	하나의 값	let age = 25;
오브젝트	여러가지 값	let person = {name: "John", age: 25};

📌 이벤트(Event)

이벤트	설명
onchange	HTML 요소에 변경이 일어났을 때
onclick	HTML 요소를 클릭했을 때
onmouseover	HTML 요소에 마우스를 올렸을 때
onmouseout	HTML 요소에서 마우스를 멀리 이동했을 때
onkeydown	키보드를 눌렀을 때
onload	브라우저의 페이지 로드가 완료되었을 때

🔗 추가 참고 자료

HTML DOM Events - W3Schools

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

'프론트엔드 > JavaScript' 카테고리의 다른 글

[JavaScript] Validation Check (0)	2021.05.21
[JavaScript] JSON parse (0)	2021.05.21
[JavaScript] JSON (0)	2021.05.21
[JavaScript] window.onload (0)	2021.05.20
[JavaScript] 배열 (0)	2021.05.20

Apricoding