[JS] 시작

자바스크립트 실행하기

시작에 앞서...

이거 거의 처음 해보는 거라서 "어떻게 시작하지...?" 하다가 그냥 백준 풀면서 익혀야겠다는 생각이 들었다.

그런데 자바스크립트 코드는 어디에서 실행하지...?

 

그래서 찾아봤다.

https://eonhwa-theme.tistory.com/41

[javascript]01 자바스크립트 실행하기

 

보니까 node.js를 이용하는 방법과 웹 APIs를 이용(html과 main.js를 연결해서 브라우저 상에서 실행)하는 방법이 있다고 한다.

 

이렇게 보기에는 두 번째 방법이 나아 보이는데, 일단 2개 다 해보고 결정해야겠다.

 

node.js에는 자바스크립트 엔진이 있어서 브라우저 없이도 자바스크립트를 실행할 수 있다고 한다.
1. 실습 파일 만들기
나는 바탕화면에 폴더를 하나 만들어주었다.

2. 메모장에 명령어 작성
간단한 텍스트 에디터 툴에 console.log("Hello World") 작성 후 1에서 만든 경로에 저장(저장 이름은 main.js)

3. 콘솔창에 실행
PC에 node.js( https://nodejs.org/en/download )가 설치되어 있다면 방금 작성한 경로에 들어가서 node main.js 명령어 실행
(cmd 클릭 -> 'cd 만든 폴더 경로' 작성 -> 'node main.js' 작성 -> Hello World라고 뜨면 성공!!)

 

웹 APIs
1. 아까 만든 경로로 들어가서 vscode 실행
(cmd 클릭 -> 'cd 만든 폴더 경로' 작성 -> 'code .' 작성 -> vscode가 실행됨)

2. index.html 생성
(vscode에서 파일을 추가하여 'index.html' 생성->doc 탭을 누르면 자동완성->title 밑에 script를 작성(main.js)) 

3. 웹에서 실행
(바탕화면에 추가한 폴더에 있는 'index.html'을 마우스로 잡아서 웹 탭에 넣기 -> (window) ctrl+shift+i를 눌러 개발툴 -> console에 작성한 Hello World가 출력된 것을 확인하면 성공!!)

 

음... 둘 다 비슷하긴 하지만... 그냥 그날 기분에 따라 사용해야겠다.

좋았어~~~ 파이팅!!

 

 

---

자바스크립트 개념 및 문법

1. 개념

 

HTML은 웹페이지의 제목, 문단 등을 정의하여 웹의 구조를 만드는 마크업 언어이고, CSS는 HTML과 같은 마크업 언어를 통해 표현된 웹의 구조를 디자인하기 위한 언어이다. 자바스크립트는 웹 페이지가 특정 상황(event)에 따라 동적으로 작동할 수 있도록 만들 수 있다.

 

즉, 자바스크립트는 HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 언어이다.

 

 

2. 문법

- 변수

let 변수 이름 = 할당할 값;

 

변수를 선언할 때 let이라는 키워드를 쓰고 변수의 이름을 정해 준 다음, 할당 연산자(=)를 쓰고 해당 변수에 할당할 값을 적어준다.

[변수의 선언과 할당할 때 주의할 점]
> 변수 이름에는 띄어쓰기가 포함되지 않도록 하기
          띄어쓰기를 대신하는 변수 작성법
          (자바스크립트에서 영어로 변수명, 함수명을 작성할 땐 카멜 케이스를 사용하는 것이 관례)
              - 스네이크 케이스: 언더스코어( _ )를 넣어 구분
              - 파스칼 케이스: 모든 단어를 대문자로 시작해 구분
              - 카멜 케이스: 두 번째 단어부터 대문자로 시작해 구분

> '='은 '같다'라는 뜻이 아닌 변수에 값을 할당할 때 쓰는 할당연산자
          - 같은지 다른지 비교할 땐 비교연산자 === (같다), !== (다르다)를 사용
                    - 연산자: 연산을 수행하는 기호(===, !==, <, > 등)
          - 비교연산자는 ===, !==, <, > 등이 속해 있는 연산자를 기준으로 좌항과 우항의
             상대적인 크기를 판단하여 참(true)와 거짓(false)를 반환

 

 

- 타입

• 숫자(Number)
  • 정수, 소수, 분수 등 모든 수는 숫자 타입
• 문자열(String)
  • 문자의 집합으로, 따옴표(',")로 둘러싸서 표시
  • 숫자도 따옴표로 둘러싸여 있으면 문자열로 취급
  • 항상 같은 종류의 따옴표로 닫아줘야 함
• 불리언(Boolean)
  • 참과 거짓을 나타내는 타입(true, false)

 

 

- 함수: 논리적인 일련의 작업을 하는 하나의 단위

• 함수의 구조
  • 선언식: function 키워드를 선두로 함수를 표현
  • 표현식: 변수에 할당하는 것처럼 함수 이름을 변수에 할당하고 함수 작성
    • 예: let name = function(parameter){}

// 함수 선언
function 함수이름() {
         let stuff = 1; // stuff라는 변수를 설정하여 1을 할당
         return stuff; // 값을 반환
         
// return 키워드를 사용하지 않으면 함수는 값을 반환하지 않음
}

 

 

// 함수 선언
function example() {
          let stuff = 1;
          return stuff;
}

// 함수 호출
// 함수 이름 뒤에 () 괄호를 사용하여 함수를 호출하고 값 반환
// 함수 이름만 쓴다면 값이 아닌 함수 자체가 반환됨
example();

 

 

[참고] https://www.codestates.com/blog/content/javascript-%EA%B8%B0%EC%B4%88-%EB%B0%8F-%EB%AC%B8%EB%B2%95

 

 

이렇게 보니까 기본적인 것들은 다른 언어들이랑 비슷한 것 같다.

이 다음은 문제를 풀면서 하나씩 알아가야겠다.

오늘은 'Hello World'를 출력한 것으로 만족...