[포스코x코딩온] KDT 웹 10기 231031~231101 2주차 | JavaScript(1)-기초, 변수, 자료형, 형변환, 연산자

📒Javascript

웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어

console.log() : 브라우저의 개발자 도구 -> 콘솔
alert() : 브라우저가 열렸을 때 그 내용을 알림창으로 보여줌

내장방식

<script>
  Javascript 코드 작성
</script>

위치는 어디서나 사용이 가능하다.

링크방식

<script src="./index.js"></script>

위치는 어디서나 사용이 가능하다.

읽기 순서 -> 읽히는 순서에 따라서 작동한다.

Javascript에서는 camelCase를 주로 쓴다. (첫 글자 소문자, 중간 글자 대문자)

---

변수

1) 선언

let 변수이름; // 중복선언 불가능, 재할당 가능
var 변수이름; // 중복선언, 재선언 가능

2) 할당

const 변수이름 = 값; // 초반에 선언할 때 반드시 초기화를 동시에 진행해야 한다.
let 변수이름 = 값;
var 변수이름 = 값;

변수 기본 규칙

• 변수 이름으로는 문자, 숫자, $, 언더바만 사용가능
• 첫 글자는 숫자가 될 수 없다.
• 예약어도 사용할 수 없다.
• 변수 이름은 읽기 쉽도록 센스있게 작성한다.
• 상수는 대문자로 선언한다.

---

자료형

Javascript는 데이터 종류와 관계없이 var, let, const 키워드로 변수를 선언하고 사용한다. -> 약한 타입 언어

---

문자형

• 메소드의 매개 변수로 넣어서 사용
  console.log("문자", 변수, "문자");

• +연산자를 사용해서 변수를 문자로 변환 후 더하여 사용
  console.log("문자" + 변수 + "문자");

• 백틱 문자 사용
  백틱 문자를 쓰다가 변수를 쓰고 싶으면 ${variable}처럼 쓰면 된다.

let myName = '길동';
var email = 'gildong@naver.com';
let city = '서울';

---

숫자형

let number = 123;
let opacity = 0.7;

---

Boolean

let checked = true;
let isShow = false;

---

Undefined

값이 할당되지 않은 상태를 표기

let undef;

---

Null

어떤 값이 "의도적"으로 비어있음을 의미할 때 사용

let empty = null;

---

Array

여러 데이터를 순차적으로 저장

let data = [1, "Apple", false, null, undefined];

✍입력

let colors=['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'black'];

        console.log(colors[2]);
        colors.push("white");
        console.log(colors);
        console.log(colors.indexOf("black"));
        console.log(colors.reverse());

💻출력

배열에서 사용 가능한 속성, 함수

변수명.length
변수명.push(추가할 값) : 맨 뒤
변수명.pop() : 맨 뒤
변수명.unshift(추가할 값) : 맨 앞
변수명.shift() : 맨 앞
변수명.indexOf(찾을 값)
변수명.includes(찾을 값)

---

Object

여러 데이터 꾸러미

✍입력

    let me = {
        name: '이시윤',
        age: 100,
        isFemale: true,
        email: "email@gmail.com",
      //함수도 객체 안에 넣을 수 있음
        sayHi: function() {
            console.log("안녕하세요");
        }
      }
      console.log(me);

💻출력

---

typeof

해당 자료형이 어떤 것인지 알 수 있다

✍입력

console.log("typeof를 boolean, array, null에 사용하면",
             typeof {},
             "결과를 얻을 수 있다.");

💻출력

✍입력

console.log(typeof 1, "isn't", typeof 헷, "data type.");
console.log("Typeof를 boolean이나 null에 사용하면,",
			 typeof false,
             "이나",
             typeof null,
             "결과를 얻을 수 있습니다.");

💻출력

---

형 변환

prompt로 입력 받은 값은 "문자"로 저장된다.

문자형변환

String(), toString()

let a = String(num);
let b = num.toString();

숫자형변환

Number()

console.log(Number("123"));
console.log(Number('abc'));

연산자

기본 연산자

% 나머지 연산자
** 거듭제곱

연산자 줄여쓰기

num=num+5 -> num+=5

증가, 감소 연산자

num++;
num--;

비교 연산자

=== 변수의 값 뿐만 아니라 자료형까지 비교

논리 연산자

|| OR
&& AND
! NOT