💙 1. Javascript ??

자바스크립트(JavaScript)는 웹 페이지를 동적으로 만들고 제어하기 위한 프로그래밍 언어입니다.

기본적으로 웹 페이지는 html이라는 코드로 화면에서 형태를 구현하게 되는데, html의 경우 정적인 형태로 구현됩니다.

예를들어, html로 만들어진 하나의 [버튼]이 있다고 가정해보죠.

여기서 자바스크립트는 사용자가 [버튼]을 눌렀을 때 다음페이지로 이동을 한다던지 아니면 알림메시지가 뜬다던지와 같은 움직이는 화면을 구현할 수 있게 해줍니다.

💙 2. script태그

기본적으로 html의 코드 구성은 다음과 같이 되어있습니다.
body부분에 html의 코드가 작성이 됩니다. 명령 순서에 따라 script 태그가 body부분에 위치하기도 하지만 주로 script태그는 head부분에 위치하게 됩니다.

🔵 javascript는 다음과 같은 태그를 사용하여 선언합니다. 
<script></script>

💙 3. 출력문

🌐 3-1. console.log();

일반적으로 개발을 하다보면 IDE내에서 디버깅을 통해 오류를 확인 할 수 있으나 Javascript의 경우 IDE내에서 디버깅을 직접 할 수 없습니다.

이때 사용되는 것이 console.log(); 입니다.

console.log는 웹의 F12를 눌러 개발자 도구에서 확인 할 수 있습니다.

개발자 도구의 Console에서 오류메세지를 확인 할 수 있기 때문에 Javascript 코드를 작성 할 때에는 개발자 도구의 Console을 켜서 확인하는 습관을 만들어야합니다.

<script>
	console.log("test");
</script>

🌐3-2. document.write();

Java, python에서의 print 함수와도 같은 역할을 합니다. document.write();를 하면 웹페이지에서 데이터를 출력하게 됩니다. 특이한점은 document.write();의 경우 개행(\n)의 기능이 없으며 콤마(,) 를 사용하여 복수의 데이터를 출력 할 수도 있습니다.

<script>
	document.write("<h1>신모의신모한모험</h1>");
    document.write("개행기능이");
    document.write("없습니다.");
    document.write("개행은 이렇게<br>");
    document.write("해주세요.);
    document.write("그럼", "저는", "이만");
</script>

🌐3-3. alert();

alert는 웹페이지 상단에 알림메시지를 띄우는 기능을 합니다. Javascript의 경우 XSS취약점을 가지고 있는데 취약점 확인을 할 때 주로 이 alert 기능을 활용한 XSS를 했던 기억이납니다. (XSS에 대한 것은 다음기회에 다뤄보겠습니다.)

<script>
	alert("Javascript 배우기!");
</script>

💙 4. 외부에서 script 파일 생성하기

html 내부에서 script 태그를 생성하여 javascript를 구현하는 방법도 있지만, 외부에서 script 파일을 별도로 만들어 import하는 방법도 있다.

이 때, js 파일을 생성하고 script태그를 활용하여 다음과 같이 import한다.

<script src="경로"> 를 입력하면 되며 경로는 ../등을 활용 ! 
<script src="example.js"></script>