자바스크립트-1일차

이주열·2022년 6월 7일

학습한 내용

지난 시간까지 html, css를 학습하였고, 이번 주 부터는 자바스크립트를 학습한다.

html은 웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속.
css는 웹 문서를 꾸미거나 웹 요소를 적절하게 배치하는 방법
자바스크립트는 사용자 동작에 반응해서 동적인 효과를 만들기 위한 기술이다.

기능

웹 요소를 제어할 수 있다.

웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음.

다양한 라이브러리를 사용할 수 있다.

웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해야 할 일이 늘어남. 이로 인해 라이브러라와 프레임워크가 계속 등장

웹 애플리케이션을 만듬

사용자와 실시간으로 정보를 주고 받으며 애플리케이션처럼 동작

서버를 구성하고 서버용 프로그램을 만들 수 있음

node.js가 등장하면서 가능해짐.
node.js : 프런트엔드 개발에 사용하던 자바스키립트를 백엔드 개발에서 사용할 수 있게 만든 프레임워크

실습1.
간단하게 클릭하면 글자색 바뀌는 실습을 해보았다.

변수 heading을 사용하여 h1의 글자색을 변경

클릭하면 다음과 같이 변경되는 것을 확인할 수 있다.

또한, css파일을 외부 링크를 통해 연결하는 것 처럼 js확장자 파일을 만들어 링크도 가능하다.

다만, h1의 heading을 참조해야 하기에 head부분이 아닌 body마지막에 링크를 불러온다.

실습2. prompt

이름을 입력해주면 다음과 같다.

브라우저 검사 또는 f12번 > console에서도 간단하게 실습을 할 수 있다.
1. alert("알림창띄우기")

2. prompt

2-1. 디폴트값 정의

기본 값도 정의해줄 수 있다.
3.

vs코드에서 실습한 것도 콘솔창에서 가능

자바스크립트 기본 용어

표현식 : 자바스크립트에서 값을 만들어내는 간단한 코드
문장 : 하나 이상의 표현식이 모여 문장을 구성. 문장 끝에는 세미클론(;) 또는 줄바꿈을 넣어서 종결을 나타냄
프로그램 : 줄바굼으로 문장을 구분해 코드를 작성
식별자 : 프러그래밍 언어에서 이름을 붙일 때 사용하는 단어. 주로 변수명이나 함수명 등으로 사용

숫자로 시작 x, 특수문자는 _ , $만 사용 가능, 공백 문자를 포함할 수 없음.
주석 : 프로그램 코드를 설명할 때, 프로그램 진행에는 전혀 영향을 주지 않음
// 또는 /* * /
출력 : 자바스크립트는 다른 프로그래밍 언어와 비교해서 출력 방법이 많고 복잡

자바스크립트 스타일 가이드

효율성(유지 보수)때문에 필요.

코드를 보기 좋게 들여쓴다

보통 2칸 들여쓰기를 많이 사용

세미클론으로 문장을 구분
공백을 넣어 읽기 쉽게 작성
코드를 설명하는 주석을 작성
식별자는 정해진 규칙을 지켜 작성
중괄호의 위치

자료형 이해하기

자료형 : 컴퓨터가 철리할 수 있는 자료의 형태
숫자형 : 숫자로 이루어짐.
문자열 : string. 작은 따움표나 큰 따움표로 묶은 데이터
논리형 : boolean. 참이나 거짓의 값을 표현하는 자료형, fales는 0을, true는 0을 제외한 모든 숫자로 변환가능.
nudefined 유형 : 자료형이 정의되지 않았을 때의 데이터 상태. 변수 선언만 하고 값이 할당되지 않은 자료형
null 유형 : 데이터 값이 유효하지 않은 상태, 변수에 할당된 값이 유효하지 않다는 의미