안녕하세요 JJU_DEVELOPER입니다.
지난 시간에는 자바스크립트란 무엇인가에 대한 내용을 배워봤습니다.
▼▼▼지난 시간 복습하기▼▼▼
자바스크립트(JavaScript) 기초 용어설명 및 소스 작성 규칙 설명
안녕하세요 JJU_DEVELOPER입니다. 이번시간에는 자바스크립트에 대한 기초 설명입니다~! 기초를 탄탄하게 배워봅시다~😊 목차 13-1 자바스크립트로 무엇을 할까요~? 13-2 웹 브라우저와 자바스크립트
jju240.tistory.com
이번시간에는 자바스크립트의 필수 문법 설명에 대한 기초 설명입니다~!
탄탄하게 배워봅시다~😊
목차
14-1 변수 알아보기
14-2 자료형 이해하기
14-3 연산자 알아보기
14-4 조건문 알아보기
14-5 반복문 알아보기
14-1 자바스크립트(JavaScript)의 변수 알아보기
변수란??
• 변수(variable) : 값이 여러 번 달라질 수 있는 데이터
• 상수(constant) : 값을 한번 지정하면 바뀌지 않는 데이터
변수 이름 생성 규칙
• 영어 문자, 언더스코어(_), 숫자를 사용한다
• 첫 글자는 영문자, _기호, $기호를 사용한다
• 띄어쓰기나 기호는 허용하지 않는다
• 영어 대소문자를 구별하며 예약어는 변수 이름으로 사용할 수 없다
• 여러 단어를 연결할 때는 하이픈이나 언더스코어를 사용할 수 있고 중간에 대문자를 섞어 쓸 수도 있다
• 변수 이름은 의미 있게 작성한다
변수 종류
var, let, const
ES6 이전에는 var 만 존재했으며 function-scoped로 인해 다른 언어들과 다른 문제가 있었습니다.
var는 지역변수 개념으로 함수 범위에서 유효함.
var를 선언하지 않으면 자동으로 전역변수가 됨.
let과 const는 ES6에서 등장한 block-scoped 변수 선언.
let은 값의 재할당이 가능하고 const는 불가능(immutable).
const로 선언된 배열이나 객체의 경우 새로운 객체로 재할당하는 것은 안되고,
배열값의 변경/추가, 객체의 필드 변경등은 가능
hoisting
호이스팅은 끌어올리기라는 사전전 의미를 가지고 있습니다.
자바스크립트에서 모든 변수 선언은 호이스트 되고 함수의 경우 선언형식은 호이스팅 되며
변수에 할당된 형태는 호이스팅 되지 않습니다.
자바스크립트 변수에 있어 변수의 선언이 위치와 상관없이 최상위 레벨로 끌어올려진다고 이해할 수 있습니다.
14-2 자료형 이해하기
자바에서는 항상 int형인지 String 형인지를 항상 명시를 해주었습니다.
하지만, 자바스크립트에서는 우선 변수를 선언하면 컴파일러가 해당 변수의 값을 보고 자동으로 처리해 줍니다.
<자바스크립트의 데이터 유형 자동 변환>
자바스크립트의 편리한 점이면서도 약점인 부분이 데이터 유형이 유연하다는 것입니다.
다시 말해 변수의 데이터 유형이 중간에 바뀔 수 있다는 것이죠.
이때에는 엄격 연산자를 사용할 수 있습니다.
'use strict'는 자바스크립트의 의도치 않은 오류를 막아주는 수단으로 알려졌고 엄격연산자를 잘 알고 사용하면 자바스크립트의 여러 가지 잠재적인 오류를 막아주는데 많은 도움을 줍니다!
14-3 연산자 알아보기
| 비교 연산자 | 설명 |
| == | 값이 같은지 비교 |
| === | 값과 타입이 모두 같은지 비교 |
| != | 같지 않음 |
| !== | 값이나 타입이 같지 않음 |
| > | 크다 |
| < | 작다 |
| >= | 같거나 크다 |
| <= | 작거나 크다 |
| ? | 3항연산 (조건)? 참인경우 수행 : 거짓인경우 수행 |
| 논리 연산자 | 설명 |
| && | AND 연산자 |
| || | OR 연산자 |
| ! | NOT 연산자 |
14-4 조건문 알아보기
if, else if
특정 조건이 참인 경우 수행되는 코드 블록을 정의합니다. else와 결합해 조건 범위나 조건을 세분화하는 것이 가능하며 AND, OR 연산을 함께 사용할 수 있습니다.
switch
입력값에 따라 처리를 다르게 하는 경우 사용합니다. 내용적으로는 if ~ else if와 유사합니다.
14-5 반복문 알아보기
자바스크립트의 반복문 역시 자바와 매우 유사합니다.
for, while, forEach, for-in, for-of-for 등이 있습니다.
1. for : 고전적인 for문
=> for(let i = 0; i < 10; i++){... 반복 수행 코드...}
2. for in : 객체의 프로퍼티 키 열거 전용
=> for(const key in 객체){... 반복 수행 코드...}
3. for of : 이 트러블 순회 전용
=> for(const item of 이터러블){... 반복 수행 코드...}
※이터러블에는 String, Array, Map, Set, DOM컬렉션(HTMLColletion, NodeList) 등이 있습니다.
4. forEach(): 배열 순회 전용 메서드
=> 배열. forEach( function(value, index, array){... 반복 수행 코드...} )
※ 콜백함수의 매개변수로 value에 요소값, index에 인덱스, array에 원본 배열이 들어옵니다.
5. while : 고전적인 while문
=> while(조건식){... 반복 수행 코드...}
6. do while : 고전적인 do... while문
=> do {... 반복 수행 코드...} while(조건식);
7. Object 객체 메서드: 객체 순회 전용입니다.
1) Object.keys(객체)
: 객체의 프로퍼티 '키'를 배열로 반환합니다.
2) Object.values(객체)
: 객체의 프로퍼티 '값'을 배열로 반환합니다.
3) Object.entries(객체)
: 객체의 프로퍼티 [키, 값]을 배열로 반환합니다.
8. Array.prototye 메서드 : 배열 전용
1) 배열. forEach( (value, index, array)=>{... 반복 수행 코드...} )
: 배열의 length만큼 반복하여 콜백함수를 호출합니다.
: 콜백함수의 매개변수로 value에 요소값, index에 인덱스, array에 원본배열이 들어온다.
2) 배열. map( (value, index, array)=>{... 반복 수행 코드...} )
: forEach와 동일(순회 방식, 콜백함수 매개변수 등)
: 다른 점 => 각 콜백함수에서 return 하는 값 들으러 새로운 배열을 만들어 반환한다.
3) 배열. filter( (value, index, array)=>{... 반복 수행 코드...} )
: forEach와 동일(순회 방식, 콜백함수 매개변수 등)
: 다른 점 => 각 콜백함수에서 return 하는 값이 true일 때만, 그때의 value 값들로 새로운 배열을 만들어 반환한다.
4) 배열. reduce( (previousValue, currentValue, currendIndex, array)=>{... 반복 수행 코드...}, initialValue )
: 두 번째 매개변수인 initialValue값을 시작으로,
: 각 콜백함수가 return 하는 값이 다음에 실행되는 콜백함수의 previousValue로 들어갑니다.
: 최종적으로 마지막 콜백함수가 return 하는 값을 반환합니다.
실습 1번 : 자바스크립트를 이용한 나이계산 프로그램 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나이 계산하기</title>
</head>
<body>
<script>
let currentYear =2023;
let birthYear;
let age;
birthYear = prompt("태어난 연도를 입력하세요 YYYY","");
age = currentYear-birthYear+1;
document.write(currentYear+"년도에 태어난 사람의 나이는? "+age+"세입니다.")
</script>
</body>
</html>
자바스크립트를 이용한 if문 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>조건문</title>
</head>
<body>
<script>
var userNumber = prompt("숫자를 입력하세요.");
if (userNumber !== null)
(userNumber % 3 === 0) ? alert("3의 배수입니다.") : alert("3의 배수가 아닙니다.");
else
alert("입력이 취소됐습니다.");
</script>
</body>
</html>만약 입력하는 수가 널값이 아닐 때,
수가 3으로 나눴을 때 0이 되니? 그렇다면 3의 배수라고 말해줘.
자바스크립트를 이용한 구구단 출력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구구단 - for문</title>
<link rel="stylesheet" href="css/gugudan.css">
</head>
<body>
<h1>구구단</h1>
<script>
var i, j;
for (i = 1; i <= 9; i++) {
document.write("<div>");
document.write("<h3>" + i + "단</h3>");
for (j = 1; j <= 9; j++) {
document.write(i +" X " + j + " = " + i*j + "<br>");
}
document.write("</div>");
if(i === 3) break;
}
</script>
</body>
</html>div {
display:inline-block;
padding:0 20px 30px 20px;
margin:15px;
border:3px solid rgb(255, 165, 225);
line-height:2;
}
div h3 {
text-align:center;
font-weight:bold;
}
구구단을 이용한 방법은 이중 for문을 이용하여 하나씩 단이 끝나면 단의 값이 올라가는 형식입니다.
그렇다면 원래는 일자로 쭉 내려오는 구구단이 어떻게 저렇게 가로로 구구단을 출력할 수 있을까요?
정답은 css 파일에 따로 정의를 해놓은 stylesheet을 이용하고, 그 링크를 해당 html과 연결을 해주었습니다.
이렇게 사용하는 방법은 이미 자바를 배우셨다면, 쉽게 배우실 수 있습니다~!
처음부터 너무 딥하게 공부하기보다는 우선적으로 기본 개념만 잘 익혀두시면서 필요하실 때마다
다른 예제를 찾아보는 방법도 좋습니다.
그럼 다음시간에는 자바스크립트를 이용한 각 함수와 변수의 특징에 대해 더욱 자세히 알아보는
시간을 갖겠습니다.
오늘도 수고하셨습니다.
'주니어 기초 코딩공부 > Javascript & jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery)란? + 선택자 상세 설명 (1) | 2023.01.12 |
|---|---|
| 자바스크립트JavaScript 문서 객체 모델(DOM) 개념 및 DOM의 이벤트 처리 및 삭제 방법 (1) | 2023.01.11 |
| 자바스크립트JavaScript 내장 객체, 브라우저와 관련된 객체 알아보기 (1) | 2023.01.11 |
| 자바스크립트JavaScript 함수표현식과 이벤트 처리기 개념 타파!! (3) | 2023.01.10 |
| 자바스크립트(JavaScript) 기초 용어설명 및 소스 작성 규칙 설명 (1) | 2023.01.09 |