HTML = 구조
CSS = 표현
Javascript = 동작처리
※ 자바스크립트 :
- 객체지향언어 – 실세계의 사물(객체)을 모델링해서 이를 프로그래 밍에 적용한 것
- HTML문서에 <script> 태그를 이용하여 자바스크립트 프로그램을 직접삽입
- 오라클과 넷스케이프에서 공동으로 개발한 클라이언트쪽 스크립트 언어
- 웹브라우저 내에서만 돌아가는 스크립트언어
ㄴ 웹브라우저의 구성요소 : html문서 처리엔진 , 자바스크립트엔진
웹스크립트언어
- 바로바로 컴파일과정없이 보여주는 것 , 자바 - class같은 실행파일이 만들어지지않음
- 인터프리터언어의 형태
ㄴ 사용자의 요청이 있을 때마다 각 언어 해석기에 의해 프로그램이 실행
컴파일 과정 없이 그대로 웹 브라우저로 실행
클라이언트 스크립트
- 실행위치가 클라이언트의 웹브라우저인 스크립트 언어
- 브라우저에 의해 해석되어 실행됨
▶ 자바스크립트 동작원리
- [1] html문서엔진이 <script> 태그를 만나면
[2] 자바스크립트엔진 호출해서 코드의 실행지시
[3] 자바스크립트엔진이 <script> 태그 내의 코드를 실행함
- 브라우저는 문서의 끝까지 위의방식으로 태그를 해석하여 출력하며, 사용자의 이벤트가 발생하면
그에 상응하는 이벤트 핸들러를 실행시킴
▶ 자바스크립트 특징
- 변수자료형을 선언하지 않고도 사용할 수 있음
- 운영체제( 윈도우, 유닉스, 리눅스 ) 에 제한없이 사용할 수 있음
- 소스코드가 노출되므로 보안유지가 어려움
- 한정된 객체와 메서드
▶ 자바스크립트 동작하기
[1] <script> ~ </script> 태그를 이용
- 자바스크립트 프로그램을 <script> 태그 안에 기술
- 위치 : 주로 자바 스크립트 함수는 <head>태그 사이에 정의, 함수 호출은 <body>태그 내에서 함
<HTML>
<HEAD>
<script type="text/JavaScript">
<!--document.write("<h2>안녕하세요</h2>");-->
</script>
</HEAD>
<BODY>
<h1>html문서 - script 태그 이용</h1>
</BODY>
</HTML>· document.write() = system.out.println()
- document : html 문서를 의미하는 객체
- write : document 객체의 메서드 - ()안의 태그를 html 문서에 써라 !
[2] 외부 자바스크립트 불러오기
- 내용이 많으면 자바스크립트파일을 외부에 별도로 만들어놓고, 이를 html문서에 불러서 실행
<script type=“text/javascript“ src=“파일명”>
</script><script type="text/javascript" src="../js/test1.js" charset="utf-8">
</script>
[3] html 태그의 EventHandler를 자바스크립트 코드로 표현하여 동작
[4] 자바스크립트 코드를 URL로 사용
<body>
//html 태그 내부임
<input type = "button" value ="배경색 변경" onclick = "document.bgColor = 'skyblue'"><br>
<a href = "http://www.naver.com" // **[3]
onmouseover = "document.bgColor ='pink'"
onmouseout="document.bgColor=''">naver</a><br>
<hr>
<a href = "#" onclick="alert('안녕!')">메시지띄우기</a> // **[4]
<script type="text/javascript">
document.write ("<h3>body태그 내의 자바스크립트코드 ! </h3>");
</script>
</body>
bt배경색변경 = onclick 시 bgcolor 가 skyblue 로 변경
a태그 naver = mouseover 시 bgcolor 가 pink로 변경
mouseout 시 bhcolor 가 none ' ' 으로 변경
a태그 메시지띄우기 = onclick 시 안녕 alert 띄워짐
※ 변수
- 변수의 type을 정의하지 않아도 코드를 실행할때 자동으로 type이 결정된다
- js 에는 자료형이랄게 따로 없어서 type 이라고 부르는 것 같던데
▶ 선언
- 선언만 하고 할당안할경우 : undefined
var a;
▶ 할당
- 선언없이 할당만 해서 사용가능
a=10;
▶ 선언과 할당 (초기화)
var a=5, b
▶ 출력
- 선언한적도, 할당한적도 없는 변수 냅다 출력시 : error
- error 가 나면 그 뒷부분이 실행되지 않는다. error는 F12 console 에서 확인 가능하다
document.write("a="+a+"<br>");- js 에서는 태그를 "" 안에 넣어서 사용하는 것 같음
▷ 문자열과 숫자 (type)
- 문자열은 작은 따옴표(') 또는 큰 따옴표(")를 이용하여 정의
- 숫자.length = undefined, 문자.length = 문자의길이
- type 에 따라 기본적으로 제공되는 기능들을 내장함수라고 한다
▷ 변수의 type 확인 : typeof
document.write("a type: "+ typeof a + "<br>");
※ 배열
- 같은 타입의 데이터를 여러 개 저장할 수 있는 저장소
▶ 선언
- Array 객체 : 자바스크립트에서 배열을 사용할때 이용되는 객체
var arr=new Array(2); // 요소2개인 배열선언var arr = []; // 빈배열선언
▶ 할당 : 직접 인덱스에 접근해서
//숫자
arr[0]=10;
arr[1]=20;//문자열
colors[0] = “red”;
colors[1] = “blue”;
colors[2] = “green”;▶ 할당 : 자바스크립트 내장 API를 사용해서 (추천)
var arr = [];
arr.push(100); // [100]
arr.push(20); // [100, 20]
arr.splice(0, 1, 10); // [10, 20] //index 0에서 1개 삭제하고 10 추가
console.log(arr); // [10, 20
▶ 선언 및 할당
var arr=[1, 2, 3]; //숫자
var arr = [“red”, “blue”,”green”]; //문자열
▶ for 문에서 출력
for(var i=0; i<3; i++)
document.write(i + " : " + colors[i] + "<br>");
▷ 배열에서 자주사용하는 배열 API
· push() : 배열에 데이터 추가 (맨 끝 인덱스부터 추가됨)
· slice() : 배열의 특정 인덱스에 있는 값을 반환 (배열의 내용이 변환되지 않음)
· splice() : 배열의 특정 인덱스에 있는 값을 변경 또는 삭제 (배열의 내용이 변경됨)
· pop() : 배열의 마지막 인덱스의 값을 꺼냄 (배열의 내용이 변경됨)
· shift() : 배열의 첫번째 인덱스의 값을 꺼냄 (배열의 내용이 변경됨
▷ 배열과 forEach() 문
- forEach 반복문은 배열에 사용하기 좋은 반복문
var arr = [10, 20, 30];
arr.forEach(function(value, index) {
console.log('array index: ' + index + ' value : ' + value);
});array index: 0 value : 10
array index: 1 value : 20
array index: 2 value : 30
※ 조건문
if(조건식1) {
조건식1 이 참인 경우 실행할 내용;
}else if(조건식2) {
조건식 2가 참인 경우 실행할 내용;
}else {
조건을 모두 만족하지 않는 경우실행할 내용;
}
※ 반복문
▶ while 문
- 조건이 참인 동안은 계속 반복 수행
- 처음부터 조건이 거짓이면 반복되는 실행구문은 한번도 처리하지 않음.
while(반복 조건){
반복 내용;
}▶ do while 문
- 조건이 거짓이더라도 실행구문을 반드시 한번은 수행
do{
반복될 문장;
} while(조건);
▶ for 문
- 지정된횟수만큼 반복
for(초기화식;조건식;증감식){
반복될 문장;
}for (var i = 0; i < 10; i++) {
console.log(i); // 0부터 9까지 출력
}
▶ for in 객체제어문
ㄴ 객체를 제어하고 조작하는 방법
- 객체의 모든 속성을 변수에 할당하는 경우에 사용하기때문에
각 객체가 가지고 있는 속성의 개수만큼 지정된 문장을 수행
for(변수명 in 객체){
실행블록;
}
▶ new
- 사용자가 새로운 객체를 정의할 수 있도록 해줌
새로운 객체명 = new 객체형식(매개변수1, 매개변수2)<script type="text/javascript">
var d = new Date();
month1 = d.getMonth() + 1;
document.write(1900+d.getYear()+ "년" + month1+ "월" +d.getDate()+ "일"+"<br>");
</script>= > 자바스크립트에서도 Date객체생성해서 getMonth로 금월 가져오려면 +1 해야함 !
▶ this
다른 언어와 다르게 자바스크립트의 this는 상황에 따라 다른 값들을 가리킴
[1] this 의 가장 기본적인 컨텍스트( = 맥락 ) 는 글로벌 컨텍스트
console.log(this);=> window : 자바스크립트의 최상위 객체
[2] 객체 속성 함수 안에서의 this는 기본적으로 해당 객체를 가리킴
var obj = {
num: 10,
printNum: function() {console.log(this.num);}
};<script type="text/javascript">
//[1] javascript 이용
function disappear(element){
element.style.display = "none";
}
</script>
</head>
<body>
<div onclick="disappear(this)">1. 클릭하면 사라짐</div>
[3] 일반함수에서 this : 일반 함수의 this는 전역 컨텍스트
function showComment() {
console.log(this);
}위 함수를 실행시키면 window 객체를 가리키고 있다는 것을 알 수 있다
= > 위 함수로 new 인스턴스 생성해서 함수가 실행되게한다면 ?
- this : Developer {} // 생성자 함수의 this는 함수의 내부를 가리킨다
function Developer() {
console.log(this);
}
var dev = new Developer();
[4] HTTP 요청과 같은 비동기 처리 코드는 전역 컨텍스트를 갖는다 ... 와 이게 무슨말이지
- 실제로 웹 개발을 할 때 가장 많이 마주하게 되는 this
function fetchData() {
axios.get('domain.com/products').then(function() {
console.log(this);
});
}fetchData(); // window
'Javascript' 카테고리의 다른 글
| [Javascript] Symbol / 배열메소드 / 문자열메소드 (1) | 2022.12.03 |
|---|---|
| [Javascript] 객체 메소드 / computed property (1) | 2022.12.03 |
| [Javascript] ES6 / 익명함수 / 가변인자 함수 / 콜백함수 / 클로저 함수 (0) | 2022.06.22 |
| [Javascript] (0) | 2022.04.25 |
| [Javascript] DOM / 객체 / 함수 / 메서드 (0) | 2022.04.25 |