JavaScript 기초 문법

오구오구·2022년 11월 11일

스파르타코딩

목록 보기

4/8

자바스크립트란?

HTML은 웹 사이트에서 화면에 표시되는 정보를 약속 한 것이며, CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이라고 할 수 있습니다.
위 둘은 정적인 것만 할 수 있는 언어인데요, 대표적으로 사용자의 반응에 따라 유동적으로 화면과 내용이 바뀌는 일은 처리할 수 없다는 것입니다.

JavaScript는 웹페이지를 동적으로 만들어주는 언어로, 객체 기반의 스크립트 프로그래밍 언어입니다.
단순히 규격을 나타내는 HTML과 CSS와 달리, 변수와 함수 등이 존재하는 프로그래밍 언어이며, 현재도 활발한 발전이 이루어지고 있습니다.

Java와는 거의 관계가 없습니다. (이름만 따왔으며, 설계 근본부터 다름)
브라우저(Chrome, Internet Explorer 등) 안에서 실행되는 클라이언트 언어로, 엔드유저 단에서 동작합니다.

JavaScript를 줄여서 js라고 하며 파일 확장자 또한 .js를 사용합니다.

사용법

CSS와 비슷하게 HTML문서 내에 기술하거나 별도의 파일로 분리하여 사용합니다.

<!-- HTML 내에 기술 -->
<html>
<head>
	<script type="text/javascript">
		document.write('Hello World!');
	</script>
</head>
<body>
</body>
</html>


<!-- 외부 파일에서 불러오기 -->
<head>
	<script type="text/javascript" src="JS파일위치.js"></script>
</head>

자바스크립트 문법 (1)

변수 & 기본연산

변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"
(2를 a라는 변수에 넣는다)

let으로 변수를 선언합니다.

let num = 20
num = 'Bob'

// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.

사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.

let a = 1
let b = 2

a+b // 3
a/b // 0.5

let first = 'Bob'
let last = 'Lee'

first+last // 'BobLee'

first+' '+last // 'Bob Lee'

first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다. ```

변수명은 아무렇게나?

   let first_name = 'bob' // snake case라고 합니다. 또는,
   let firstName = 'bob' // camel case라고 합니다. 
   회사마다 규칙이 있죠.
   과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
   다른 특수문자 또는 띄워쓰기는 불가능합니다!

자바스크립트 문법 (2)

리스트 & 딕셔너리
- 리스트: 순서를 지켜서 가지고 있는 형태입니다.

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_list = [1,2,'hey',3] // 로 선언 가능

b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력

// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력

// 리스트의 길이 구하기
b_list.length // 5를 출력

딕셔너리: 키(key)-밸류(value) 값의 묶음

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

리스트와 딕셔너리의 조합

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'

new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

왜 필요할까요?

💡 순서를 표시할 수 있고, 정보를 묶을 수 있습니다.

앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다.

대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.

    let customer_1_name = '김스파';
    let customer_1_phone = '010-1234-1234';
    let customer_2_name = '박르탄';
    let customer_2_phone = '010-4321-4321';
    ...(알아보기 힘듭니다.)
    
    👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다.
    let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
    let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};
    
    👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다.
    let customer = [
        {'name': '김스파', 'phone': '010-1234-1234'},
        {'name': '박르탄', 'phone': '010-4321-4321'}
    ]
    
    ✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
    
    </aside>

기본 함수들

사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.
👉 왠지 이건 있을 것 같은데?(예 - 특정 문자를 바꾸고 싶다 등) 싶으면 직접 만들지 말고 구글에 먼저 찾아보세요!

**예를 들면, '나눗셈의나머지'를 구하고 싶은 경우**

let a = 20
let b = 7

a % b = 6

**또, 특정 문자로 문자열을 나누고 싶은 경우**

let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta','gmail.com']

result[0] // sparta
result[1] // gmail.com

let result2 = result[1].split('.') // ['gmail','com']

result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

자바스크립트 문법 (3)

1) 더 본격적으로 문법을 배워볼까요!

함수

기본 생김새

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

예시

// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
	console.log('숫자', num1, num2);
	return num1 + num2;
}

sum(3, 5); // 8
sum(4, -1); // 3

조건문

20 보다 작으면 작다고, 크면 크다고 알려주는 함수

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}

is_adult(25)

if, else if, else if, else if else

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}

is_adult(12)

자바스크립트 문법 (4)

반복문

예를 들어 0부터 99까지 출력해야 하는 상황이라면!

console.log(0)
console.log(1<)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)

// 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!

반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

for (let i = 0; i < 100; i++) {
	console.log(i);
}

for (1. 시작조건; 2. 반복조건; 3. 더하기) {
	4. 매번실행
}

1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3

와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.

그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰입니다.
아래 예시를 볼까요? 일단 아래를 복사 붙여넣기 하고, 함께 코딩해볼게요

   let people = ['철수','영희','민수','형준','기남','동희']

   // 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
   // i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
   for (let i = 0 ; i < people.length ; i++) {
	console.log(people[i])
  }

리스트도 그냥 리스트가 아닙니다! 딕셔너리가 들어간 리스트와 찰떡이죠
다시 아래를 복사 붙여넣기 해볼까요?

   let scores = [
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
    {'name':'형준', 'score':50},
    {'name':'기남', 'score':68},
    {'name':'동희', 'score':30},
 ]

   for (let i = 0 ; i < scores.length ; i++) {
	  console.log(scores[i]);
 }

// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,


   for (let i = 0 ; i < scores.length ; i++) {
	  if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	 }
 }

// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.

[참고]https://ofcourse.kr/js-course/JavaScript-%EC%9E%85%EB%AC%B8
[참고]스파르타코딩

오구오구

공부중,,엄청 열심히 하고 있습니다 (브이)

이전 포스트

CSS 기초

다음 포스트