자바스크립트의 기초 문법
1. 자바스크립트 : 웹페이지의 동적처리
1) 자바스크립트는 웹브라우저(window)에 의해 실행(ex: java Main)되는 프로그래밍 언어이다.
2) window의 레퍼런스를 찾아보면 많은 메소드들이 있다. ex: alert(), print(), ......
2. 기본 내용
1) Html태그의 내용 변경
document.getElementbyID("태그의id값").innerHTML
2) Html태그의 속성값 변경
document.getElementbyID("태그의id값").속성이름
3. 자바스크립트 코드의 위치
1) Html문서의 <body>, <head> 태그 안의 <script> 자바스크립트 코드 </script> 아랫쪽에 위치하는 게 속도면에서 유리함
2) 외부의 js파일이나 url에서 가져오기
.js파일 내부에 자바스크립트 코드 작성 후, 또는 외부의 url.
<script src = "js파일의 경로, 외부 스크립트의 url"/>
4. 자바스크립트 기본 문법
1) 변수 선언 var
var 식별자 = 값;
2) 함수 선언 function
function 식별자(){
코드
}
3) 연산자
5. 데이터타입
1) 데이터 타입은 String, Number, Boolean, Array, Object, (undefined, null), function.
2) 데이터 타입은 유동적이다.
var x; // undefined
x = "Hello"; // String
x = 10; // Number
x = true; // Boolean
x = [ 1, 2, 3, 4 ] // Array
x = { 이름: "Sin", 나이: 30, 직업: "무직", 주소:"전주"}; // Object
x = null; // null
x = function myFunction(){ } ; // Function
3) 객체와 함수도 변수이다.
6. 변수에 대해(스코프)
1) <script> 태그 안에서 선언된 변수와 함수는 전역변수가 되고, 이의 주체는 window가 된다. 이 때, window 의 원래 변수,함수의 식별자와 같은 이름이 되면 오버라이딩 되므로, 웬만해서는 전역변수를 선언하지 않는다.
2) 함수 안에서 var로 선언된 변수(var x = "";)는 함수 블럭의 지역변수가 되지만, var로 선언하지 않고 그냥 값을 할당( x = "";)하게 되면, 변수는 전역변수가 된다.
7. 함수에 대해
1) 구문
function myFunction(param1, param2, ....){
}
이 때, 이 함수의 주인은 window가 되므로, 자주 쓰이는 방법은 아니다.
변수를 선언하여 그 안에 함수를 할당하는 방법이 추천된다.
var myFunction = function(param1, param2, ...){
}
2) 함수의 호출
myFunction(param1, param2, ....);
3) 함수 내부에서 정의된 변수(지역변수가 된다)
// x는 정의되지 않음
function myFunction(param1, param2, ....){
var x = "Hello";
// x는 정의됨
}
// x는 정의되지 않음
4) 메소드(객체 내에 정의된 함수) 선언
var x = {
myFunction : function(){
},
.....
}
8. 객체에 대해(Object Type)
1) 객체는 (속성:"속성값") 과 (메소드) 를 가질 수 있다.
2) 객체 정의
ex1) var x = { 이름:"신", 나이:"30", 직업:"무직", 주소:"전주"} or
var x = {
이름 : "신",
나이 : 30,
직업 : "무직",
주소 : "전주"
}
ex2) var x = {
이름 : "신",
나이 : 30,
직업 : "무직",
주소 : "전주",
구직 : function() {
console.log("hi"); //구직() 메소드의 정의
}
}
3) 객체 안의 속성과 메소드 호출 방법
x.이름; == "신"
x["이름"]; == "신"
x.구직; == function(){console.log("hi")}
x.구직(); >> 콘솔로그에 hi 가 찍힘. 메소드가 실행됨.
8. 자바스크립트에서 this의 용법
1) 메소드 내부에서 this 는 메소드가 정의된 객체를 지시한다.
2) 태그의 이벤트 속성값 안에서 this는 그 태그를 지시한다.
3) 전역이나 함수에서 this는 window 객체를 지시한다.
4) call(), apply()에서는?
9. 변수선언 시 추가된 예약어
1) var(기존)
2) let : 변수의 스코프를 명확히 설정한다.
var x = 10;
{
let x = 5; // 지역 내에서만 x = 5;
}
// 전역에서 x = 10;
let이 없었을 때, 지역 내에서 var 로 선언하면 값이 바뀌었음
3) const (~= final) : 재선언, 재할당이 불가능.
자바의 final 제한자처럼, 변수가 선언될 때 초기화(값을 할당) 해야하고, 나중에 변수의 값을 바꿀 수 없다.
다만, 배열, 객체를 const로 선언한 경우 재할당은 불가능하지만, 배열과 객체의 속성값을 바꾸는 것은 가능하다.
일반적인 html 이벤트............