2주차/JavaScript 개념

gkdudans·2023년 11월 25일

EVI$ION/웹

목록 보기

2/11

1. 자바스크립트 기초 강좌: 100분 완성

변수

let
name이라는 변수명이 이미 선언되어 있을 경우 에러 표시. 의도적으로 let을 생략하고 적으면 값을 바꿀 수 있음.
const
절대로 바뀌지 않는 상수를 입력할 때 사용, const로 선언된 변수를 바꾸려하면 에러 발생(수정X)
변수 선언 규칙
- 문자와 숫자, $, _만 사용 가능
- 첫글자는 숫자가 올 수 없음
- 예약어는 변수명이 될 수 없음
- 변하지 않는 값: const / 변할 수 있는 값: let으로 선

자료형

문자형(String)

문자 작성시 "", '',```` 사용 가능
특수문자 작성시 \특수문자

문자열 내부에 변수를 포함하고 싶으면 ````사용

const message3 = `My name is ${name}`; //변수 포함
const message3 = "My name is ${name}"; //변수명 그대로 노출

문자형 + 사용 가능

const name = "Mike";
const a = "나는 ";
const b = " 입니다.";
console.log(a + name + b);

const age = 30;
console.log(a + age + "살" + b); //문자형으로 변경

숫자형
- +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지)
- 숫자를 0으로 나누면: Infinity
- 문자열을 숫자로 나누면: NaN(숫자가 아님)
boolean형
- True / False
- undefined: 변수를 선언만 하고 아무것도 할당하지 않음
- null: 변수에 null 할당(null: 객체 X)
객체형, 심볼형

typeof 연산자

변수의 자료형을 알아낼 수 있음

const name = "Mike";

console.log(typeof 3); //"number"
console.log(typeof name); //"string"
console.log(typeof "xxx"); //"string"

alert, prompt, confirm

alert() : 무언가를 알려주는 역할
- 메세지를 보여줌
- 확인버튼을 누르면 창 사라짐

prompt() : 무언가를 입력 받는 역할

const name = prompt("이름을 입력하세요.");
alert("환영합니다, " + name + "님");

메세지를 보여주고, 어떤 값을 입력받을 수 있는 필드 제공
입력하지 않고 취소를 누르면 null값 출력

default값 입력 가능

prompt("출력될 메세지","입력받을 default값")

//예시
const name = prompt("예약일을 입력해 주세요.", "2022-02-");

confirm() : 무언가를 확인 받는 역할
- 사용자에게 확인을 받기 위한 용도
```
const isAdult = confirm("당신은 성인입니까?");
console.log(isAdult);
```
단점
- 스크립트 일시 정지: 창이 떠있는 동안 동작의 제한
- 스타일링 불가능: 위치와 모양 지정 불가, 브라우저마다 다름

형변환

자동 형 변환
```
"6"/"2"=3 //자동 형 변환
```
명시적 형 변환
- String()
  - 괄호 안의 타입 ⇒ 문자형
```
console.log(String(3),String(true), ...)) //"3" "true" "..."
```
- Number()
  - 괄호 안의 타입 ⇒ 숫자형
  - 괄호 안에 숫자가 아닌 문자가 포함되어 있다면, NaN 출력
  - Number(true) = 1, Number(false)=0
  - 주의사항
```
Number(null) //0
Number(undefined) //NaN
```
- Boolean()
  - false인 경우: 숫자 0, 빈 문자열(””), null, undefined, NaN
  - 제외한 모든 것 true 반환

기본 연산자

+(더하기), -(빼기), *(곱하기), /(나누기), %(나머지)
%(나머지)의 쓰임새
거듭제곱: **
연산자는 우선순위를 가짐: %/ > +-
연산자를 줄여쓸 수 있음: +=, -=. *=. %=

증가연산자++, 감소연산자—

let num=10;
let result1 = num++;
let result2 = ++num;

console.log(result1); //10
console.log(result2); //11

비교 연산자, 조건문 (if, else)

비교 연산자
- <, >, ≤(<=), ≥(>=), =(==), ≠(!=)
- 동등연산자: ==
- 일치연산자: === (타입까지 비교)
조건문
- if문
- else if

논리 연산자 (AND, OR, NOT)

&&(AND)
- a&&b: a와 b 모두 true이면 true
||(OR)
- a||b: a나 b 중 하나라도 true면 true
!
- !a: a가 false이면 true
논리 연산자의 우선순위: AND > OR

반복문(for, while, do while)

for
while
do while

switch문

함수(function)의 기초

한 번에 한 작업에 집중
읽기 쉽고 어떤 동작인지 알 수 있게 네이밍 ex) showError, getName, checkLogin 등

함수 표현식, 화살표 함수(arrow function)

함수 선언문: 어디서든 호출 가능

//sayHello();

function sayHello(){
		console.log('Hello');
}

//sayHello(); 둘 다 실행 가능, 실행 전 모든 함수가 미리 선언되기 때문

함수 표현식: 함수 선언, 변수에 할당

let sayHello = function(){
		console.log('Hello');
}
sayHello(): //코드에 도달해야 생성

화살표 함수(arrow function)

let add = function(num1, num2){
		return num1 + num2;
}

//방법 1
let add = 		(num1, num2_ =>{
		return num1 + num2;
}
//방법 2
let add = 		(num1, num2_ =>(
		return num1 + num2;
)
//방법 3
let add = (num1, num2) => num1 + num2; //return문이 한 줄이라면 생략 가능

객체(Object)

객체 생성, 접근, 추가, 삭제

//생성
const superman = {
	name:'chark',
	age:33,
}
//접근
superman.name //'clart'
superman['age']
//추가
superman.gender = 'male';
superman['hairColor']='black';
//삭제
delete superman.hairColor

단축 프로퍼티

프로퍼티 존재 여부 확인

//생성
const superman = {
	name:'chark',
	age:33,
}

'birthDay' in superman; //f
'age' in superman; //t

객체 for ... in 반복문

for(let key in superman){
		console.log(key)
		console.log(superman[key])
}

객체(Object) - method, this

method

method: 객체 프로퍼티로 할당된 함수

//예시
const superman = {
	name:'chark',
	age:33,
	fly:function(){ //fly()로 줄여쓸 수 있음
		console.log('날아갑니다.')
	}
}
superman.fly(); //날아갑니다.

this

this: .앞에 있는 해당 객체

화살표 함수는 자신만의 this를 가지지 않음 주의

const user={
	name:'Mike',
	sayHello:function(){
		console.log('Hello, I'm ${this.name}'
	}
}

배열(Array)

배열의 특징
- 배열은 [ ] 대괄호 안에 , 로 구분하여 작성
- 배열 탐색 시 index 사용, 0부터 시작
for 반복문

for … of 반복문

let days = ['월', '화', '수'];
for(let day of days){
	console.log(day)
}

length: 배열의 길이

2. 모던 JavaScript 튜토리얼

파트 1)

1.1 자바스크립트란

1.4 개발자 콘솔

Untitled

빨간색 에러 메시지: 'lalala’가 정의되지 않았다(not defined)
에러 메시지 우측에 링크 bug.html:12: bug.html은 해당 에러가 발생한 파일, 12는 에러가 발생한 줄
아래의 파란색 기호 >: 자바스크립트 명령어 입력 가능. 이를 ‘커맨드 라인’이라고 부름.

2.1 Hello, world!

```
<p>스크립트 후</p>
```
```
모던 마크업:
language 속성: <script language=…> 현재 사용하고 있는 스크립트 언어

외부 스크립트

자바스크립트 파일로 소분, 분해해 놓은 파일은 src 속성을 사용해 HTML에 삽입

<!--삽입-->
<script src="/path/to/script.js"></script>
<!--URL 전체를 속성으로 사용-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
<!--복수의 스크립트 삽입-->
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

src 속성이 있으면 태그 내부의 코드 무시됨 ⇒ <script src="…">로 외부 파일을 연결할지 아니면 <script> 태그 내에 코드를 작성할지를 선택해야 함

2.6 alert, prompt, confirm

파트 2)

1.1 브라우저 환경과 다양한 명세서

호스트(host): 자바스크립트가 돌아가는 플랫폼으로 브라우저, 웹서버 등.
호스트 환경: 자바스크립트 명세서에서는 해당 플랫폼이 특정되는 기능을 제공하는 것, 랭귀지 코어에 더하여 플랫폼에 특정되는 객체와 함수 제공 ex) 웹브라우저: 웹페이지를 제어하기 위한 수단 제공 Node.js: 서버 사이드 기능 제공
호스트 환경이 웹 브라우저일 때 사용할 수 있는 기능
- 루트 객체: window
  - 자바스크립트 코드의 전역 객체 역할
  - 브라우저 창을 대변, 이를 제어할 수 있는 메서드 제공
    
    *전역 객체: 어디서나 사용 가능한 함수를 만들 수 있음.

1.1.2 문서 객체 모델(DOM)

문서 객체 모델: 웹 페이지 내의 모든 콘텐츠를 객체로 나타내줌, 수정 가능

document 객체: 페이지의 기본 진입점 역할. 이를 이용해 페이지 내용 수정 가능

//예시
// 배경을 붉은색으로 변경하기
document.body.style.background = "red";

// 1초 후 원상태로 복구하기
setTimeout(() => document.body.style.background = "", 1000);

1.1.3 브라우저 객체 모델(BOM)

브라우저 객체 모델: 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체 ex)
- navigator 객체: 브라우저와 운영체제에 대한 정보를 제공.
- location 객체: 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경(redirect)할 수 있게 함
```
//예시
alert(location.href); // 현재 URL을 보여줌
if (confirm("위키피디아 페이지로 가시겠습니까?")) {
  location.href = "https://wikipedia.org"; // 새로운 페이지로 넘어감
}
```

gkdudans

https://github.com/gkdudans

이전 포스트

[웹해킹 스터디] 1주차/HTML 개념

다음 포스트