웹 프로그래밍 기초2

hyelog·2022년 4월 19일

TIL

목록 보기

1/20

Javascript 기초 문법을 익힌다.

웹 페이지
클라이언트가 서버에 요청하면, 서버가 클라이언트에게
HTML+CSS+Javascript를 준다.

<html>
html태그 안에서 구조를 설계
<style> style태그 안에서 구조를 꾸며줌 </style>
<script> script 태그 안에서 자바스크립트 언어로 기능을 동작하게 함 </script>
</html>```

자바스크립트 Javascript
브라우저가 알아들을 수 있는 유일한 언어
변수, 자료형, 함수, 조건문, 반복문

변수(variable) var let const란 무엇인가?
변수: 값을 담는다.
과거 ES6이전: var
오늘날: let const(상수, 재할당X)
*let과 const의 적절한 사용법: 값을 재할당해야 하는 상황이 아니라면 대체로 const 사용
변수 명명
변수 이름 자체가 변수를 설명할 수 있게 명명해야 한다.
var username = "hwanghye";
변수명은 숫자로 시작할 수 없음. 변수명에는 공백, 기호, 마침표가 들어갈 수 없음.
*언어 자체에서 예약어로 쓰이기 때문에 변수나 함수의 이름으로 사용할 수 없는 단어 묶음 보고 넘어가기

원시자료형 primitive type
객체가 아닌 자료형으로 메소드를 가지지 않는다.
원시 자료형은 모두 하나의 데이터만을 담고 있다. 다음과 같다.
string 문자열(텍스트 데이터)
number 숫자
boolean 불리언(true/false 참 또는 거짓 값을 나타냄)
undefined 정의되지 않음
null 값이 없음
symbol 심벌(ES6에 추가된 자료형. 고유하고 변경할 수 없는 값. 객체의 속성을 위한 식별자(?))

*null과 undefined의 차이점 확인하기.
참조 자료형 reference data type
자바스크립트에서 원시 자료형이 아닌 모든 것들은 참조 자료형이다.
대표적으로 배열과 객체, 함수가 있다.
참조 자료형은 여러 데이터를 담을 수 있다.

[리스트](순서가 중요한 담기)
let people = ['철수','영희','민수','형준','기남','동희']

{딕셔너리}(키key와 값value)
let b_dict = {'name':'Bob','age':21}

리스트와 딕셔너리의 조합
names = [{'name':'bob','age':20},{'name':'carry','age':38}]
리스트와 딕셔너리는 서로의 요소로 쓰일 수 있다.

typeof를 활용하여 특정 값의 타입을 확인할 수 있다.

const str = "hello";
typeOf(str);
// "string"

const num = 12;
typeOf(num);
// "number"

const arr = [1, 2, 3];
typeOf(arr);
// "object"

*배열(Array)은 원시 자료형이 아니라 객체

typeOf(null);
// "object"

*위는 자바스크립트의 첫 번째 구현에서 발생한 버그.

함수 function
함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차.
기능의 단위, 지시사항의 묶음, 구체적인 입력(input)과 출력(output)값을 가짐. 호출(call, invocation) 후엔 반드시 돌아온다(return). 반복적으로 실행되는 일이 필요한 경우 함수로 만들 수 있다.
함수의 구조
```
function functionOrder() {	  
 console.log('함수 실행 순서2');
 console.log('함수 실행 순서3');
}
console.log('함수 실행 순서1');
functionOrder(); 
console.log('함수 실행 순서4');
```

함수 functionOrder()가 호출되기 전까지 콘솔(console)에 순차적으로 문자열을 출력한다.

조건문

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

반복문

// 배열 리스트 한바퀴 돌기
for (let i = 0; i < 100; i++) {
	console.log(i);
}
// 배열 딕셔너리 리스트 돌면서 조건문 걸기
for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}