1) Javascript
html: 틀, 골격, 사람자체
css: 디자인, 옷
javascript: 움직임, 동작, 댄스, 축구 등
ex) 회원가입시 숫자란에 문자 입력시 js로 처리 가능
프로그래밍에서 동작(동적웹페이지)을 담당
2) js특징:
html 태그에 접근 가능, 하지만 접근할 수 있는 html 태그가 한정된 것이 기본
웹페이지는
window > document > form > img > input
순서로 되어있음
html은 w3c에서 관장
js는 ECMA(Europe Computer Manufactor Association)에서 관장 (ECMAScript)
그래서 자바스크립트는 접근할수 있는 태그가 한정되어 있음
<img> <input>에는 접근 가능
<body> <h1> <div>는 접근 불가
- 모든 태그에 접근하는 DOM
DOMScript document object model
javascript + DOM = dhtml(Dynamic html)
3) javascript의 역사:
js의 처음 이름은 livescript
(처음엔 netscape navigator 브라우저에서 실행되도록 자바문법을 참고하여 만들어짐)
(참고) netscape navigator를 계승한 것이 mozilla firefox
netscape가 Breden Eich를 영입하여 개발
추후 sun microsystems과 공동으로 개발하면서 javascript로 명명
자바스크립트는 소스코드를 web browser가 해석하여 run 하는 script 언어 ECMA
현재 HTML5에서 사용하는 script language가 바로 자바스크립트
4) 자바스크립트의 장단점
장점: 서버의 부하를 줄임
단점: 소스코드가 노출됨, 보안에 약할 수 있음
5) <script>태그 사용법
기본적으로 html문서내에 작성되어 실행된다 (마치 .jsp = html + java)
html + js 형식으로 사용
단 script 내에서의 html문은 js+html
<script>태그 위치
head, body에서 사용 가능
<script>가 여러번 나와도됨
<script> 사용법
1. body에 작성
2. head에 작성하고 body에서 call
3. 외부 .js 파일을 call
4. script 없이 html에서 call
ex)
<body>
<script>
alert("Hello js");
document.write("<h1>Hello js</h1>");
</script>
</body>
6) js 객체종류 3가지
1. user defined object(사용자 정의 객체): 정의 -> 생성 -> 사용
정의:
function Test() {}
Test = function() {}
2. 내장객체: 생성 -> 사용
Date d = new Date()
3. 브라우저 객체(BOM Browser Object model) : 사용
window.location="http://www.naver.com"
객체.속성="값"
7) 자바스크립트 문법(flexible)
ex) window.alert()
1. 대소문자 구분함
alert() O ALERT() X
html은 안가림 <html> O <HTML> O
2. "" '' 둘다 사용 가능 근데 맞춰줘야됨
3. ; 는 써도되고 안써도됨, 하지만 문장연결할때는 무조건 써야됨
전부 작성하는 것이 좋음
4. 주석은 자바와 같음
5. 변수 자료형은 무조건 var
var aa = 30;
var aa = "ondal";
const: 값 변경 불가, 무조건 초기값 필요
let: 값 변경 가능
변수의 자료형은 생략 가능함
bb = "babo";
단 기본적으로 var 있으면 지역변수, 없으면 전역변수
근데 또 function 밖에서 선언한건 전역변수임
개발할땐 무조건 선언시 var 사용하는 것이 좋음, 해도 오류는 안난다 라는 것만 기억하기
6. 선언위치 및 의미
var aa; //전역(함수 밖에서 선언)
function test(){
aa = 50; //전역
var bb = 100; //지역
}
7. 객체 선언
var aa = {}; //객체
var bb="tom"; //변수
8. 외부 .js 파일 사용하는 법
<script src="test.js" charset="utf-8"></script>'[front-end] > javascript' 카테고리의 다른 글
| DOM으로 html에 접근 후 변경하는 방법 (0) | 2021.01.27 |
|---|---|
| 주의할점 (0) | 2021.01.27 |
| DOM으로 html 태그에 접근하기 getElementById, querySelector (0) | 2021.01.27 |
| 자바스크립트 함수 (0) | 2021.01.13 |
| 자바스크립트 배열 (0) | 2021.01.13 |