[스마트인재개발원] 자바스크립트 기초

Javascript의 역사

Javascript는 브랜든 아이크가 Mocha라는 이름으로 처음 만들었으며 4달만에 LiveScript라는 이름으로 개명하고, 다시 3달 후 JavaScript라는 이름이 되어 오늘날까지 사용중이다.

이름에 Java가 붙어 Java와 관련이 있을 것 같지만 사실상 관련이 없으며, Java의 유명세에 묻어가려고 의도적으로 지은 이름이다.

 

 

Javascript ?

웹페이지를 동적으로 제어하기 위해서 고안된 언어

객체지향 언어

확장자 : .js

 

 

Javascript의 특징

1. 모든 웹 브라우저에서 동작한다
2. 웹 브라우저에서 실행결과를 즉시 확인
3. 다양한 용도(node.js, tenserflow.js react등...)의 프로그램 개발 가능
4. 다양한 자바스크립트 공개 API
5. 다양한 라이브러리(JQuery)와 프레임워크

 

Javascript 사용방법

 

 

Javascript 입력과 출력

 

HTML 문서 내에 / console창에 / 알림팝업 으로 문자열 출력하기

실습코드

 

• document.write(); = HTML 문서 내에 출력(JSP의 표현식과 같은 역할)

document.write 결과

 

• console.log(); = console 창에 출력

console.log 결과

 

• alert(); = 알림 팝업창으로 출력

alert 결과

---

키보드로 입력받은 값 출력하기

 

실습코드

 

 

promt / confirm

 

• prompt(프롬프트 박스에 보이는 텍스트(ex>질문), 텍스트 입력창에 기본값으로 넣어질 값(비우기 가능)) 

      키보드로 입력을 받기 때문에 입력한 값은 문자열로 저장을 할 수 있다.

• confirm(출력할 텍스트)

      버튼만 누를 수 있기 때문에 True / False 의 Boolean 타입으로 저장을 할 수 있다.

'이름을 입력하시오' 라는 질문과 설정해 두었던 텍스트 박스 안에 띄울 기본값 '이름'

 

기본값은 수정이 가능, 텍스트박스 안에 입력하고싶은 값을 입력

 

확인 버튼을 누른 후 alert창으로 입력받았던 텍스트를 출력

 

confirm의 확인(True) 취소(False)버튼과 입력해주었던 '이름을 출력할까요?' 문자열

 

확인(True) 버튼 클릭 후 document.write를 통해 HTML상에 출력

 

Javascript 에서 오류보는법

Javascript는 코드를 작성하는 과정이나, 실행시 Java처럼 오타나 오류를 eclipse 상에서 바로 띄워주지 않는다.

그래서 Javascript를 하다보면 코드를 실행시켰을 때 아무것도 뜨지 않는 빈 화면을 많이 볼 수 있다.

(디버깅을 해 보다보면 이런 현상의 대부분은 원인이 오타이므로 오타에 주의를 해야한다.)

 

코드를 실행했는데 빈 웹페이지가 뜬다면 당황하지 말고 F12를 눌러 개발자 도구로 들어가준다.

개발자 도구에서 Console탭을 클릭 해 보면 이와같이 어느 부분에 어떤 오류가 났는지 알 수 있다.

개발자 도구 Console

 

또한, 개발자 도구에서 Sources탭을 눌러보면 자신이 작성했던 코드에 어느 부분이 오류인지 빨간 줄로 표시가 되어 있는것을 확인할 수 있다.

개발자 도구 Sources

www.smhrd.or.kr

스마트인재개발원