JavaScript
객체 기반의 스트립트 프로그래밍 언어
인터프리터언어 vs 스크립트언어 vs 컴파일언어
- 인터프리터언어
: 컴파일러를 거쳐서 기계어로 변환되지 않고 코드가 작성될 때마다 인터프리터가 한 줄 씩 해석해서 바로 명령어를 실행하는 언어
문법적인 오류가 있어도 실행 됨
ex) Python, R- 스크립트 언어
: 인터프리터언어에 포함 되어있음
기존에 이미 존재하는 응용 소프트웨어를 제어하기 위해 나온 언어
인터프리터 방식에 사용하기 위해 나온 것으로 응용프로그램을 어떻게 실행할 지 정함
ex) JavaScript- 컴파일 언어
반드시 기계어로 컴파일되어야만 실행시킬 수 있는 프로그래밍 언어
컴파일 시 오류가 있다면 실행도 되지 않음
ex) C, C++
Javascript 특징
- 모든 웹 브라우저에서 동일하게 동작함
- 웹 브라우저에서 실행 결과를 즉시 확인
- 다양한 용도의 프로그램 개발
- 다양한 자바스크립트 공개 API
- 다양한 라이브러리와 프레임워크
API vs 라이브러리(Library) vs 프레임워크(Framwork)
- API
응용프로그램을 만드는데필요한 연결장치, 매개체
카카오 ↔ map(api) ↔ 웹 , 중간매개체- 라이브러리(Library)
응용 프로그램 개발을 위해 필요한 기능을 모아 놓은 소프트웨어
그 기능에 대한 도구 또는 함수들의 집합
필요하면 가져다 쓰면 된다.- 프레임워크(Framwork)
응용프로그램이나 소프트웨어 구현을 수월하게 하기 위해서 제공된 소프트웨어 환경
프레임워크에 의존하여 기능을 추가하여 개발해야함
기능은 우리가 작성 환경은 제공
실습하기
<!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>
<a href="#">자바스크립트 무작정 따라하기!!!!!!!!!!!!</a>
//href안에 큰 따옴표애는 이동하고 싶은 주소나 경로를 넣어주면 됨
<br><br>
<button id="btn1">디자인바꾸기 짠!</button>  <button id="btn2">되돌리기 짠!</button>
<br>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<h1>오늘은 1/26</h1>
<p>즐거운 JavaScript 수업입니닷!</p>
<script>
//document : 현재 html문서(body안)
//querySelector : 선택자 작성
//addEventListner : 선택한 영역에 이벤트 발생할 때까지 기다리다가 발생하면 실행
//function(){} : 함수 / 메서드
document.querySelector("#btn1").addEventListener("click", function(){
document.querySelector("body").style.backgroundColor = "black"
document.querySelector("body").style.color = "white"
}) // btn1을 누르면 이벤트발생(배경색이 검정색, 글씨색이 하얀색으로 변경됨)
document.querySelector("#btn2").addEventListener("click", function(){
document.querySelector("body").style.backgroundColor = "white"
document.querySelector("body").style.color = "black"
}) // btn2을 누르면 이벤트발생(배경색이 흰색, 글씨색이 검정색으로 변경됨)
</script>
</body>
</html>결과
-
디자인바꾸기(btn1 누를때)
-
되돌리기(btn2 누를때)
더 발전하는 내 모습을 위해