웹 프로그래밍 기초2
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']);
}
}
Author And Source
이 문제에 관하여(웹 프로그래밍 기초2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hwanghye/웹-프로그래밍-기초2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)