Javascript
JavaScript 기초(출처: W3Schools(http://www.w3schools.com/js/default.asp))
상단 출처에도 밝혔듯이, W3Schools의 JavaScript 내용을 바탕으로 작성되었습니다.
잘못된 내용이 있으면 언제든 피드백 부탁드립니다.
JavaScript ;(세미콜론)
변수, 함수, 객체의 선언, 값 변경 등의 작업을 한 후에는 ;(세미콜론)을 넣습니다.
var myName;
var myAge;
var myName; var myAge; // 변수를 나열할 경우 아래 코드와 같이 작성하는 것이 가독성이 더 좋습니다.
var myName, myAge;
var myName,
myAge;
JavaScript 값(Values)
- 고정값으로 1,2,3.14와 같은 숫자나 "Hello world",'Hello world' 와 같은 문자를 사용할 수 있습니다.
- 값을 저장하기 위해 var 예약어를 사용하여 변수를 정의하기도 합니다.
var myName = "John";
var myAge = 25;
JavaScript에서는 값의 형태에 따라 변수의 형태가 정해집니다.
var myName; // myName 변수를 선언을 했지만 값을 할당하지 않아서 undefined 값을 가집니다.
myName = 'John';
undefined : 변수를 선언하고 값을 할당하지 않은 경우, 값을 가지고 있지 않은 상태를 나타내기 위해 undefined 값을 가지게 됩니다.
값이 없는 변수를 가지고 계산할 경우 예상치 못한 결과가 나올 수 있으니 주의하도록 합니다.
JavaScript 연산자(Operators)
1. 값을 변수에 할당하기 위해 = 를 사용합니다.
2. 값을 계산하기 위해 + - * / 를 사용합니다.
var orangeCount = 4;
var appleCount = 5;
var bananaCount = 10;
var totalText = orangeCount + appleCount + bananaCount + "개"; // totalText = "19개"
/* 문자열과 숫자를 + 로 연결하면 결과값은 문자열이 되며, 그 순서에따라 결과가 다르게 나올 수 있습니다.
문자열이 앞에 있는 경우 뒤에 오는 숫자도 문자열 취급이 되니 주의하여 사용합니다. */
var totalText2 = "합계 : " + orangeCount + appleCount + bananaCount; // totalText2 = "합계 : 4510"
JavaScript 예약어(Keywords)
예약어는 JavaScript가 수행할 기능에 대해 미리 정의해둔 것입니다.
예제) var 예약어를 사용하여 var name; 와 같이 선언을 하면 브라우저는 name이라는 변수를 생성을 하게됩니다.
JavaScript 주석(Comments)
// 주석 내용(한줄만 가능) 또는 /* 주석 내용(여러줄 가능)*/와 같이 사용하면 주석 처리됩니다.
무시되어야 할 내용이거나 코멘트가 필요한 경우에 사용을 합니다.

JavaScript 식별자(Identifiers)
JavaScript에서의 식별자는 변수, 함수, 객체의 이름을 말합니다.
명명할 때 몇가지 아래와 같이 몇가지 규칙이 있습니다.
1. 동일한 이름을 정의할 수 없습니다. 이미 정의한 이름을 사용할 수 없습니다.
동일한 이름을 정의할 경우 의도하지 않은 결과가 발생할 수 있습니다.
var myName = "John"; var myName = "Unknown"; // myName에는 "Unknown"이 들어가있습니다.
var myName = "John"; var myName; // myName에는 "John"이 들어가있습니다.
2. 첫 글자가 문자나 _(underscore), $ 중에 하나가 와야 합니다. (첫 글자에 숫자(X))
3. 대소문자를 구분합니다.
var myName;
var myname;
위 예제에서 myName과 myname은 다른 변수로 취급이 됩니다.
이름을 만들 때 단어와 단어를 합쳐서 의미있는 단어를 만드는 경우가 있습니다.
my name 이라는 의미로 변수명을 만들때 아래와 같은 방식으로 만들 수 있습니다.
1. 하이픈(-) : my-name JavaScript에서는 사용(X), - 는 뺄셈 연산을 위해 예약되어있습니다.
2. 언더스코어(_) : my_name
3. Camel Case : MyName 보통 JavaScript에서는 myName과 같이 첫문자를 소문자로 사용합니다.


'개발 > Javascript' 카테고리의 다른 글

JavaScript 시작하기  (0) 2016.03.28
Javascript
Javascript 시작하기(출처: W3Schools(http://www.w3schools.com/js/default.asp))
상단 출처에도 밝혔듯이, W3Schools의 JavaScript 내용을 바탕으로 작성되었습니다.
잘못된 내용이 있으면 언제든 피드백 부탁드립니다.
JavaScript 입문
JavaScript는 웹 개발자가 반드시 배워야하는 언어 중에 하나입니다.
1. HTML : Web Page의 내용
2. CSS : Web Page의 layout, 스타일
3. JavaScript : Web Page의 동작 제어

JavaScript는 HTML의 내용, 속성, 스타일을 변경할 수 있으며 데이터의 유효성 검증도 해줄 수 있습니다.
웹브라우저에서만 사용하던 JavaScript가 이제는 웹서버에서도 사용이 가능하게 되었습니다.
대표적인 것이 Node.js입니다.
JavaScript 위치
JavaScript는 HTML 페이지의 body나 head 또는 두 곳 모두에 위치할 수 있습니다.
 
<script type="text/javascript"> 에서 type은 필수값이 아니며 생략해서 사용해도 무방합니다.
body 하단에 script를 위치시킵니다.
모든 HTML 태그를 웹브라우저에 로드 시킨후에 JavaScript를 실행하기 위해서입니다.
JavaScript 외부 파일 연결

JavaScript를 정의한 파일을 하나 만들어 두고 src 속성으로 연결만 시켜줘서 사용할 수도 있습니다.
여러 페이지에 동일한 동작이 필요한 경우에 편리하게 사용을 할 수 있으며, 보통은 가독성이나 유지보수를 위해서도 HTML 문서 따로 JavaScript 문서 따로 작성합니다.
그리고 중요한 것은 캐싱된 JavaScript 파일로인해 페이지 로드 속도에도 영향을 준다는 점입니다.
JavaScript 출력
HTML에 원하는 데이터를 출력하기 위해 아래 방법들이 있습니다.
window.alert()
document.write()
innerHTML
console.log()

테스트 용으로는 console.log()가 편하며, HTML element에 표시를 변경하기 위해서는 innerHTML을 사용합니다.
하나씩 살펴보겠습니다

window.alert() 예제
document.write() 예제1
HTML document가 모두 로드된 상태에서 document.write()를 사용하면 기존의 HTML 문서는 삭제되며 오로지 document.write()안에 있는 내용만 표시됩니다.

document.write() 예제2
innerHTML 예제
document.getElementById(id) 를 이용해 HTML 요소에 접근할 수 있으며 id는 HTML 요소에 정의한 속성을 말합니다.
innerHTML은 HTML요소의 내용을 말합니다.

console.log() 예제
console.log()는 브라우저의 개발자도구에서 많이 사용합니다. 브라우저에서 F12를 누르고 Console 메뉴에서 확인하실 수 있습니다.

'개발 > Javascript' 카테고리의 다른 글

JavaScript 기초  (0) 2016.03.30

+ Recent posts