╱╱╭╮╱╱╱╱╱╱╭━━━╮╱╱╱╭╮╱╭╮╱╱╱╱╱╱ ╱╱┃┃╱╱╱╱╱╱┃╭━╮┃╱╱╱┃┃╱┃┃╱╱╱╱╱╱ ╱╱┃┣━━┳━━╮┃┃╱┃┣━╮╱┃╰━╯┣━━┳━╮╱ ╭╮┃┃╭╮┃┃━┫┃╰━╯┃╭╮╮┃╭━╮┃╭╮┃╭╮╮ ┃╰╯┃╭╮┃┃━┫┃╭━╮┃┃┃┃┃┃╱┃┃╭╮┃┃┃┃ ╰━━┻╯╰┻━━╯╰╯╱╰┻╯╰╯╰╯╱╰┻╯╰┻╯╰╯

Javascript/Javascript 기초

[Javascript] 입문 (html-js link)

재안안 2022. 5. 2. 15:03

우선 Javascript란 웹프로그래밍 언어의 종류로 웹페이지를 더 재미있게 만들어준다.

 

html : structing

css : details

javacript : interactive

 

자바스크립트는 웹 사용자의 행동(event)에 따라 추가적으로 기능을 추가하고

기능을 사용자의 행동(event)에 따라 실행 시킬지 말지 설정할 수 있게 만드는 것이다.

 

 많은 웹페이지들은 움직이는거처럼 보여지는데 이는 모두 자바스크립트를 사용한 것이다.

 

자바스크립트를 이용해면 웹페이지를 더 재미있게 만들 수 있다.

 

그리고 자바스크립트 코딩을 할 때 Visual Studio Code를 사용할 것이다.

 

자바스크립트 코드는 js 파일을 통해 저장된다.

js파일 혼자 독단적으로 사용할 수는 없고 html 파일과 연동하여 사용한다.

 

파일 이름의 형식은 없고 뒤에 .js만 붙인다면 그냥 아무거나 해도된다.

 

html파일과 js파일 연동은 아래와 같이 한다.

 

 

이렇게 script 한 줄만 입력해서 js파일의 경로를 가져오고

ctrl + click을 사용해 js파일이 열리는 것을 확인하면

js파일과 html파일 연동은 정상적으로 마무리된걸 확인 할 수 있다.

 

그리고 html css의 결과를 확인할 때는 browser를 통해 바로 확인할 수 있었는데

javascrip는 조금 다르다.

 

html을 browser로 열고 browser에서

inspect -> console을 통해서 js파일의 결과를 확인할 수 있다.

 

inspect는 browser에서 마우스 오른쪽 버튼을 누르면 나온다.

 

console.log는 print()라고 생각하면 된다.
Console tab

 

해당 예제에서는 js파일 이름이 index.js이지만 이후에 javascript.js로 바꾸었다.

 

이렇게 하면 이제 자바스크립트는 공부하기 위한 세팅은 끝났다.