Javascript 기초

네 안녕하세요 19살 개발자 포돌이 입니다.

 

여러분들은 이제부터 기초부터 시작하게 되실 겁니다. 바로 시작하시죠~

 

제 1장 자바스크립트 기초 문법.

 

지금 부터 자바 스크립트 기초 문법 시작하겠습니다.

선언문은 자바 스크립트 코드를 작성할 영역을 선언하는 것이라고 이해하면 됩니다.

 

자바스크립트 선언문

 

기본형>

<script>

    자바스크립트 코드;

</script>

 

저는 php로 써서 살짝 달라 많이 당황하셨을 수도 있습니다만 

상관쓰지 마시고 <script> 안이 제일 중요하니 꼭 따라 쓰셔야합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

그리고 출력하시면

 

 

 

 

 

이런 글씨가 나옵니다 <script>안에 똑같이 적으시면 됩니다.

 

자바스크립트 주석처리

  // 한 줄 설명글인 경우

 

    /*

        설명글이 여러 줄인 경우

        이렇게도 처리할 수 있습니다.

    */

 

<!-- HTML 소스의 설명글은 이렇게 처리합니다 -->

 

HTML은 진짜 처음 보신 분들은 HTML이 뭐지? 왜 주석은 저렇게 할까?? 라고 이해하기 어려우실 수도 있습니다  그냥 그런가보다 하고 넘어가주시면 되고 나중에 알게 되실 겁니다.

 

내부 스크립트 외부로 분리하기

기본형> 

<script src="JS파일 경로"></script>

 

말씀 드리자면 꼭 기본형은 외워 두셔야 합니다. 기본중의 기본을 못하면요

나중에 엉망이 됩니다. 반드시 외우셔야 합니다.

 

앞에 예제에서 우리 docunemt.write("환영합니다"); 라고 <script>안에 적었을 겁니다.

그 문장을 밖으로 빼서 JS 파일을 만들어 찍을 겁니다. 자 절대로 겁먹지 마세요 그냥 JS파일을 만드시면 됩니다

 

먼저 JS파일을 만들기 위해서 비주얼 스튜디오 코드에서 [파일->새 파일 -> 보통 문서]를 선택하거나 단축기 Crtl + N을 눌러 빈 문서를 엽니다. 그런 다음 다음과 같이 문서를 저장합니다 되게 쉬워요 아!! 아마도 처음 깔면 영어 버전이 나올겁니다. 그래서 우리 한국어로 한번 바꿔볼까요?

 

공식 사이트에서 에디터를 다운받고 에디터를 열어보시면 스타트 페이지 가 나오는데 그건 그냥 끄시고 아래 사진과 같이

1. 좌측 사이드 메뉴의 네모 아이콘 클릭

2. 나오는 창에서 korean 입력

3. Korean Language Pack for Visual Stu... 에서  Install  버튼 클릭(사진에선 이미 Install 했기 때문에 표시되지 않았습니다.)

4. 우측 하단의  Restart Now  버튼 클릭

 

 

 

 Restart Now  버튼을 누르자 마자 에디터가 자동으로 재실행 되면서 에디터가 한글로 바뀌어서 나옵니다.

출처: https://recoveryman.tistory.com/464 [회복맨 블로그]

 

이걸 보시고 바꾸시면 됩니다 자 다시 비주얼 스튜디오 코드에서 [파일->새 파일 -> 보통 문서]를 선택하거나 단축기 Crtl + N을 눌러 빈 문서를 열고 다음과 같이 저장해 볼까요?

쉽습니다 그냥 원하는 이름에 .js 만 넣으면 JS 파일이 만들어집니다.

 

근데 이제 이걸 어떻게 연결을 해야하지? 라고 의문이 생깁니다. 우리 내부 스크립트 외부로 분리하는 기본형 확인 했었죠? 그걸 한번 적용할 때가 왔습니다.

 

지금 </script> 테그가 두개 있죠? 1번째꺼는 Jquery라고 자바스크립트를 쉽게 해줄 수 있는 언어라고 생각하시면 됩니다 일단 일부러 넣어서 보여드렸고요 1번째 </script>테그는 적지마세요. 그냥 눈으로 확인만 하시면 됩니다.

2번째 </script>테그가 우리가 만들었던 js 파일 경로에요 자 여기서 제 경로를 똑같이 따라하지 마시고 자기가 만든 경로를 집어넣으셔야 합니다 이해가 안될 수도 있어요 지금 "js/example.js"리고 적혀있잖아요? 여기서 js/  이 부분은 폴더명입니다. example은 파일명이고요. .js는 파일 속성이라고 생각하시면 됩니다.  맨 처음 글에 개발자가 되려면 이라는 글에 들어가시면 유튜브 링크에 사용법 두개 다 보셨으면 이해를 하실겁니다. 비주얼 스튜디오 코드에 폴더를 만들어서 저장경로를 지정했잖아요? 거기안에 JS폴더를 만들어도 되고 바탕화면에 만들어도 되고 상관은 없어요. 

 

보시면 바탕화면에 js 폴더를 만들었죠? 거기 안에

 

 

 

 

 

 

 

example이라는 js 파일이 있습니다 example이라고 그냥 제가 지은거에요 아무거나 이름 지어 주시면 됩니다.

만들었으면 더블 클릭 하시면 비주얼 스튜디오 코드가 자동으로 들어가질 겁니다. 아닌 경우에는 우클릭해서 연결프로그램에 들어가서 바꿔주시면 됩니다 그것도 안돼면, 유튜브에 찾아보시면 될거 같습니다.

 

따라서 위에 사진처럼 적용하고 화면을 띄우면

 

 

 

 

이렇게 출력이 됩니다. 

 

자 오늘은 자바 스크립트 기초문법인 자바스크립트 선언문, 자바스크립트 주석처리, 내부 스크립트 외부로 분리하기

를 공부해 보았습니다. 처음엔 이게 쉬운건지 어려운지 분간하기 어려우실 겁니다 그런데 나중에는 더 어려워질테니 확실하게 공부하셔서 자기 것으로 만드셔야합니다. 

 

그럼 오늘은 여기까지 하도록 하겠습니다.

 

19살 IT 개발자 포돌이였습니다.

-Coding is an Art-

-코딩을 예술이라 생각하는 사람-