본문 바로가기
국비지원/부트캠프

[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (5) | Javascript

신입IT 2023. 10. 31. 18:51
728x90

 

KDT 포스코X코딩온 웹 풀스택 과정 10기

 

- JavaScript 사용

- JavaScript 변수명 작성법

- JavaSCript 변수

- JavaScript 자료형

- JavaScript Typeof

- JavaScript 형변환

- JavaScript 연산자 종류

2023-10-31

📚JavaScript 

javascript 정적인 웹사이트를 동적인 웹사이트로 만들어준다.

 

📚 javascript 사용 

[ console.log, alert ]

  • console.log()

브라우저의 개발도구에 있는 console 창에서 확인 가능하다

  • alert()

브라우저가 열렸을 때. 그 내용을 상단의 알림 창으로 보여준다.

 

 

내장방식 <script> </script>

링크방식 <script src=./index.js</script>

 

<head> 태그 안에 코드 양이 많은데 <script>를 넣으면 페이지가 늦게 로딩된다.

head태그 내부에는 다양한 정보들이 들어가기 때문에 head태그 내부에 작성한 코드가 많다면, 

정보들을 불러오는 중이라서 페이지가 늦게 로딩된다.

반대로 <body> 태그 안에 코드 양이 많은데 <script>를 넣으면 버튼 및 웹 기능들이 멈출 수 있다.

<script>는 상황에 따라 head body 위치가 바뀌게 된다

 

📚 JS기초 변수명 작성 방법

dash-case(bebab-case) ( - 사용 HTML, CSS)

snake_case ( _ 사용 HTML, CSS)

 

camelCase  ( 띄어쓰기구간에 대문자로 구별 JS)

[ex) theQuickBrownFox....]

 

PascalCase (문장시작점마다 대문자로 작성 JS)

 [특별한 상황에 작성]

 

zero-based Numbering 0 기반번호를 번호로 매기기
0번부터 시작한다.

 

📚 JavaScript 변수

📌 변수 선언 방법

let 변수이름; 

var 변수이름;

 

📌 변수 할당 방법 / 변수를 선언함과 동시에 사용

const 변수이름 = 값;

let 변수이름 = 값;

var 변수이름 = 값

 

 

특별한 상황이 아니라면 var 대신 let 사용할 것

- var 중복 선언 가능

- let 중복 선언 (변수이름 설정) 불가능 재할당 (값변경) 가능

 

공통점 : 선언 하고 값을 할당하지 않으면 자동으로 undefined 설정된다.

 

📌 const(상수)

- const 초반에 선언할 때 반드시 초기화를 동시에 진행

(재선 언 불가능, 재할당 불가능)

 

📌 변수 기본 규칙

1. 문자 / 숫자 / $ / _ 사용 

2. 첫 글자는 숫자 불가능

3. 예약어 사용 불가능 (if, this, var, let, const...) 등

4. 변수 이름은 읽기 쉽도록 센스 있게 

5. 상수는 대문자로 선언해서 다른 개발자도 보기 쉽게 하기 

 

https://chocobol.tistory.com/entry/Javascript-1-%EB%B3%80%EC%88%98-%EC%84%A0%EC%96%B8

 

Javascript -1. 변수 선언 (const, let, var)

1. const(constant: 상수) - 상수 : 변하지 않고 항상 같은 값을 가지는 수를 말한다. const player = "tomato"; console.log(player); // tomato ※ const 변수는 값을 재선언을 할 수 없으며, 재할 당도 불가능하다. - 변

chocobol.tistory.com

 

📚 JavaScript 자료형

[String, number, boolean, Undefined, Null, Array, Object]

    <script>
      /*
        자료형
        - 기본
            - string
            - number
            - boolean
            - null
            - undefined
        - 객체
            - array
            - object
        */
      // 1. string
      let myName = "길동";
      let email = "gildong@naver.com";
      let city = '"서울"';

      console.log(myName); // 길동
      console.log(email); // gildong@naver.com
      console.log(city); // "서울"

      // 문자와 변수를 동시에 출력
      console.log("내 이름은", myName, "입니다."); // 내 이름은 길동 입니다.
      console.log("내 이름은" + myName + "입니다."); // 내 이름은길동입니다.
      //  백틱(``)
      console.log(`내 이름은 ${myName} 입니다.`); // 내 이름은 길동 입니다.

      let gildong = `내 이름은 ${myName} 입니다.`;
      console.log(gildong); // 내 이름은 길동 입니다.

      //2. number
      let number = 123;
      let opacity = 0.7;
      console.log(number);
      console.log(opacity);
      //NaN : not a number의 약자
      console.log("apple" - 3); // NaN
      console.log("123" - 3); // 120 console.log에서 자동 형변환

      //3. boolean
      let checke = true;
      let isShow = false;
      console.log(checke); // true
      console.log(isShow); // false

      //4. undefined
      let undef;
      console.log(undef); //undefined

      //5. null
      let empty = null;
      console.log(empty); // null

      //6. arry
      let fruits = ["orange", "pineapple", "grape", "apple"];
      let data = [1, "gildong", false, null, undefined];
      console.log(fruits); // (4) ['orange', 'pineapple', 'grape',  'apple']
      console.log(data); // (5) [1, 'gildong', 'false', 'null', 'undefined']

      // fruits배열의 0번째 값, 1번째값 을 출력한다
      console.log(fruits[0], fruits[1]);

      // 2차원 배열 : [ [], [], [] ]

      //배열 함수

      //배열 값을 뒤에 추가
      fruits.push("banana");
      console.log(fruits); // (5) ['orange', 'pineapple', 'grape',  'apple', 'banana']

      //뒤의 배열값을 삭제
      fruits.pop();
      console.log(fruits); // (4) ['orange', 'pineapple', 'grape',  'apple']

      //배열 앞에 값을 추가
      fruits.unshift("orange");
      console.log(fruits); // (5) ['orange', 'orange', 'pineapple', 'grape',  'apple', ]

      //배열 앞에 값을 삭제
      fruits.shift("orange");
      console.log(fruits); // (4) ['orange', 'pineapple', 'grape',  'apple']

      //indexof는 fruits에 orange는 몇번째에 있는지?
      console.log(fruits.indexOf("orange")); // 0

      //fruits배열 안에 orange 있는지 확인
      console.log(fruits.includes("orange")); // true

      // 7. object
      let cat = {
        name: "나비",
        age: 1,
        isCuteL: true,
        // 함수도 객체 안에 넣을 수 있음

 

        mew: function () {
          console.log("야옹");
        },
      };

      //전체 출력
      console.log(cat);

      // cat 오브젝트의 name만 출력
      console.log(cat.name); // 나비

      console.log(cat.age); // 1

 

📚 typeof

자료형을 알려주는 typeof

  • 해당 자료형이 어떤 자료형인지 알려주는 것
      // typof
      console.log(typeof "문자"); // String
      console.log(typeof 1); // int
      console.log(typeof true); // boolean
      console.log(typeof cat); // object
      console.log(typeof fruits); // object
      console.log(typeof null); // object
      console.log(
        "typeof를 array나 null에 사용하면" + typeof {} + "결과를 얻을 수 있다"
      );

 

 

📚 Javascript의 형변환

자바스크립트에서 형변환은 데이터를 다른 유형으로 변환하여 계산이나 표시를 용이하게 하기 위해 사용된다.

예를 들어, 문자열을 숫자로 변환하면 더하기나 비교 연산이 가능해진다.

 

📌 자바스크립트의 형변환 방법

 

1. 암시적 형 변환(자동 형 변환)

  • 연산자나 함수에 의해 자동으로 발생한다. 예를들어 문자열과 숫자를 더하면 숫자가 문자열로
    자동변환 된다.
let num = 5;
let str = "2";
let result = num + str;  // 암시적 형 변환 발생: 숫자 5가 문자열 "2"로 변환되어 "52"가 됨
console.log(result); // 52

 

2. 명시적 형 변환

  • 문자열로 변환 : `String()` 함수나 변수를 `toString` 메서드를 사용한다.
let num = 123;
let str = String(num);  // 숫자를 문자열로 변환

      console.log(typeof num); // 형변환 전 number
      console.log(typeof str); // 형변환 후 string
  • 숫자로 변환 : `Number()` 함수를 사용하거나 `paresInt()`및 prarseFloat()`함수를 사용한다.
let str = "456";
let num = Number(str);  // 문자열을 숫자로 변환

      console.log(typeof str); // 형변환 전 string
      console.log(typeof num); // 형변환 후 number
  • 논리값으로 변환 : `Boolean()` 함수를 사용하여 다른 자료형으로 논리값으로 변환할 수 있다
let value = "Hello";
let boolValue = Boolean(value); // 문자열을 논리값으로 변환

      console.log(typeof value); // 형변환 전 string
      console.log(typeof boolValue); // 형변환 후 boolean

 

📌  String()과 to String() 차이

`String()` 함수는 주로 원시 데이터 유형을 문자열로 변환할 때 사용되고, [ null, undefined 사용가능]

`toString()` 메서드는 객체의 문자열 표현을 얻기 위해 사용된다.  [ null. undefined 사용불가]

 

 

📚 Js 연산자 종류

[대입 연산자, 할당 연산자, 비교 연산자, 논리 연산자, 비트 연산자]

 

  • 산술 연산자 :
    - +(덧셈), `-`(뺄셈), `*`(곱셈), `/` (나눗셈): 숫자 간의 산술 연산을 수행
    - %(나머지): 나눗셈의 나머지 반환
let result = 10 + 5;  // 15
let remainder = 10 % 3;  // 1
  • 할당 연산자 :
    - `=` : 변수에 값을 할당합니다.
    - `+=`, `-=`, `*=` `/=`: 현재 값에 다른 값을 연산하여 결과를 변수에 할당합니다.
let result = 10 + 5;  // 15
let remainder = 10 % 3;  // 1
  • 비교 연산자 :
    - `==`(동등), `===`(일치): 값이 동등한 지 비교한다. `===`은 데이터 타입 유형까지 일치해야 한다.
    - `!=`(부등) `!==`(불일치): 값이 부등한 지 비교한다.
let a = 5;
let b = "5";
console.log(a == b);  // true (값은 동등)
console.log(a === b);  // false (값과 데이터 유형이 일치하지 않음)
  • 논리 연산자:
    `&&`(논리 AND), `||` (논리 OR): 논리 연산을 수행한다.
    `!`(논리 NOT): 논리값을 반전시킨다.
 AND : 양쪽 값이 True인 경우 true 출력
OR : 양쪽 값이 둘중 하나라도 true라면 true 출력
`!` : true라면 false출력 false라면 ture 출력 
let isTrue = true;
let isFalse = false;
console.log(isTrue && isFalse);  // false (AND 연산)
console.log(isTrue || isFalse);  // true (OR 연산)
console.log(!isTrue);  // false (NOT 연산)

 

728x90
저작자표시 비영리 변경금지

'국비지원 > 부트캠프' 카테고리의 다른 글

[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (7) | Javascript  (2) 2023.11.02
[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (6) | Javascript  (2) 2023.11.01
[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (4) | CSS  (0) 2023.10.30
[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (3) | CSS  (0) 2023.10.27
[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (2) | HTML,CSS  (0) 2023.10.25

'국비지원/부트캠프' Related Articles

티스토리툴바