JavaScript
Javascript는 1995년 Netscape Communication Corporation 사에서
개발되고 Netscape Navigator 2.0 브라우져에 최초로 탑재되어
웹 프로그래밍의 개념을 창시한 언어이다.
현재는 모든 브라우져에서 실행되는 웹 범용 언어가 되었다.
1. 자바스크립트는 조각난 소스코드 형태로 HTML 페이지에 내장된다.
2. 자바스크립트 소스 코드는 컴파일 과정없이 브라우져 내부의
자바스크립트 처리기에 의해 처리된다.
3. 자바스크립트는 C언어 구조를 차용하고 단순화시켜 쉽게 배울수 잇다.
.웹페이지에서 자바스크립트의 역활
웹페이지는 HTML5 태그 , CSS 스타일 시트 , 자바스크립트 프로그램의
3가지 코드가 결합되어 작성됩니다.
HTML5 코드는 웹 페이지의 구조와 내용을 작성하고 색상이나 폰트 ,배치
등 웹페이지의 모양은 CSS 로꾸밉니다. 자바스크립트는 사용자의 입력을 처리하거나 웹 어플리케이션을
작성하는 등 웹페이지의 동적제어에 사용됩니다.
* 자바 스크립트 코드의 위치
.HTML 태그의 이벤트 리스너 속성에 작성
.<script></script> 내에 작성
.자바 스크립트 파일에 작성
.URL 부분에 작성
1. HTML 태그의 이벤트 리스너 속성에 자바스크립트 코드 작성
HTML 태그에는 마우스가 클릭되는 등의 이벤트가 발생할 때
처리하는 코드를 등록하는 리스너 속성이있다.
사용자는 이속성에 이벤트를 처리할 자바 스크립트 코드를 작성할수 있다.
<img src="apple.png" alt="과일그림" onclick="this.src='banana.png' ">
| |
onclick 이벤트 리스너속성 |
자바스크립트 코드
2. <script> ~ </script> 태그에 자바 스크립트 코드 작성
<script> 태그에 자바스크립트 코드를 작성할수 있으며
다음과 같은 특징이 잇다.
. <script> /<script> 는 <head></head> 나 <body></body> 내
어느 곳이나 가능하다.
. 웹페이지내 <script> </script> 를 여러번 작성할수 있다.
3. 자바스크립트 코드를 별도의 파일로 작성
자바스크립트 코드를 확장자가 .js 인 파일로 저장하고
아래와 같이 <script> 태그의 src 속성으로 불러 사용한다.
<script src="파일이름.js">
// HTML5 부터 이곳에 자바 스크립트 코드를 추가하면 안됌.
</script>
이벤트와 이벤트 리스너
사용자가 HTML 태그가 출력된 영역에 키를 입력하거나 마우스를 클릭하면
event가 발생하며, 이벤트는 해당 HTML 태그에게 전달된다
이벤트는 click , change , mousemove 등 많은 종류가 있으며 , 이벤트를
처리하는 자바스크립트 코드를 이벤트 리스너라고 한다.
onclick , onchange , onmousemove 와 같이 이벤트 앞에 on 을 붙인 이름이
HTML 내그의 이벤트 리스너 속성으로 사용되며 , 이 속성에 자바 스크립트 코드를 작성한다.
<!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>script 태그에 자바스크립트 작성</title>
<script>
function over(obj){
obj.src="../images/banana.png";
}
function out2(obj){
obj.src="../images/apple.png";
}
function click2(obj){
obj.src="../images/back.png";
}
</script>
</head>
<body>
<h3>마우스 올려보세요</h3>
<hr>
<img src="../images/apple.png" alt="이미지"
onmouseover="over(this)"
onmouseout="out2(this)"
onclick="click2(this)">
</body>
</html>
위 코드를 실행한 결과이다.
onmouseout 함수로 마우스가 그림에서 벗어나면 apple이미지로 바뀌고
onmouseover 함수로 마우스를 그림에 올리면 banana 이미지로 바뀌고
onmouseclick 함수로 그림을 마우스로 클릭하면 back 이미지로 바뀐다.
* 자바 스크립트로 HTMl 콘텐츠 출력
자바스크립트 코드로 HTML 콘텐츠를 웹페이지에 직접 삽입하여
바로 브라우져 윈도우에 출력 되게 할수 있다.
이때 document.write() 나 document.write() 을 사용한다.
아래 내용은 웹페이지에 <h3> 텍스트를 삽입 하는 방법이다.
document.write("<h3> Welcome ! </h3>");
. 자바 스크립트 경고 다이얼로그
alert("메시지")
. 자바 스크립트 확인 다이얼로그
confirm("메시지")
. 자바 스크립트 프롬프트 다이얼로그
prompt("메시지","디폴트값")
* 데이터 타입과 변수
자바스크립트 식별자
.식별자란 자바 스크립트 개발자가
자바스크립트 프로그램의 변수,상수,함수에 붙이는
이름이다, 개발자는 식별자를 만들때 다음규칙을 준수해야한다.
. 첫번째 문자 => 알파벳, ' _ ' , ' $ ' 문자만 가능하다
. 두번째 이상 문자=> 알파벳 , 숫자 ,' _ ' , ' $ ' 만 가능하다.
. 대소문자 구분한다=> myHome 과 myhome 은 다르다.
EX]
77variable => X
student_ID => O
_code => O 맞으나 '_' 로 시작하는것은 특수용도
if => X 키워드
%cale => X
bar => O
변수
C , Java 와 같은 범용 컴퓨터와 달리
자바스크립트는 변수에 데이터 타입을 정하지 않는다.
변수의 선언방법
1.
var score; => undefined 라는 값으로 초기화 된다.
var year,month,day;
var address = "서울시";
2. age = 25; => var 없이 age 변수를 선언하고 25 로 초기화
하지만 이미 선언된 변수라면 이 변수는 새로운 변수를
생성하지않고 이미 존재하는 변수에 값 할당
var 변수를 선언하면 선언이 명료하고 이미있는 변수를 또 선언하는
오류를 막을수 있다. 이미 있는 변수를 var 로 선언하면 실행중 오류가
발생하고 프로그램은 잘못된 결과를 낳게 된다.
* var 키워드로 변수를 만드는게 바람직하다.
<!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>지역변수와 전역변수</title>
</head>
<body>
<h3>지역변수와 전역변수</h3>
<hr>
<script>
var x=100; //전역변수
function f(){ // 함수 f() 선언
var x = 1; // 지역변수
document.write("지역변수 x=" + x);
document.write("<br>");
document.write("전역변수 x=" + this.x); // script 영역 전부가 this이다
}
f(); //함수 f() 호출
</script>
</body>
</html>
위 코드를 실행한 결과이다.
'국비 과정 > JavaScript' 카테고리의 다른 글
| 국비 - 0926 ( BOM ) (0) | 2022.09.27 |
|---|---|
| 국비 - 0923 ( 이벤트 디폴트 ) (0) | 2022.09.26 |
| 국비 - 0922 ( Math 객체 , Object 객체 , DOM) (0) | 2022.09.22 |
| 국비 - 0921 ( Javascript 의 객체와 배열 ) (0) | 2022.09.21 |
| 국비 - 0920 ( funtion ) (4) | 2022.09.20 |
