JavaScript
#자바 vs 자바스크립트
#기본문법
-
자바스크립트는 대소문자를 구분한다.
var javascript = 10; //변수 javascript와 JavaScript는 서로 다른 두 개의 변수 var JavaScript = 20; // 값 그자체를 리터럴이라고 한다 여기선 20이 리터럴 Var Script = 30; //변수의 선언은 var 키워드로, Var는 동작하지 않음 -
식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미 자바스크립트에서는 영문자(대소문자), 숫자, 언더바 또는 달러($)만을 사용 할 수 있음(숫자로 식별자 시작은 안됨, 하이픈도 안됨 뺄셈 키워드라서)
식별자 작성 방식에는 여러단어로 이루어질 경우 첫 번째 단어는 모두 소문자로 작성 후 그 다음 단어부터는 첫 글자만 대문자로 작성하는 방식인 Camel Case 방식과 단어들을 소문자로만 작성하고 그 단어들을 언더바로 연결하는 Underscore Case 방식이 있는데 관행적으로 Camel Case 방식을 많이 사용함.
var firstVar = 10; //Camel Case 방식 -
키워드들은 식별자로 사용할 수 없음. 키워드란 몇몇 단어들을 특별한 용도로 사용하기 위해 미리 예약하고 있음.
var firstVar = 10; // var이 키워드 var function // 이렇게는 안됨의미가 아닌 구문으로 볼때 C에서 int num이 자료형, 변수명로 이루어져있으면 자바스크립트에선 var firstVar 는 키워드 식별자(변수명)로 이루어져 있다고 이해하면 될거같음.
#객체
-
객체란?
실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있음.
ex) 객체 = cat
프로퍼티(property)
cat.name = "나비"(name)
cat.family = "코리안 캣"(family)
cat.age = 0.1(age)
cat.weight = 300(weight)
name, family, age, weight가 프로퍼티 → 객체에 붙은 변수, 일반 변수와 기본적으로 같지만 객체에 속해있다는 차이가 있음.
메소드(method)
cat.mew()
cat.eat()
cat.sleep()
cat.play()
프로퍼티 값으로 함수가 될 수 있음 이런 프로퍼티를 메소드라 부름.(mew, eat, sleep, play)
고양이 객체는 모두 위와 같은 프로퍼티를 가지지만, 각 프로퍼티의 값은 인스턴스마다 전부 다를 것이다.
- 객체의 프로퍼티 참조
var person = { name: "홍길동", // 사람의 이름 프포퍼티 정의 birthday: "030219", // 생년월일 프로퍼티 정의 pld: "1234567", // 개인 id 프로퍼티 정의 fullId: function(){ // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환 return this.birthday + this.pld; } }; console.log(person.name); //참조 console.log(person["name"]); //하는 법 console.log(person.fullId()); //메소드를 참조할 땐 메소드 이름 뒤에 괄호를 붙이지 않으면 console.log(person.fullId); //메소드가 아닌 프로퍼티 그 자체를 참조하게 된다. 그래서 메소드 정의 그자체가 반환됨.
- 객체의 프로퍼티 참조
#자바스크립트 적용
HTML 문서에 자바스크립트 코드를 적용하는 방법에는 두가지가 있다.
-
내부 자바스크립트 코드
자바스크립트 코드는 <script>태그를 사용하여 HTML 문서 안에 삽입할 수 있음.
<head>태그나 <body>태그 또는 양쪽 둘다에 위치 가능.
-
외부 자바스크립트 코드
외부에 작성된 .js 확장자파일을 <script>태그 안에 포함시키면 됨
//example.js function printDate(){ document.getElementByld("date").innerHTML = Date(); }<head> <meta charset="UTF-8"> <title>JavaScript Apply</title> <script src="/examples/media/example.js"></script> </head>-> 이런식으로 스크립트태그 안에 src속성 사용해서 포함 시키면됨.
외부 자바스크립트 파일을 사용하면 웹 내용을 담당하는 HTML 코드로부터 웹의 동작을 구현하는 자바스크립트 코드를 분리 할 수 있음. 이렇게 하면 각각 읽기 편해지고 유지 보수도 쉬워진다. 또, 외부 자바스크립트 파일은 웹 브라우저가 미리 읽어 올 수 있어서 로딩 속도가 빨라짐.
오늘 내용은 별로 없지만 모질라사이트에서 개념들을 찾으면서 하나 둘씩 이해한다고 시간이 많이 걸렸다. 강의를 들어야하나.. 어제 다짐했던 HTML과 Git은 하지도 못했다. 근데 pull하고 바로 push하니 덮어쓰기?가 되는거 같았다. git은 나중에 팀프로젝트할때 하나씩 해야겠다. 할게 너무 많다.. 하루가 다 갔다. 내일은 좀 더 일찍 일어나서 늦게까지 해봐야겠다.
