[JavaScript]/[Nomad Coders]

Welcom To JavaScript

cr.kl_ 2024. 7. 25. 15:20

자바스크립트는 html이 다 실행된 뒤에 실행되고 위에서 아래로 읽어 실행한다.

console.log : 웹페이지 콘솔에 프린트(로그)하게 만드는 함수

                    : console에 무언가를 log(기록하여 보여줌)하는 것

alert : 경고창을 띄우는 함수

const : 업데이트 불가능한 변수 (const a = 3; 을 const a = 4; 로 바꿀 순 있으나, a = 8;로 업데이트는 불가)

let : 업데이트 가능

[보통 const를 기본으로 사용하고 업데이트 하고 싶을때 let사용]

(nver ever use [ver] 옛날 문법)

camelCase : 코드 이름 작성법

&&: and

|| : or

다른 언어에서 == 을 쓰다가 === 를 사용하여 찾아보니
JS에서만 사용하는 연산자이며
== 은 값만을 비교하고
=== 은 유형도 비교하여 === 를 주로 사용하는걸 추천한다고 하네요.
ex)
0 == false ---> true
0 === false ---> false

 

boolean : ture or false

null : 값이 없음, nothing (정의된 값이 null), 값이 없다는 것(비어있다는 것)을 자바스크립트에 알려줄때 사용

undefined : 변수에 값이 아무것도 없음 (정의되지 않음)

NaN : not a number, 숫자가 아님

 

array(배열) : 데이터 타입을 그룹으로 묶어 나열하는 것

                     값(value)자리에 [ ]를 이용해 그룹화, ,(콤마)를 이용해 구

                     번호는 0부터 시작

  • 예시
    const dayWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
    undefined
    console.log(dayWeek[3]); ➡️ thu

push : 배열의 끝에 추가

  • 예시
    dayWeek.push('sun');
    ➡️ console.log(dayWeek)
    (8) ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']

pop : 배열의 끝 삭제

  • 예시
    dayWeek.pop();
    ➡️ console.log(dayWeek)
    (7) ['mon', 'tue', 'wed', 'thu', 'fri', 'sat']

Obfects : 값의 배열

  • 예시
    변수명이 playerName, playerAge, playerPoints...등등 같은 값이라면 하나로 뭉쳐줄 수 있다.
  • const player = {
         name: 'suea',
         age: 20,
         points: 300   };
  • console.log(player); ➡️ {name: 'suea', age: 20, points: 300}age: 20name: "suea"points: 300
                                           [[Prototype]]: Object
  • console.log(player.age); ➡️ 20
  • const는 상수라 업데이트를 못하지만 객체 안의 내용은 업데이트 가능
    player = false; ➡️ error
    player.name = 'sujin';
    ➡️ console.log(player.name);
                                             sujin
  • 또한 객체 안에 추가 가능
    player.lastName = 'potoato'; ➡️ console.log(player);
                           {name: 'sujin', age: 20, points: 300, lastName: 'potoato'}
    console.log(player.lastName); ➡️ potato
  • player.points = player.points + 15
    console.log(player.points); ➡️ 25
    ⏩ 값을 가져올 수도 있고 바꿔 줄 수도 있다.

Function : 긴 코드의 반복의 복붙을 줄여줌

  • 함수는 반드시 호출을 해야 실행이 된다.
  • 매개변수(parament) : 함수와 메서드 입력변수 명
  • 인수(argument): 함수와 메서드의 입력값 (parament에 들어갈 값을 입력)
  • 함수를 파라미터로 선언하고, 인수로 실행한다

 - 함수 작성 : function 함수이름(parament) {
                                     실행할 코드   }

 - 함수 실행(불러오기) : 함수이름(argument)

- 예시

   function sayHello(name) {

       console.log('Hello my name is ' + name); }
   sayHello('nico'); ➡️ Hello my name is nico

   sayHello('lynn'); ➡️ Hello my name is lynn

   sayHello('suea'); ➡️ Hello my name is suea

 - 계산기 만들기

    function plus(a, b) {

            console.log(a + b); }

    function divide(a, b) {
            console.log(a / b); }

- 객체와 배열로도 알규먼트 값 부여 가능

 

Return : 반환값, 함수의 종료 선언

 - function

    function name(params) {
                params;   }
    name(3);  ➡️  undefined

   return값이 없다면 함수가 종류되지 않아 값을 내놓지 못한다.

   앞의 코드들이 있어도 return값을 반환

   return으로 종료가 됐다면 이후의 코드들은 작동하지 않는다.

  • const calculater = {
        plus : function (a, b) {
            return a + b; },
        mis : function (a, b) {
            return a - b; }};
    let num = calculater.plus(3, 4)
    calculater.mis(num, 5) 처럼 객체를 만들어 들어갈 수 있다.

Conditionals(조건문)

promrt : 사용자로부터 값을 입력받는 대화상자를 표시

               “확인” 또는 “취소” 버튼을 클릭가능

      - 변수를 생성해 메모리의 빈 공간을 확보해 주고

      - prompt() 함수에서 사용자로부터 입력받는 데이터를 변수 삽입해 변수를 출력

      - prompt(message); or prompt(message, defalult);

        첫 번째 매개변수 message : 표시할 메시진

        두 번째 매개변수 defalult : 표시될 기본값, 생략시 빈 문자열

      - '확인' 버튼을 클릭하면 입력한 값을 반환

      - '취소' 버튼을 클릭하면 null을 반환

      - 숫자를 입력해도 문자열로 반환[typeof 타입을 알고싶은 것] -> 타입을 알려주는데

         확인해 보면 string

 

 parseInt() : 문자열을 피싱하여 정수로 변환

                    문자열을 앞에서부터 읽어드리며 숫자로 변환하는데 문자를 만나면

                    멈추고 변환한 숫자만 변환 (124abc라면 '124'를 숫자 124로 변환) 

                    만약 문자만 입력하였다면 NaN 숫자가 아니란걸 알려준다.

 

isNaN() : 숫자가 아닌 인수는 ture, 숫자거나 문자형 숫자 인수는 숫자로 인식해 false

                하지만 연산기호가 포함되면 문자열로 인식해 true반환

 

 

if(condition) {

      실행될 코드  } ➡️ condition의 내용이 boolean이라 true면 코드가 실행된다.

 

 - 예시

   const age = parseInt(prompt('How old are you?'));

            ➡️ parseInt가 prompt의 문자열을 숫자로 바꿔준다.

                 숫자가 아닌 문자를 썼다면 NaN을 반환

                 이를 쉽게 알 수 있는함수가 isNaN함수 

   if (isNaN(age)) { console.log('Please write a number'); }

            ➡️ age가 NaN인지 아닌지에 따라 수행

                  NaN이라면 ture이니 코드 실행

    else { console.log('Thank you for writing your age.'); }

            ➡️ age가 NaN이 아니라면 false이니 코드 실행 X

                  else구문으로 넘어간다.

                  else는 false일대 실행할 결과물이므로 코드 실행

 

 - const age = parseInt(prompt('How old are you?'));

    if (isNaN(age)) { console.log('Please write a number'); }

    else if (age < 18) { console.log('You are too young.'); }

    else { console.log('You can drink'); }

 

 - if (~ && ~) and 인경우 둘다 true면 실행, 둘중 하나가 false라면 전 false로 실행 X

 - if (~ || ~) or 인경우 둘중 하나 라도 true라면 실행

 - 음수를 넣고 싶지 않을 땐 if (~ || ~ < 0)로 입력하면 된다.

            const age = parseInt(prompt('How old are you?'));

            if (isNaN(age) || age < 0) { console.log('Please write real positive number.'); }

               else if (age < 18) { console.log('You are too young.'); }

- if (A && B)

  true && true === true
  false && true === false
  true && false === false
  false && false === false
  라고 하셨기때문에 첫 A 에서 false가 나왔으니 뒤에 무엇이 나오든 false이기에 검사하지않고 넘어가는거 같습니다.

'[JavaScript] > [Nomad Coders]' 카테고리의 다른 글

#6 QUOTES AND BACKGROUND  (0) 2024.08.02
#5 CLOCK  (0) 2024.08.02
#4 LOGIN  (0) 2024.08.01
JavaScript On The Browser  (0) 2024.07.31