Javascript
HTML 문서에 내장되어 있다.
- 조각 소스 코드
스크립트 언어
- 인터프리터 실행
- 컴파일 필요 없음
단순
- C언어 구조 차용
- 배우기 쉽다.
1. 웹 페이지에서 자바스크립트의 역할
사용자의 입력 및 계산
- 마우스와 키보드 입력은 오직 자바스크립트로만 가능
- 계산 기능
웹 페이지 내용 및 모양의 동적 제어
- HTML 태그의 속성, 콘텐츠, CSS 프로퍼티 값 동적 변경
브라우저 제어
- 브라우저 윈도우 크기와 모양 제어
- 새 윈도우 열기/닫기
- 다른 웹 사이트 접속
- 히스토리 제어
웹 서버와의 통신
웹 애플리케이션 작성
- 캔버스 그래픽, 로컬/세션 스토리지 저장, 위치정보서비스 등
2. 자바스크립트 코드의 위치
자바스크립트 코드 작성이 가능한 위치
① HTML 태그의 이벤트 리스너 속성에 작성
② <script></script> 태그에 작성
- <head></head>나 <body></body> 내 어디든 가능
- 웹 페이지 내에 여러 번 삽입 가능
③자바스크립트 파일에 작성
자바스크립트 코드 파일 저장
- 확장자 .js 파일에 저장
- <script> 태그 없이 자바스크립트 코드만 저장
여러 웹 페이지에서 불러 사용
- 웹 페이지마다 자바스크립트 코드 작성 중복 불필요
- <script> 태그의 src 속성으로 파일을 불러 사용
④ URL 부분에 작성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>자바스크립트</title>
<script>
function over(obj){
function out(obj){
</script>
</script>
</head>
<body>
<h3>자바스크립트 동작 위치</h3>
onmouseover="this.src='media/banana.png'"
onmouseover="over(this)"
onmouseout="out(this)"><hr>
onmouseover="over2(this)"
onmouseout="out2(this)">
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
3. 자바스크립트로 HTML 콘텐츠 출력
자바스크립트로 HTML 콘텐츠를 웹 페이지에 직접 삽입
- 바로 브라우저 윈도우에 출력
- document.write()
- document.writeln()
writeln()은 텍스트에 ‘\n＇을 덧붙여 출력
\n'을 덧붙이는 것은 고작해야 빈칸 하나 출력
다음 줄로 넘어가는 것은 아님
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>document 활용</h3>
<script>
document.write("<h3>Welcome!</h3>");
document.write("2 + 3 = <br>");
document.write("<mark>7입니다.</mark><br>");
t = document.title;
document.write(t);
a = document.anchors;
document.write(a);
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
'화면구현' 카테고리의 다른 글
| 자바스크립트, 변수(전역변수, 지역변수), 상수 (0) | 2020.03.09 |
|---|---|
| (JavaScript)프롬프트 다이얼로그, 확인 다이얼로그, 경고 다이얼로그 (0) | 2020.03.09 |
| CSS3로 표 꾸미기, 폼꾸미기 (0) | 2020.03.08 |
| 블록박스와 인라인박스, 리스트 꾸미기 (0) | 2020.03.08 |
| CSS3의 박스 모델 (0) | 2020.03.08 |
rss