HANCO
JavaScript공부03/기본 문법 본문
안녕하세요 핸들링 코드 크루 박준영 입니다.
자바스크립트란 무엇일까요??
자바스크립트는 동적인 웹페이지를 작성하기 위해 가장 많이 사용되어지는 언어입니다.
자바스크립트는 컴파일 과정을 거치지않는 인터프리터 언어이며, 동적 타입을 가지기 때문에
변수의 자료형을 선언하지 않고 사용하는 특징이 있습니다.
또, 완전한 객체지향 언어입니다.
자바스크립트는 상속을 위해 클래스의 개념을 사용하지 않고 프로토타입이라는 개념을 사용합니다.
자바스크립트가 어떻게 사용되어지는지!!
자바스크립트는 <script></script> 구문 사이에 쓰여집니다.
var이라는 타입을 사용한것을 볼 수 있는데요 var뒤의 값에 따라 타입이 자동으로 결정되어집니다.
var now = new Date(); 에서는 now라는 변수는 객체를 받는 것을 알 수있습니다.
만약 'var now = 10' 이라면 now는 자동으로 양의 정수의 타입을 갖습니다.
위의 결과는 new Date() 객체를 받아온 결과값입니다. 현재 시간을 나타내고 있죠.
document.write() 는 화면에 값을 출력하는 것을 뜻합니다.
console.log는 프롬프트창에 값을 띄우는 것을 뜻하는건 전 포스팅에서 확인했었죠?
다음은 자바스크립트의 alert() 함수입니다.
요즘은 많이 사용하지 않지만 간단한 알림을 위해서는 편한기능입니다.
이 문법은 <script></script> 구문 안에 사용하지않고 사용할 수 있습니다.
이 방법을 인라인 자바스크립트라고 하지요
위 사진처럼 버튼을 누르면 저런 알림창을 확인할 수 있습니다.
자바스크립트의 사용방법은 세가지가 있습니다.
1. 내부 자바스크립트
2. 인라인 자바스크립트
3. 외부 자바스크립트
내부 자바스크립트는 맨 처음 사용한 방법인 <script></script>안에 사용하는 방법입니다.
인라인 자바스크립트는 바로 위의 방법입니다.
요즘엔 내부와 외부 자바스크립트를 가장 많이 사용합니다.
자바스크립트 언어만 따로 폴더를 만들어서 보관하는 방법입니다.(css 처럼 말이죠!)
자바스크립트가 <body>의 콘텐츠 뒤에 실행되어져야 하는 경우에는 <body></body> 태그의 맨끝에 자바스크립트를 삽입합니다.
그러나 자바스크립트를 먼저 실행시키는 경우에는 <head></head> 안에 삽입합니다.
자바스크립트는 모든 공백을 무시합니다.
위의 코드처럼 코드와 코드 사이에 다른 공백이있는 것을 무시합니다.
그래서 원하는 대로 가독성 있는 코드를 만들 수 있습니다.
'안녕하세요'
자바스크립트에서는 C언어에서와 같이 '//', '/* */' 이 두가지로 주석문을 사용할 수 있습니다.
주석 부분은 설명을 생략하겠습니다. ㅎㅎ
자바스크립트에서 또 자주 사용하는 문법이 있습니다.
바로 getElementById() 함수 입니다.
<p></p> 태그 안에 '반갑습니다 여러분' 이라는 구문이 있습니다.
getElementById() 는 괄호안의 id값을 찾습니다.
그리고 innerHTML를 사용하여 그 문장을 변경 할 수 있습니다.
바뀐 것이 보이죠?
이제 자바스크립트의 객체를 사용해 볼게요
코드를 보실까요
코드를 보면 'me'라는 객체를 생성했습니다.
그리고 그 안에 나에 관한 정보들을 그에 맞게 적어넣었습니다.
이게 간단한 객체의 사용법인데요 코드의 가독성 뿐만 아니라 변수의 활용도를 높일 수 있습니다.
위의 코드는 자주사용하는 방법이니 꼭 이해해 주세요
출력결과는 위와 같습니다.
자바스크립트의 함수!
이번에는 자바스크립트의 함수의 개념에 대해 적겠습니다.
함수란 간단히 말하면 자주사용하는 어떠한 규칙등을 정해놓는다고 생각하시면 됩니다.
함수의 이해를 돕기위해 아래 코드를 봐주세요
자바스크립트는 function이라는 것을 사용해서 함수를 만듭니다.
function add() 라는 함수가 보이는데요 그 안에 a, b값을 받아와서 합을하는 식이있다.
위의 결과입니다.
오늘은 여기까지 자바스크립트의 기본문법이었습니다.
감사합니다.
'웹개발 > JavaScript' 카테고리의 다른 글
| JavaScript공부 04 / jQuery (0) | 2017.09.14 |
|---|---|
| Javascript공부02/함수/함수호출/클로저 (0) | 2017.09.04 |
| JavaScript공부01/aptana설치 (0) | 2017.09.02 |
