JavaScript 기초 문법

SW/JavaScript

JavaScript 기초 문법

ahhyeon 2023. 2. 27. 16:47

1. 자바스크립트란?

HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어

모든 웹 서버는 HTML + CSS + JavaScript

console
> 띄어놓은 페이지에서 빠르게 자바스크립트를 테스트 할 수 있음
단, 새로고침하면 모두 사라짐!

• [크롬 개발자 도구] 를 열어서 , console 탭에 작성
• 마우스 오른쪽 클릭 ㅡ> 검사 ㅡ> console
• 윈도우 : F12
• 맥 : alt(option) + command + i

2. 코드구조

여러개의 구문은 세미콜론을 기준으로 구분함

alert('Hello'); alert('World');

3. 변수

→ 변수는 값을 저장하는 박스

→ 키워드를 이용해 선언

let - 중복 선언 불가능, 재할당 가
const - 중복 선언 불가능, 재할당 불가
var - 중복 선언 가능

3-1. 변수명

let first_name = 'ahyeon' // snake case
let firstName = 'ahyeon' // camel case

# 쉽게 알아볼 수 있게 쓰는게 중요!
# 특수기호는 $와 _만 사용할 수 있음
# 띄어쓰기는 불가능

3-2. 자료형

자바스크립트는 8가지 기본 자료형을 지원

Number : 정수와 부동 소수점을 저장
BigInt : 아주 큰 숫자를 저장
String : 문자열을 저장
boolean : 논리값 true / false을 저장
null : '비어있음', '존재하지 않음'을 나타내는 null값(독립 자료형)
undefined : 값이 할당되지 않은 상태를 나타내는 undefined값(독립 자료형)
symbol : 복잡한 자료구조를 저장하는데 쓰이는 객체형과 고유한 식별자를 만들 때 사용

typeof 연산자는 값의 자료형을 반환

let age = 10;
// undefined 출력
typeof age;
// "number" 숫자형 출력

let input = prompt("숫자를 입력해주세요", "숫자");
        alert(typeof(input));
        // 무슨 타입인지 알아보기 위해 쳐본 코드
        // 숫자형이 나와야하는데 타입이 string으로 나옴
        // why? prompt()는 사용자로부터 입력 받으면 숫자로 리턴하는게 아님!
        // prompt()를 통해서 입력을 받으면 string타입으로 됨.

        int numType = Number(input);
        // Number(input)은 자바에서 생성자호출
        // Number()를 통해서 Stirng을 숫자로 바꿈
       alert(typeof(numType));
       alert(numType);  // NaN(Not a Number) 숫자가 될 수 없는 것을 뜻[ex. 가나다]

4. 상호작용

host 환경이 브라우저인 경우, UI함수를 이용해 사용자와 상호작용할 수 있다.

alert ()

➡️ 이 함수가 실행되면 '확인(OK)' 버튼을 누를 때 까지 메세지를 보여주는 창이 계속 떠있음

alert("Hello");

prompt()

➡️ 브라우저에서 제공하는 prompt 함수는 두개의 인수를 받음

➡️ 함수가 실행되면 텍스트 메시지와 input 필드, 확인 및 취소 버튼이 있는 모달창을 띄어줌.

result = prompt(title, [default]);

# title : 사용자에게 보여줄 문자열
# default : 입력 필드의 초기값(선택값)

💡 대괄호[...]의 의미는?
→ default를 감싸는 대괄호는 이 매개변수가 필수가 아닌 선택값이라는 것!

prompt 함수는 사용자가 input 필드에 기재한 문자열을 반환하고, 사용자가 입력을 취소한 경우 null이 반환.

let year = prompt('년도를 입력하세요.', 2023);
alert(`해당 년도는 ${year}년 입니다.`);  // 해당 년도는 2023년입니다.

confirm()

➡️ 매개변수로 받은 question과 확인 및 취소 버튼이 있는 모달창을 보여줌.

result = confirm(question);

➡️ 사용자가 확인 버튼을 누르면 true, 그 외는 false를 반환

let result = confirm("좋아요 클릭 하시겠습니까?");
alert(result); // 확인 버튼 누르면 true 출력

5. 리스트 & 딕셔너리

5-1. 리스트

순서를 지켜서 가지고 있는 형태

# 리스트를 선언
let a_list = []  
let b_list = [1,2,'bye',3]

b_list[0] // 1
b_list[2] // 'bye'

# 리스트에 요소 넣기
b_list.push('good')
b_list // [1, 2, "hey", 3, "good"]

# 리스트의 길이 구하기
b_list.length // 5

5-2. 딕셔너리

키(key) - 벨류(value) 값의 묶음

# 딕셔너리 선언
let a_dict = {}  
let b_dict = {'name':'cookie','age':20} 

b_dict['name'] // 'cookie'
b_dict['age'] // 20

b_dict['height'] = 160 // 딕셔너리에 key:value 넣기
b_dict // {name: "cookie", age: 20, height: 160}

5-3. 리스트와 딕셔너리 조합

names = [{'name':'cookie','age':20},{'name':'peanut','age':29}]

// names[0]['name']의 값은? 'cookie'
// names[1]['name']의 값은? 'peanut'

new_name = {'name':'jelly','age':14}
names.push(new_name)

// names의 값은? [{'name':'cookie','age':20},{'name':'peanut','age':29},{'name':'jelly','age':14}]
# names[2]['name']의 값은? 'jelly'

6. 함수

# 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}

# 사용하기
함수이름(필요한 변수들);

6-1. 연산자

window.onload = function() {
	let list = ""; // String 타입
	let num = 10; // Number 타입

	// 복합대입 연산자를 통하여 list 변수에 문자열 누적
	list += "<ul>";
	list += "    <li>안녕</li>";
	list += "    <li>자바스크립트</li>";
	list += "</ul>";
    
    // 정수형도 복합대입연산을 통해서 값을 누적시킴
    num += 10; num += 10;
    num += 10; num += 10;
    
    // 문서에 출력
    document.body.innerHTML = list;
    document.body.innerHTML = num; // 누적했기 때문 바뀌는 것

let num = 10;

# 증감연산자 사용
alert(num++); // 후위 증가연산자(;이 끝난 후 증가됨 -> 11)
alert(++num); // 전위 증가연산자(;이 끝나기 전에 이미 증가됨 -> 12)
alert(num++); // 13

document.write(num);

7. 조건문

7-1. if문

# 짝수 확인

let value = window.prompt("숫자를 입력하세요.");
alert(typeof(value));

// prompt()에서 받은 value 값은 string 타입
// 아래코드는 parseInt()를 통해서 string 타입을 정수타입으로 강제형변환
parseInt(value);
alert(typeof(value));

if(value % 2 == 0) {
	alert("짝수입니다.");
}
else {
	alert("홀수입니다.");
}

# 논리 연산자 사용
# 01. 2와 8의 공배수

let value = window.prompt("숫자를 입력하세요.");
value = parseInt(value);

// && 논리 연산자로써 두개의 조건이 true이면 true를 리턴
if((value % 2 == 0) && (value % 8 == 0)) {
	alert("2와 8의 공배수입니다.");
}
else {
	alert("2와 8의 공배수가 아닙니다.);

# 02. 2이거나 8의 배수

let value = window.prompt("숫자를 입력하세요.");
value = parseInt(value);

// ||는 논리 연산자로써 둘 중의 하나의 조건만 true이면 true를 리턴
if((value % 2 == 0) || (value % 8 == 0)) {
	alert("2이거나 8의 배수입니다.");
}
else {
	alert("2이거나 8의 배수가 아닙니다.");
}

// 사용자로부터 입력받는 부분
let value = window.prompt("해당번호를 고르세요.");

// 값 비교
// cpu의 참조를 적게 받고자 함(if-else if-else 구문)

if(value == "1") {
	document.write("당첨! 아이폰 14 pro");
}
else if(value == "2") {
	document.write("당첨! 에어팟 pro2");
}
else if(value =="3") {
	document.write("당첨! 보스 헤드셋");
}
else {
	document.write("꽝!")
}

8. 반복문

8-1. for문

  # 초기화 > 비교(조건식) > 실행문(싱글루프) > 증감식
  # *을 일렬로 출력
  
        for(let i=1; i<=10; i++) {
            document.write("*");
        }

# string 배열을 선언과 동시에 초기화
# 배열은 인덱스로 관리해서 값을 수정할때도 인덱스를 사용해야함.
# 단, 배열의 인덱스는 0부터 시작

// document.write(data[0]); 일일히 출력하는 것보단 반복문을 사용하는게 보기 좋음
// for(let i=0l i<7; i++) {
// 	document.write(data[i] + "<br>"); 
// }

let data = ["서울", "인천", "경기", "대구", "부산", "강원도", "제주"]

# 배열명.length는 배열의 길이를 구해줌!
document.write("data배열의 길이 : " + data.length + "<br>");
for(let i = 0; i<data.length; i++) {
	document.write(data[i] + "<br>");
}

# 01. 구구단
// 사용자로부터 입력받는 부분
let dan = prompt("몇 단을 출력할 까요?");

// string -> number 강제형변환
data = parseInt(dan);

for(let i=1; i<=9; i++) {
	document.write(dan + "*" + i + "=" + (dan+i) + "<br>");
}

# 02. 구구단(중첩반복문)

// 외부루프의 초기값은 반드시 1번만 초기화 
for(let i=2; i<=9; i++) {
	document.write("<div>");
    document.write("<h3>" + i + "단</h3>");

// 내부루프의 초기값은 외부루프가 도는 만큼 초기화
for(let j=1; j<=9; j++) {
	document.write(i + "*" + j + "=" + (i*j) + "<br/>");
   }
document.write("</div>");
}

8-2. switch문

switch문은 정형화, 한정된 데이터에 가독성을 좋게 하고자 한다면 써도 좋음.

 // 사용자로부터 입력받는 부분
       let rank = window.prompt("직급을 입력하세요. 1-부장, 2-차장,3-과장,4-대리,5-사원");
       switch(job) {
          case "1" : document.write("<p>부장의 급여는 <strong> 700만원 </strong>입니다.");
          break; // break문이 없으면 입력한 부분아래에 있는 내용을 다 출력함
          case "2" : document.write("<p>차장의 급여는 <strong> 600만원 </strong>입니다.");
          break;
          case "3" : document.write("<p>과장의 급여는 <strong> 500만원 </strong>입니다.");
          break;
          case "4" : document.write("<p>대리의 급여는 <strong> 350만원 </strong>입니다.");
          break;
          case "5" : document.write("<p>사원의 급여는 <strong> 200만원 </strong>입니다.");
          break;
          
          // default는 옵션임
          default : alert("잘못 입력하셨습니다.");
       }