JavaScript 탄생 배경
1990년대 초반, 그 당시 사용자와 상호작용 가능한 Web을 원했음.
html 요소를 조작가능한 프로그래밍 언어가 필요했음.
사용자의 이벤트에 반응하여 상호작용하는 웹을 만들기 시작.
LiveScript
넷스케이프에서 만든 언어. 넷스케이프 네비게이터 프로그램(브라우저) 에서 동작하는 언어임
네비게이터 내에 LiveScript 엔진을 가지고 있고, 개발자가 LiveScript 으로 만든 웹페이지를 네비게이터 에서 띄우면 엔진이 해석해서 보여준다. 이후, 언어의 유명세를 위해 java 언어가 유명하다는 것에 따라 LiveScript ⇒ JavaScript 로 이름을 변경한다. (JavaScript 는 Java 라는 이름만 따온것일뿐 다른 부분에서는 전혀 상관없다.)
후에 인터넷 익스플러러 IE가 등장하였는데, IE 는 Jscript 라는 JavaScript 와 유사하지만 일부는 다른 Jscript 엔진을 사용하고 있었고, IE 브라우저 점유율이 높아지면서 ECMAScript의 표준화를 자기들 마음대로 지키지 않음. ⇒ 이때 웹개발 생태계는 혼돈의 시대
jQuery
개발자들이 일일이 브라우저를 대응하지 않도록 인터페이스를 지원하는 라이브러리
그러다가 2008년에 강력한 JS 엔진을 탑재한 크롬의 등장!!
이때부터 모든 브라우저 들이 ECMAScript 표준화에 동참하기 시작했다.
이제 jQuery 잘안쓴다. 차라리 JS 공부하는게 100배 낫다.
JS → Web API(브라우저에서 제공) → HTML 조작
html 요소를 조작가능한 프로그래밍 언어가 필요했음
사용자의 이벤트에 반응하여 상호작용하는 웹을 만들기 시작
JS 초간단 기본
자바스크립트 사용법
Html 에서..
- 외부 방식 : <script src="파일경로" /> : script 태그안에 src속성에 자바스크립트 파일 경로 삽입
- 내부 방식 : script 태그 안에 Javascript 코드 사용
<script>
javascript~
</script>
이렇게 삽입된 자바스크립트 코드는 HTML 문서의 <head>태그나 <body>태그, 또는 양쪽 모두에 위치할 수 있습니다.
<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" />
<link rel="stylesheet" href="style.css" />
<script src="main.js" defer></script> // 요기에 JS 파일 경로 삽입
<title>First App</title>
</head>
자바스크립트의 출력
console.log
콘솔 화면에 메시지를 출력합니다.
console.log('Hello!!!');
console.log('Hello@@@', 'world!', 'javascript');
console.log('안녕');
alert
브라우저에서 경고창을 띄웁니다.
alert('Hello Javascript!');
Tips
문자열 작성시
- html, css ⇒ “” 큰따음표 사용 하라
- js ⇒ ‘’ 작은 따옴표 사용하라
그 이유는 js에서는 “” , ‘’ 가 서로 구별되어 사용되지만, html,css 의경우 서로 구별안됨.
주석
- // - 한 줄 주석
- /* javascipt code */ - 긴 줄 주석
숫자표현, 문자표현, 세미콜론
- 숫자 - 23123
- **문자 - 싱글쿼트('helo')** 더블쿼드("hello") 로 표현
- 세미콜론(;) - 명령문 끝
이벤트
- HTML 요소에서 발생한 사건을 말합니다.
자바스크립트는 대문자, 소문자를 구분한다.
var javascript = 10; // 변수 javascript와 JavaScript는 서로 다른 두 개의 변수로 인식됨.
var JavaScript = 20;
리터럴(literal)
리터럴은 직접 표현되는 값 그 자체를 의미합니다.
다음 예제에서 등장하는 값들은 모두 리터럴입니다.
예제
12 // 숫자 리터럴
"JavaScript" // 문자열 리터럴
'안녕하세요' // 문자열 리터럴
true // 불리언 리터럴
'웹개발 > 자바스크립트' 카테고리의 다른 글
| JavaScript - 02 기본타입 (0) | 2024.10.23 |
|---|