2022-06-07
자바스크립트로 무엇을 할 수 있나?
1) 웹 요소를 제어한다
- 웹 요소를 가져와 필요에 따라 스타일을 변경하고 움직일 수 있음
- 웹 사이트 UI 부분에 많이 활용한다
ex) 마우스 hover 했을 때 메뉴가 펼쳐짐, 한 화면에서 탭을 누르면 내용만 바뀌도록 하는 컨텐츠
2) 다양한 라이브러리를 사용할 수 있다
- 웹 중심 서비스가 늘어나면서 다양한 라이브러리와 프레임워크가 지속적으로 등장하고 있다
ex) 시각화를 위한 D3.js, 머신러닝을 위한 tensorflow.js, DOM 조작을 위한 JQuery, 웹 애플리케이션 개발을 위한 React, Angular, Vue 등
3) 웹 애플리케이션을 만든다
- 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고 받으며 애플리케이션처럼 동작한다
ex) 온라인 지도 길찾기 서비스, 데이터 시각화 서비스, 오픈소스 API를 활용한 다양한 서비스
4) 서버를 구성하고 서버용 프로그램을 만들 수 있다
- node.js : 프론트엔드 개발용 Js를 백엔드 개발용으로 사용 가능하게 만든 프레임워크
JS 기본 용어
표현식
자바스크립트에서 값을 만들어내는 간단한 코드
문장
하나 이상의 표현식이 모여 문장(statement)을 구성. 문장 끝에는 세미콜론(;) or 줄바꿈을 넣어 문장의 종결을 나타낸다
프로그램
줄바꿈으로 문장을 구분해 코드를 작성한다
키워드
자바스크림트가 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어
따라서 식별자에는 키워드와 똑같은 단어는 사용이 불가능하다(오류발생)
식별자
프로그래밍 언어에서 이름을 붙일 때 사용하는 단어. 주로 변수명이나 함수명 등으로 사용한다.
- 키워드(예약어) 사용불가
- 숫자로 시작 불가
- 특수 문자는 _와 $만 허용
- 공백 문자 불가
식별자를 만드는 보편적인 관례
- 클래스의 이름은 항상 대문자로 시작
- 여러 단어 조합은 각 단어의 첫 글자를 대문자로 ex) FirstName
- 변수, 인스턴스, 함수, 메소드의 이름은 항상 소문자로 시작
- 두 단어 이상의 조합일 때 단어 사이에 공백 불가
식별자의 종류
| 구분 | 단독으로 사용 | 다른 식별자와 사용 |
|---|---|---|
| 식별자 뒤에 괄호 없음 | 변수 | 속성 |
| 식별자 뒤에 괄호 있음 | 함수 | 메소드 |
주석
프로그램 코드를 설명할 때 사용. 프로그램 진행에 전혀 영향을 주지 않는다
html 주석 : <!-- 내용 -->
Js 주석 : // 한줄 주석, /* 여러줄 주석 줄바꿈 영역 포함가능 */
출력
JS는 출력 방법이 많고 복잡하다.
경고창 출력 alert()함수, 콘솔 출력(에디터용) console.log()메소드
오류 수정
Ctrl+Shift+i (F12) 개발자 모드에서 오류 알림을 확인할 수 있다
ReferenceError : 예외 처리
SyntaxError : 구문 오류
간단한 동작 해보기
디폴트
클릭시
<html>
<head>
<link rel="stylesheet" href="./css/change-color.css">
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해보세요</p>
<script src="./js/change.js"></script>
</body>
</html><style>
body {
text-align:center;
}
#heading {
color:blue;
}
#text {
color:gray;
font-size:15px;
}
</style><script>
var heading = document.querySelector('#heading');
heading.onclick = function()
{
heading.style.color = "red";
}
</script>간단한 출력 해보기
창에 값을 입력하면 그 값을 웹문서에 출력해주는 간단한 동작
<html>
<head>
<style>
body {
font-size:1.3em;
text-align: center;
}
</style>
</head>
<body>
<h1>어서오세요</h1>
<script>
var name = prompt("이름을 입력하세요")
document.write("<b><big>" + name + "</big></b>님 환영합니다.")
</script>
</body>
</html><script>
var heading = document.querySelector('#heading');
heading.onclick = function(){
heading.style.color = "red";
}
</script>콘솔창에 함수 써보기
-
alert("알림창 띄우기") : 알림 창이 뜸
-
prompt("이름을 입력하세요") : 값을 받을 수 있는 입력창이 나옴
-
console.log("콘솔창에 출력") : 콘솔로그에 뜸. 에디터용
-
prompt("나이를 입력하세요", 27) : ("알림 내용", 디폴트 값)
-
var name = prompt("이름 : ");
document.write(name + "님 어서오세요");
: name 프롬프트에서 받은 입력값(변수)를 저장해서 document.write 로 화면에 직접 출력해준다.
자바스크립트 스타일 가이드
스타일 가이드 ?
코딩 규칙을 '스타일 가이드', '코딩 컨벤션', '코딩 스타일', '표준 스타일' 등으로 불린다
코딩 규칙은 왜 필요한가?
데이터 유형이 유연하여 잦은 오류 발생이 있기도 하지만, 궁극적으로는 유지 보수의 효율성을 위함
기본 규칙
- 들여쓴다
- 세미콜론으로 문장을 구분한다
- 식별자, 연산자, 값 사이에 공백을 넣어 읽기 쉽게 작성(호불호이긴 함)
ex) var sum=num+10; //비권장
var sum = num + 10; //권장 - 코드를 설명하는 주석을 작성한다
- 식별자는 정해진 규칙을 지켜 작성
- 중괄호 위치 (이것도 호불호 많이 갈림)
1) --------------------------------
for ( let | = 0; | < length; i++) {
const element = array[i]
}
2) --------------------------------
for (let | = 0; | < length; i++)
{
const element = array[i]
}
자료형 이해하기
자료형이란?
컴퓨터가 처리할 수 있는 자료의 형태
false 는 0 , true는 0을 제외한 모든 것이라 볼 수 있다...
1. 숫자형(number)
정수 : 소수점이 없는 숫자
실수 : 소수점이 있는 숫자
자바스크립트는 실수를 정밀하게 계산하지 못한다
2. 문자형(string)
작은 따옴표(' ')나 큰따옴표(" ")로 묶은 데이터
typeof : 자료형의 형태를 보여줄 때 쓴다
prompt : 프롬프트에서 넘어오는 값은 문자열이다
3. 논리형(boolean)
true 나 false의 값을 표현하는 자료형. 불린 유형.
조건에 따라 true나 false 값을 표시한다.
100 < 10
->false
100 > 10
-> true
4. undefined 유형
자료형이 정의되지 않았을 때의 데이터 상태
변수 선언만 하고 값이 할당되지 않은 자료형
5. null 유형
데이터 값이 유효하지 않은 상태
변수에 할당된 값이 유효하지 않다는 의미
6. 배열 (array)
하나의 변수에 여러 값을 저장할 수 있는 복합 유형
문자열 자료형
- 큰 따옴표와 작은 따옴표 병행하여 사용
- 특수 문자
이스케이프\ : 따옴표를 문자 그대로 사용해야할 때
\n : 줄바꿈 , \t : 탭 , \\ : 역슬래시(\) 그 자체 - 문자열 연산자
숫자 자료와 마찬가지로 문자열도 기호를 사용해서 연산 처리 가능'가나다' + '라마' + '바사아' + '자차카타' + '파하'
"가나다라마바사아자차카타파하" - 문자 선택 연산자
문자열 내부의 문자를 하나 선택'안녕하세요' [0]
->"안"
'안녕하세요' [1]
->"녕"
'안녕하세요' [2]
->"하" - 문자열 길이 구하기
"안녕하세요."length
-> 5
"자바스크립트".length
-> 6
"".length
-> 0 - Uncaught SyntaxError: Unexpected identifier(구문 오류)
식별자가 예상하지 못한 위치에서 등장했다는 오류
ex) 이스케이프 문자를 사용하지 않고 한 종류의 따옴표만 사용할 때
'This is 'string''
-> (X) Uncaught SyntaxError: Unexpected identifier
숫자열 자료형
- 소수점이 있는 숫자와 없는 숫자를 모든 같은 자료형으로 인식한다
- 숫자 연산자에는 + 더하기, - 빼기, * 곱하기, / 나누기, % 나머지
불 자료형
자바스크립트에서는 참과 거짓 값을 표현할 때 사용함
비교 연산자
| 연산자 | 설명 |
|---|---|
| == | 타입 |
| === | 양쪽이 같다 |
| !== | 양쪽이 다르다 |
| > | 왼쪽이 더 크다 |
| < | 오른쪽이 더 크다 |
| >= | 왼쪽이 더 크거나 같다 |
| <= | 오른쪽이 더 크거나 같다 |
마무리 Tip
var name = prompt("나이 입력");
document.write(name)
document.write(typeof(name))을 개발자 콘솔창에서 입력하면 웹 브라우저 화면에
22string
이란 텍스트가 쓰이는데 string은 문자열이란 뜻으로, 나이 입력 프롬프트는 숫자로 쓰였지만 문자형 자료형이라는 걸 표기해줘야한다
어려운 점
새 언어의 식(?)과 함수 이용에 대한 개념이 부족하지만 동작하는 느낌의 감은 잡은 것 같다
해결 방법
다음 시간에 배운다고 함
소감
상호작용하는 걸 만드는 게 재밌는 것 같다
