웹개발종합반 1주차 - Javascript 맛보기 / Javascript 기초 문법배우기(1) / Javascript 기초 문법배우기(2) / Javascript 연습하기 / 1주차 끝 & 숙제 설명

Javascript 맛보기

 

자바스크립트란?

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어입니다.

 

 

Javascript 기초 문법배우기(1)

 

-변수

let으로 변수를 선언한다

한번 선언했으면 다시 let으로 선언하지 않고 값을 넣는다

- 자료형

리스트 : 순서가 중요한 형태

인덱스는 0부터

딕셔너리 : key 와 value값의 묶음

선언할때 {} , 호출할때 []

리스트와 딕셔너리의 조합

 

-기본함수들

% : 나눗셈의 나머지 구하기

모든 알파벳을 대문자로 바꾸고 싶은 경우 : 

let myname = 'spartacodingclub'

myname.toUpperCase() // SPARTACODINGCLUB

특정 문자열을 나누고 싶은 경우 :

let myemail = 'sparta@gmail.com'

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

 

 

Javascript 기초 문법 배우기(2)

 

- 함수 : 부르면 정해진 동작을 한다

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

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

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

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

return의 의미 끝내고 나를 변신시켜줘!

function sum(num1, num2){
    alert('안녕!')
    return num1 + num2
}

let result2 = sum(2,3)

result2 //5

//순서 : 2,3 대입 -> 안녕! 경고창 띄우기 -> 2+3 더하기

 

- 조건문

let age = 24
if (age > 20) {
	console.log('성인입니다')
} else {
    console.log('청소년입니다')
}

//성인입니다

let sex = '여성'
if (age > 20 && sex == '여성') {
	console.log('성인 여성입니다')
} else {
    console.log('청소년입니다')
}

//성인 여성입니다

let age = 2
if (age > 20) {
	console.log('성인입니다')
} else if (age > 7) {
    console.log('청소년입니다')
} else {
	console.log('아동입니다')
}

//아동입니다

 

- 반복문

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])
}

 

Javascript 연습하기

for (let i = 0; i < bikes.length; i++){
    let name = bikes[i]['stationName']
    let bike = bikes[i]['parkingBikeTotCnt']
    if (bike < 5) {
    console.log(name,bike)
    }
}

 

계속 반복해서 연습할것이니 걱정하지 말자!

 

1주차 끝 & 숙제 설명

위의 모양처럼 html 파일 만들기

 

힌트

1. 그림 - div에 background img 씌우기 or img 태그 사용해도됨

2. 가격부분만 span 태그를 먹여서 따로 클래스 주는 방법

3. --수량을선택하세요-- 부트스트랩에서 찾기

4. 버튼을 가운데로 만드는 것 width / margin auto / display block