[JS] JavaScript 기초 문법

Language/JavaScript

[JS] JavaScript 기초 문법

Ella_K 2022. 7. 4. 01:02

🔥 JavaScript

프로그래밍 언어
브라우저가 알아들을 수 있는 언어
동적으로 사용자와 상호작용할 수 있도록 하는 언어
HTML파일 <head> ~ </head> 태그안에 <script> ~ </script> 태스로 공간을 만들어 작성
크롬 개발자 도구 콘솔창(마우스 오른쪽 클릭 → 검사 → console/ 윈도우 F12) 을 이용하여 띄어놓은 페이지에 빠르게 자바스크립트를 테스트할 수 있다.
console.log(변수) : 콘솔 창에 괄호 안의 값을 출력해줌
primitive type의 값을 제외한 모든 것들이 객체로 이루어진 객체 기반 스크립트 언어이다.

🔥 Data types

자바스크립트는 인터프리터가 알아서 변수의 타입을 파악하고 값을 저장해서 변수의 타입을 따로 쓰지 않는다.

primitive values 와 object 로 나눌 수 있다.

👉 변수 선언

var : 변수 재선언, 재할당 가능
let : 변수 재선언 불가능, 재할당 가능
const : 변수 재선언, 재할당 모두 불가능
변수 선언에는 const를 기본적으로 사용하고, 재할당이 필요한 경우에만 let을 사용하는 것이 좋다.

👉 Primitive values

Boolean : True, Flase
Null: null
Undefined: 정의되지 않은 값
Number: 숫자형 (정수, 부동 소수점, 무한대, NaN 포함)
String: 문자열

숫자형

변수 선언, 대입

let num = 20 // 변수 선언
num = 14 // 대입

문자열

더하기, 인덱싱 가능

let first = 'Amy'
let last = 'Kim'

> first + last // 'AmyKim'
> first[0] // 'A'

👉 Object 자료형

Array
Object (아래 객체 섹션 참고)

배열

인덱싱 가능
push로 배열에 값 추가
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

let name = ['Amy', 'Tom']
> name[0] // 'Amy'
> name.length // 2

name.push('David')
> name // ['Amy', 'Tom', 'David']

객체 (아래 객체 섹션 참고)

🔥 연산자

산술 연산자(Arithmetic operators)	+, -, , /, %, *
증가, 감소 연산자	++. --
할당 연산자(Assignment operator)	=, +=, *=, -=. /=
비교 연산자(Comparison operator)	===(strict equality), !==(strict non-equality), <, >, <=, >=
논리 연산자(logical operator)	&&(AND), \|\|(OR), !(NOT)

==, != 은 값이 동일한지 여부는 테스트 하지만, 값의 데이터 유형이 동일한지 여부는 테스트 하지 않음
반면 ===, !== 은 값과 데이터 유형 둘다 테스트 할 수 있음

🔥 조건문

👉 if 문

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}

is_adult(12)

👉 switch문

switch (expression) {
  case choice1:
    choice1인 경우 실행할 코드
    break;

  case choice2:
    choice2인 경우 실행할 코드
    break;

  // 원하는 만큼 많은 case를 포함하십시오

  default:
    무조건 실행되는 코드(actually, just run this code)
}

const select = document.querySelector('select');
const para = document.querySelector('p');

select.addEventListener('change', setWeather);


function setWeather() {
  const choice = select.value;

  switch (choice) {
    case 'sunny':
      para.textContent = 'sunny';
      break;
    case 'rainy':
      para.textContent = 'rainy';
      break;
    case 'snowing':
      para.textContent = 'snowing';
      break;
    case 'overcast':
      para.textContent = 'overcast';
      break;
    default:
      para.textContent = '';
  }
}

🔥 반복문

for, while, do...while이 있다.
continue와 break 사용가능하다.

👉 for 문

기본 구조

for (초기화식; 종료 조건; 증감식) {
  // 실행할 코드
}

for (let i = 0; i < 100; i++) {
	console.log(i);
}

딕셔너리는 key값을 배열은 index값을 가져오는 반복문

for (let key in 객체) {
  // 실행할 코드
}

const dict = {'name':'Amy', 'age':25}
for (const key in dict){console.log(key)}
// name
// age

👉 While문

초기화식
while (종료 조건) {
  // 실행할 코드

  증감식
}

👉 do ... While문

초기화식
do {
  실행할 코드

  증감식
} while (종료 조건)

🔥 함수

// 만들기
function 함수이름(매개변수) {
	내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(인자);

// 만들기
function 함수이름(매개변수) {
	내릴 명령들을 순차적으로 작성
    return result
}
// 사용하기
result = 함수이름(인자);

🔥 객체 (Object) 기본

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics
Property: 객체 안에 변수
Method: 객체 안에 함수

👉 객체 초기화

객체 안에 멤버들은 (property, method) {} 괄호 안에서 ',' 로 구분
객체를 구성하는 멤버의 값은 어떤 것이라도 될 수 있음
Property(속성)는 key(속성명)와 value(속성값)로 구성

var person = {};

const person = {
  name: {
   first: 'Bob',
   last: 'Smith'
  }, 
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};

name, age, gender, intersts는 property
bio, greeting은 method

👉 점 표기법

dic.key 또는 dic.method를 이용해서(dic.멤버명) 객체의 property와 method에 접근할 수 있다.
위의 객체 예시에서

>> person.name // {first: 'Bob', last: 'Smith'}
>> person.name.first // 'Bob'
>> person.age // 32
>> person.interests[0] // 'music'
>> person.bio() // Hi! I'm Bob. 내용의 창이 뜸

👉 괄호 표기법

dic[key] 를 이용해서 property에 접근할 수 있다. (method는 점으로만 접근할 수있음)

person['age'] // 32
person['name']['first'] // 'Bob'

👉 객체 멤버 설정

' . ' 과 ' [ ] ' 를 이용하여 객체에 새로운 멤버를 생성하거나 기존 멤버를 갱신할 수 있다.

person.age = 45;
person['name']['last'] = 'Cratchit';

>> person.age // 45
>> person['name']['last'] // 'Cratchit'

person['height'] = 170
person.farewell = function() { alert("Bye everybody!"); }

>> person['height'] // 170
>> person.farewell() // Bye everybody! 내용의 창이 뜬다

const dataname = 'opinion'
const datavalue = 'yes'
person[dataname] = datavalue

>> person.opinion // 'yes'

👉 This

지금 동작하고 있는 코드를 가지고 있는 객체를 가리킴

var person1 = {
  name: 'Chris',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

var person2 = {
  name: 'Deepti',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

>> person1.greeting() // Hi! I'm Chris. 내용의 창이 뜬다
>> person2.greeting() // Hi! I'm Deepti. 내용의 창이 뜬다

Source

mdn web docs https://developer.mozilla.org/ko/docs/Web/JavaScript/
생활코딩 WEB2 JavaScript https://opentutorials.org/module/3180
스파르타코딩클럽 내일배움단 웹개발 종합반 1주차 : https://spartacodingclub.kr/nb
https://velog.io/@bungouk6829/Javascript-%EC%9D%98-%EC%9E%90%EB%A3%8C%ED%98%95

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

https://bigtop.tistory.com/12

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

'Language > JavaScript' 카테고리의 다른 글

[JS] [스파르타코딩클럽 웹] Ajax 다뤄보기 (GET) (0)	2022.07.08
[JS] [스파르타코딩클럽 웹] JQuery 다뤄보기 (0)	2022.07.08

현재글[JS] JavaScript 기초 문법

Study Note

[JS] JavaScript 기초 문법

🔥 JavaScript

🔥 Data types

👉 변수 선언

👉 Primitive values

숫자형

문자열

👉 Object 자료형

배열

객체 (아래 객체 섹션 참고)

🔥 연산자

🔥 조건문

👉 if 문

👉 switch문

🔥 반복문

👉 for 문

👉 While문

👉 do ... While문

🔥 함수

🔥 객체 (Object) 기본

👉 객체 초기화

👉 점 표기법

👉 괄호 표기법

👉 객체 멤버 설정

👉 This

Source

'Language > JavaScript' 카테고리의 다른 글

'Language/JavaScript'의 다른글

티스토리툴바

[JS] JavaScript 기초 문법

🔥 JavaScript

🔥 Data types

👉 변수 선언

👉 Primitive values

숫자형

문자열

👉 Object 자료형

배열

객체 (아래 객체 섹션 참고)

🔥 연산자

🔥 조건문

👉 if 문

👉 switch문

🔥 반복문

👉 for 문

👉 While문

👉 do ... While문

🔥 함수

🔥 객체 (Object) 기본

👉 객체 초기화

👉 점 표기법

👉 괄호 표기법

👉 객체 멤버 설정

👉 This

Source

'Language > JavaScript' 카테고리의 다른 글

'Language/JavaScript'의 다른글

관련글

티스토리툴바