[1일차] Do it! 자바스크립트 기본편 - 기본함수, 규칙

START !

---

* WARNING ! 책 및 인터넷을 통해 공부한 내용으로 정확한 정보가 아닐 수 있으니 주의해주세요! *

---

공부범위

- 1장 ~ 2장

 

공부내용

1. javascript api

   - API (Application Programming Interface)

   - 함수의 모임

   - 일일이 내 손으로 코드를 작성하지 않아도 기존에 존재하는 api를 활용하여 원하는 결과물을 얻을 수 있음 (WOW)

   - EX) 네이버 지도 API를 활용하여 회사의 약도 넣기

   - 네이버 오픈 API (https://developers.naver.com/main/)

 

 

2. 자바스크립트를 사용하는 두 가지 방법

 

   (1) HTML파일 속에 자바스크립트 소스 삽입

      - <script></script> 태그를 활용하여 html 파일 내에 자바스크립트 소스를 넣을 수 있음

      - 보통 </body> 태그 전에 <script>태그를 넣는다고 함

 

   (2) 외부스크립트 파일 연결

      - 만약 똑같은 js소스를 100군데에 넣어야 한다면?

        (1)번의 방법을 이용하면 소스를 복사해서 100번 붙여넣기 해야 함

        BUT! 외부스크립트를 따로 만들어 html 파일 내에 연결한다면 위와 같은 반복을 피할 수 있음!

     - 파일명.js 을 생성한 후, html 파일 내에 아래의 코드 삽입

 

<script src=상위파일/파일명.js></script>

 

 

3. live server (with atom editor)

   - live server를 통해 에디터에서 수정하고 저장한 파일을 실시간(live)로 확인 가능

   - 다운 방법은 검색하면 바로 나옴

   - 매번 새로고침하기 귀찮았는데 정말 좋은 확장기능!!!

 

 

4. 자바스크립트 출력 함수

   (1) prompt()

      - 사용자의 입력값을 받을 수 있는 함수

 

prompt();   //기본형태

prompt();    //입력창에 글자 표시
"안녕하세요"

prompt("이름을 입력하세요.");    //창에 글자 표시

prompt("이름을 입력하세요", "Kimgoing");    //입력창+일반창에 글자 표시

prompt("이름을 입력하세요.");  출력 화면

 

prompt("이름을 입력하세요.", "kimgoing");  출력 화면

 

 

   (2) alert()

      - 알림창을 출력하는 함수

 

alert("좋은 하루 보내세요!");

 

 

   (3) document.write()

      - 웹브라우저 화면에 출력하는 함수

 

var name = prompt("이름을 적어주세요.");
document.write(name + "님! 환영합니다!");

var name = prompt("이름을 적어주세요.");

document.write(name + "님! 환영합니다!");

   (4) console.log()

      - 콘솔창에 출력하는 함수

      - document.write() 와 동일하게 사용/ 출력만 다른 곳에 되는 것

      - tip! chrome 주소창에 about:blank를 치면 빈 화면 생성 가능

              ctrl + shift + J 누르면 console창 바로 생성

 

var name = prompt("이름을 적어주세요.");
console.log(name + "님! 환영합니다!");

①콘솔창에 입력

②위와 같은 창이 뜨면 이름(name) 적기

③Enter키를 누르면 console 창에 결과 출력

 

5. 자바스크립트를 사용할 때 규칙

   (1) 대소문자 구별

   (2) 들여쓰는 습관

   (3) 문장 끝맽음은 세미클론

   (4) 소스에 메모 시에는 주석 사용

   (5) 식별자(identifier) 규칙

   (6) 예약어는 식별자로 사용X

      - 자바스크립트 모든 예약어 보기

      (www.w3schools.com/js/js_reserved.asp)