javascript 소개 및 주석

deokyeong1020·2020년 9월 16일
0

자바스크립트 소개

1. JavaScript 소개

우리가 앞 부분에서 배운 HTML과 CSS를 가지고
웹 페이지의 구조와 디자인을 짤 수 있지만 이것 이외에도 JavaScript 코드를 이용하여 동적인 요소를
추가해볼 수도 있다. 그리고 이런 자바스크립트 코드는 거의 모든 웹 사이트에 적용이 되어있다.

JavaScript(자바스크립트)는 웹 페이지와 상호작용하도록 만들어진 언어입니다.
브라우저에서 사용자의 행동을 처리하고, 데이터도 저장하고, 네트워크 응답과 요청을 처리하는 역할을 합니다.
확장자는 .js이다.

JavaScript를 실행 시키려면 몇가지 조건이 필요하다.

  • 브라우저가 존재해야하고, 

  • HTML파일이 있어야하고, 

  • HTML파일에서 JavaScript 파일을 연결시켜줘야 합니다.

2. alert()

위의 alert창을 만들기 위해 HTML의 div 태그를 만들고, CSS를 이용해 버튼을 파란색으로 스타일링 하고
뭐, 이렇게 해서도 만들 수 있다. 그러나 이러한 수고를 덜 수 있는 방법이 있다.
HTML, CSS 코드 없이 JavaScript로만 박스를 띄울 수 있기 때문입니다.

(다만 개발자가 디자인을 변경할 수 없습니다.
브라우저-IE, chrome, safari, firefox 에서 정해진 디자인에 따르며,
그래서 브라우저마다 각각 다른 모양일 수 있습니다.)

alert 창은 보통 언제 사용할까?

예를 들어,
로그인 창에서 비밀번호가 틀렸을 때,
"비밀번호가 틀렸습니다" 라는 텍스트로 alert창을 보여줄 수 있습니다.

물론 디자인된 예쁜 창을 보여줬으면 좋겠지만,
개발이 급할 때는 HTML, CSS를 작성할 시간을 줄이기위해 일단 alert 창을 사용하는 경우도 많다.

3. console.log()

alert는 사용자에게 안내하고 싶은 텍스트를 보여줬다면,

console.log는 개발자가 확인하고 싶은 내용을 출력하는 함수이다.

그래서 console.log 는 일반 사용자가 볼 수 없도록 브라우저에 내장된 '개발자 도구'를 통해서만 확인할 수 있습니다.

크롬같은 경우 opt+cmd+i 를 누르면 개발자 도구를 확인할 수 있습니다.

❗️약속어

참고로 alert와 console.log은 자바스크립트에서 이미 정의된, 약속된 단어입니다.

이렇게 약속된 단어들은 '약속어(Reserved Words)'라고도 불니다.

따라서 이러한 약속어들은 함수명이나 변수명으로 사용이 불가능 합니다.

약속어로 지정된 단어는 이미 사용중이기때문에 그런것이니 기억해두자.

자바스크립트에 약속어는 이 둘 뿐만 아니라 수 없이 많이 있습니다.

추후 천천히 알아보도록하자.

주석

1. 주석이란?

주석(Commenting)이란 '코드를 작성하긴 했지만 브라우저에서 해당 코드를 실행시키지 말고 무시하라'는 뜻으로 쓰입니다.

2. 주석을 사용하는 이유

주석을 사용하는 이유는 여러가지가 있습니다.

  • 특정 코드가 필요 없어졌는데, 혹시 몰라서 남겨놓고 싶을 때

  • 다음 사람에게 인수인계 해야해서 코드에 설명해 놓을 때

  • 코드를 볼 때마다 이해가 잘 안 돼서 한글로 설명해 놓을 때

  • 등등..


주석의 장점 :

  • 시간이 지나 이 코드를 유지보수 할 때 각 코드의 역할을 직관적으로 바로 알 수 있다.

  • 협업 시 의사소통을 위해서


3. 주석의 형태

한 줄 주석 : //

여러 줄 주석 : /* 로 시작해서 */ 로 끝냅니다.

Script 위치

일단 자바스크립트 파일을 html과 연결할 때 사용할 수 있는 방법은 html파일에서 script를 삽입하는 방법이 존재하고 또 다른 하나는 js파일을 따로 만들어서 이것을 통째로 삽입하는 방법이 있다.

당연한거지만 파일별로 역할을 분담하는 것이 좋기때문에 후자를 택하는게 BEST입니다!

그러면 일단 방법은 후자라고 생각하고 어떤식으로 연결하면 될지 알아보겠습니다.

받아적느라 글씨가 엉망이다.

  1. 단순히 스크립트 헤드에 위치할 때 :
    페이지를 시작하기까지 너무 오래걸린다.

  2. 스크립트가 바디가 끝나가는 곳에 위치 :
    콘텐츠는 미리 볼 수 있지만, 웹페이지가 자바스크립트에 의존적이라면 정상적인 페이지를 보기까지 시간이 걸린다.

3.헤드에쓰면서 async사용:
Html을 받으면서 병렬로 js를 다운받으나 js 다운이 완료되자마자 바로 실행하고 남은 html을 읽어드리기 때문에 호환성에서 문제가 발생할 수 있다. (연결하고자한 html 태그가 아직 로딩 안 되었을수도...)
또 js는 다운받자마자 실행이라 순서에 의존적일 경우 위험함,, 다운 먼저받은게 맘대로 먼저 실행...
순서에 의존적일경우 좋지 않은 형태이다.

4.헤드에쓰면서 defer사용:
가장 좋은 형태,, 순서에 의존적이고 html다운 다 받고 js파일들 다 다운받은 후 개발자가 의도한 순서데로 js파일을 실행시켜줄 수 있다.

profile
일일 개발 기록 블로그

0개의 댓글