JavaScript VS JAVA
- 아무런 관계도 없다. 문법이 같은 부분도 있지만, 거의다 틀리다.
- Web에서 이벤트 처리를 주로 한다.
- DomScript, Ajax기술 중에 자바스크립트의 기술이 70%를 차지한다.
->동적으로 다이나믹하게 보여지게 하기 위한 것
1. 사용방법
2. 데이터형, 연산, 제어 선언
3. 내장 객체, 정규 표현식
4. DHTML -> HTML(트리구조 접근방법)
5. 이벤트(중요,종류가 많다)
6. -> FORM검사(정규 표현식과 관련이 있다)
7. BOM 객체
8. 쿠키
9. CSS와 동작
10. DOMScript(문서를 트리구조로 접근) - 생성, 삭제
Flax를 쓰려면 액션스크립트가 꼭 필요한다.
java랑 javascript를 할 줄 알면 금방 배울 수 있다.
내장형
- 스크립트의 영역
->body 태그 안
<body>
<script type="text/javascript">
//메시지 출력
alert("하이 친구!!");
</script>
//링크로 메시지 출력
<a href="#" onclick="alert('정말 반가워!')">클릭</a>
</body>
행입력(태그 내 삽입)
-> <a href="javascript: alert(클릭하세요)" onmouseover="document.bgcolor='red'"
onmouseout="document.bgcolor=white"> 마우스 올리기</a>
함수형(주로 많이 사용하는 방식)
-><title>Insert title here</title>
<script type="text/javascript">
function hello() {
alert("즐거운 하루되세요.");
}
</script>
</head>
<body>
//함수형을 호출받아 버튼형식으로 출력
<input type="button" value="클릭" onclick="hello()">
</body>
-><body>
<script type="text/javascript">
//h3에 대한 내용을 출력한다.
document.write("<h3>헤더의 내용</h3>");
</script>
</body>
외부 파일
- remote.js
document.write("<h3>정말 출력되나요?</h3>");
document.write("<hr>");
<script type="text/javascript" src="remote.js">
</script>
자바스크립트 주의사항
1. 대/소문자 구별
2. 한 줄에 두 개이상의 구문을 두려면 구문 사이에 ;(세미콜론), 마지막 것은 안 해줘도 된다.
ex)alert("a"); alert("b")
3. 한 개의 구문을 한 줄에 못할 경우, ( _ underline)이용
ex)document.write_
(" aaa.......... ");
4. 문자열 표시는 " "(따옴표)이용, 문자열 안에 문자열은 ' '(홀따옴표)이용
ex)"javascript:alert('클릭하세요')"
5. " "(따옴표)를 출력해야 할 경우
ex)\", \\, \n (역슬래쉬 사용)
자바스크립트 프로그래밍
변수와 데이터형(3가지)
- 자바스크립트는 데이터형에 엄격하지 않다.
1. number(숫자형)
2. boolean(논리형)
3. string(문자열형)
변수 선언할 때는 꼭 var를 써야한다.
->var a;
->a = 10;
<body>
<script type="text/javascript">
var answer;
//숫자 42가 출력
answer = 42;
document.write("answer ="+answer+"<br>");
//문자열 정답은 42입니다. 가 출력
answer = "정답은 42입니다.";
document.write("answer ="+answer+"<br>");
</script>
</body>
전역변수와 지역변수의 이름이 같으면 지역변수가 실행이 된다.
전역변수와 지역변수의 이름은 항상 틀리게한다.
주석문은 자바와 같다.
함수
- 앞에 function을 꼭 붙여준다.
- 인자들은 함수 내 지역변수처럼 사용된다
prompt
- 입력 창, 입력한 값이 해당하는 데이터에 들어간다
parseInt
- 문자열을 정수형으로 바꿔주는 함수
eval(a)
- a를 계산하고 결과를 리턴한다
escape
- url를 데이터를 주고 받고할 때, 글자가 깨지는 것에 사용
객체
- 자바스크립트에선 프로퍼티와 메소드라 한다
- 프로퍼티는 변수의 형태, 메소드는 함수의 형태를 갖고 있다.
코어 객체
- 내장 객체
- 클라이언트, 서버를 막론하고 어디서나 사용 가능한 객체
Date
- 생성방법
1. 현재 시간 값을 가지기
2. 시간 값을 string값으로 전달
getDay() - 요일을 수 값으로 리턴, 일요일=0, 토요일=6
toGMTString() - 객체가 가진 날짜를 GMT로 리턴
String
- slice(1, 2) : 1인덱스에서 2인덱스 앞까지 서브스트링을 리턴,
2인덱스가 없으면 1인덱스부터 끝까지 출력
->a = new String("Client-Side JavaScript Guide");
//문자열 16번째 자리에서부터 18번째 전까지 (16~17)
document.write(a.slice(16, 18), "<br>");
//16번째부터 출력
document.write(a.slice(16), "<br>");
- split : 분리자로 스트링을 서브스트링으로 분할하여 배열을 생성하고 리턴
//sub에 String a를 " "를 기준으로 split한 것을 넣었다
var sub=a.split(" ");
//각 배열에 있는 문자열의 수를 출력한다.
for(var i=0; i<sub.length; i++) {
document.write("sub", i, "=", sub[i], "<br>");
}
Array
- 배열 객체, 인덱스는 0부터 시작
-> var arr = new Array("1", "2", "3");
join : 배열의 모든 원소를 연결하여 하나의 스트링을 리턴
slice
Math
random()
for-in문
- 객체의 각 프로퍼티나 배열의 각 원소에 접근하기
//object에 프로퍼티를 x에 넣어준다.
for(var x in object) {
document.write(x, "<br>");
}
with문
- 객체 이름 생각하기
DHTML 객체 모델
- DOM 객체(Document Object Model)
- html문서를 제어하기 위한 객체들로 웹에서 실행되는 객체
- 목적
1. HTML 문서의 모든 요소들을 제어
- HTML 문서 내의 모든 태그들을 객체화하여 HTML 문서의 모양, 속성, 스타일 등 제어 가능
2. 즉각적인 HTML 문서의 제어
- 원하는 순간에 HTML 문서 요소 제어
3. 모든 태그들의 사용자 이벤트 처리 가능
4. HTML 문서의 본문이 서로의 관계에 의해 동적 변경 가능
- HTML에서의 객체들
<HTML><HEAD><TITLE><BODY>
객체 모델은 HTML문서를 객체화시킨다.
- window, document, form
1. Document객체 - html태그
2. 내장객체 - 코아 -> String, Array, Math, Date
- Bom -> window(Object격, 최상위객체), document
3. 임시객체 - event
4. 속성객체
5. 기타객체
DHTML
객체의 계층구조
- WINDOW
- DOCUMENT
- HTML
- HEAD
- TITLE
- BODY
- H1
- SPAN
- FORM
- TEXT
- BUTTON
- HR
style객체
- html태그의 style에 쓰는 것처럼 사용할 수 있다.
객체에 접근하기
1. id로 접근하기(가장 많이 사용하는 방식)
<img id="a" ...>
<div id="a" ...>
DOM에서 사용하는 방법(크로스 브라우징을 위해 이런 식으로 해야한다.)
//obj에 객체가 들어감->obj.style가능해진다.
var obj = document.getElementID("id이름")
//이 구문에서 firstP.sp.프로퍼티로는 sp를 찾을 수 없다.
<p id="firstP">
<span id="sp">
</span>
</p>
2. this를 이용하여 접근하기
- this는 현재 자기자신의 객체를 가리키고 있다.
//obj는 p태그의 스타일을 바꿔주게 된다.
function func(args) { ... }
<p ... onClick="func(this)">
obj.style...;
해당하는 form이름에서만 'fo.txt.프로퍼티'가 가능하다.
- form에선 id와 name이 다이렉트 접근이 가능하다.
html문서를 왜 객체화할까?
- 제어하기 위해서, 접근하기 위해서
'Study > JavaScript' 카테고리의 다른 글
| [javaScript] Document (0) | 2019.05.16 |
|---|---|
| [javaScript] Form (0) | 2019.05.16 |
| [javaScript] 정규표현식, 이벤트, 이벤트핸들러, 이벤트 버블 실습 (0) | 2019.05.16 |
| [javaScript] 정규 표현식, 이벤트, 이벤트 핸들러, 이벤트 버블 (0) | 2019.05.16 |
| [javaScript] 기초 실습 (0) | 2019.05.16 |
