-
배운점:
- 클라이언트 : 서버에게 필요한 정보를 (데이터, HTML, CSS, API) 요청하고, 서버가 전달하는 것들을 브라우저에 (ex Chrome, Naver)보여 준다
- 서버: 웹사이트의 뼈대,꾸미기, 데이터를 (HTML, CSS, JS, API) 저장한 컴퓨터
- HTML: 웹사이트의 뼈대
- CSS: 웹사이트의 꾸미기 (폰트, 컬러, 정렬 등등 디자인 요소)
- Java Script: 웹사이트의 동적인 기능을 구현하는 언어
- API: 요청과 응답을 통해 소프트웨어 끼리 서로 통신할수 있게 도와주는 매커니즘 (Application Programming Interface의 줄임말)
- DB: 서버에 데이터들이 잘 분류되어 저장되어 있는 공간
-
어려운 점, 해결 방안: 자바스크립트 문법 이해하기, 자바스크립트 뽀개기 강의로 추가 학습 진행
-
노트:
HTML 의 기초
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>코드를 입력하세요javascript 기초 문법
//변수와 사칙연산
// 변수는 값을 저장하는 박스와 같다
// 수학의 사칙연산을 사용할수 있다 +,-,*,/, **(제곱)
let a = 2
let b = 3
a+b = 5
const shirtPrice= 50 // const 로 선언한 값은 변경되지 않는다
const pantsPrice= 70
let totalPrice = 0
totalPrice += shirtPrice // totalPrice + shirtPrice 와 동일
totalPrice -= pantsPrice // totalPrice - pantsPrice 와 동일
// 온라인 쇼핑몰에서 판매하는 상품들의 데이터를 불러와야 한다면 세일이 적용되면 토탈 값이 변경될수 있으니 let을 사용할수 있다
//리스트, 딕셔너리, 배열
온라인 쇼핑몰에 판매하는 셔츠 상품이 100개가 넘는다고 가정한다면, 100개의 셔츠값을 매번 불러와야 한다면 매우 비효율 적이다.
const shirPrice1 = 50
const shirtPrice2= 70
const shirtPrice3= 100
const shirtPrice4= 20
.
.
.
const shirtPrice100=35
// 배열을 사용하여 하나의 변수로 여러개 데이터값을 순서대로 저장할수 있다
const shirtPrice= [50, 70, 100, 20, ....35]
shirtPrice[0]= 50 //배열의 카운팅은 0 부터 시작한다 0번째의 데이터를 불러오자
const shirtPrice.push(45) // 배열에 데이터를 추가, 삭제 할수 있다
const shirtPrice = [50, 70, 100, 20, ....35, 45]
const shirtPrice.length // 101을 출력한다 .length를 사용하면 배열에 길이를 측정할수 있다
const shirtPrice.pop (45)// 배열의 마지막 값이 삭제 된다
//딕셔너리를 사용하면 key와 value 조합으로 데이터를 불러올수 있다
let itemInfo = {'name':'shirt1', 'price':50}
console.log(itemInfo) // shirt1, 50 를 불러온다
console.log ('name'+ '의 가격은' + 'price'+ '달러 입니다') // 이 shirt1의 가격은 50 달러 입니다 를 출력한다
console.log(`${name}의 가격은 ${price} 달러 입니다`) // template literal을 사용하면 위 내용을 쉽게 불러올수 있다
//template literal `` 연결하고자 하는 데이터와 ${변수}를 사용하면 + 로 연결하는것 보다 쉽다!
itemInfos = [{'name':'shirt1', 'price':50}, {'name':'shirt2', 'price':70}] // 리스트(배열)과 딕셔너리의 조합
//itemInfos[0]['price'] 값은 50
//함수 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
// function sum 이 실행되면, 변수 (numb1,num2)가 불려와져서 명령한 코드의 값 (더한 결과)를 돌려주는 함수
function sum(num1, num2) {
console.log('숫자', num1, num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
//조건문 if, else if, else 는 조건이 만족됬을 때 코드를 실행한다
const distance = 2
if (distance < 2) { //2km 보다 적을 때
console.log("걸어가자")
} else if (distance >= 2 && distance < 5) { // 2km 보다 크고 5km 보다 작을 때, 논리연산자를 && 를 이렇게 활용할 수 있어요!
console.log("택시를 타자")
} else { //5km 보다 클때
console.log("기차를 타자")
}
// distance =2, 리턴값은 걸어가자
//반복문
let temperature = 20
while (temperature < 25) {
console.log(`${temperature}도 정도면 적당한 온도입니다.`)
temperature++ // 증감연산자를 활용해서 온도를 변화시킵니다.
}
//콘솔창에서 온도가 24까지 출력됨
for (let temperature = 20; temperature < 25; temperature++) {
console.log(`${temperature}도 정도면 적당한 온도입니다.`)
}
//for문이 실행되는 순서를 한번 정리해볼까요?
//1. temperature라는 변수를 선언하고 값을 할당합니다. (begin)
//2. temperature가 25보다 작은지 연산합니다. 결과값이 true라면 계속 실행. false라면 for 문 종료 (condition)
//3. 중괄호 안의 코드가 실행됩니다.
//4. temperature에 1을 더해서 재할당하고 2번 과정부터 다시 반복합니다. (step)
//반복문 점수가 70점 미만인 학생의 이름을 출력해 보자
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++) { //첫번째 리스트부터 리스트의 마지막 까지 반복해서 명련된 값을 찾는다
if (scores[i]['score'] < 70) {. // 70점 이상의 점수를 갖고 있는 영희, 철수의 이름이 출력 된다
console.log(scores[i]['name']);
}
}
웹개발자가 되고 싶은 수딩의 코딩 일지