<웹 개발에 쓰이는 언어>
웹브라우저 - 크롬, 사파리, 웨일 등
1. 웹 브라우저가 읽을 수 있는 언어
확장자가 .html 인 언어만 읽을 수 있음
마크업언어 - html css
클라이언트 사이드 스크립트 언어 - javascript
라이브러리 - react.js bootstrap vue.js jquery
2. 웹 브라우저가 못 읽는 언어
서버 사이드 스크립트 언어 - python jsp php asp
<웹서비스 아키텍처 기초>
웹사이트는 어떻게 구동하는가?
네이버 사이트에 들어가기 위해서 우리는
pc나 모바일로 -> 웹브라우저(크롬 등)을 켜서 -> 주소창에다 도메인(naver.com)을 넣음 -> DNS 서버에 도메인 주소를 전달 -> DNS서버에서 도메인을 네이버 웹사이트의 코드들(html 등)이 들어가 있는 컴퓨터의 IP주소를 브라우저로 리턴해줌 -> IP주소로 서버에 접근하여 80번 문(포트)을 열고 들어감 (웹사이트 정보를 가지고 오는 문은 80번) -> 문을 열고 들어가면 있는 방(폴더)에서 html 코드를 가지고 온다 -> 웹브라우저로 전달 -> 웹브라우저는 html 코드를 읽고 네이버 사이트를 띄워줌
클라이언트 - 모바일, pc
도메인 - 숫자로 이루어진 인터넷상의 컴퓨터 주소(ip)를 알기 쉽도록 이름을 지어준 것 naver.com
서버 - 외부에서 들어갈 수 있는 문을 열어놓는 컴퓨터 (내 컴퓨터는 외부에서 들어와서 내 파일을 가져갈 수 없음)
<javascript 코딩 기초 이론>
1. 변수와 상수
변수 - 어떤 관계나 범위 안에서 여러가지 값으로 변할 수 있는 수
상수 - 변하지 않고 항상 같은 값을 가지는 수
var let const
let 변수명 = 넣고자 하는 값;
Const 상수명 = 넣고자 하는 값;
var도 변수명을 넣기 위해 썼는데 리뉴얼 된 let 이 나와서 이제 거의 안씀
let myAge = 29;
let myNme = "한별";
Const bloodType = "O"
결과가 잘못된 것 같을 때 - 검사 - 에러 보기
2. 함수
function 함수명(매개변수){함수가하는일;}
ex) function plus(x,y){return x+y;}
한 번 만들어놓으면 대입해서 계속 사용할 수 있기 때문에 함수를 쓴다.
3. if 조건문
if(조건) {조건이 True인 경우 실행되는 일;}else{조건이 다 False인 경우 실행되는 일;}
ex) let x = 20
if(x/5 ==4){box("A");}else{box("C");}
if(조건) {조건이 True인 경우 실행되는 일;}else if{조건이 다 True인 경우 실행되는 일;}else{조건이 다 False인 경우 실행되는 일;}
4. 연산자
1) % : 남는 수 -> A%B - A를 B나눈 나머지 수
<html>
<head>
<script>
let a = 19;
if(a%1984==1){
alert("홀수");
}else{
alert("짝수");
}
</script>
</head>
</html>
미션 : if문과 %를 이용하여 생년월일을 입력하면 나의 띠를 알려주는 프로그램 만들기
<html>
<head>
<script>
let year = 1984;
if(year%12==4){
alert("쥐띠");
}else if(year%12==5){
alert("소띠");
}else if(year%12==6){
alert("호랑이띠");
}else if(year%12==7){
alert("토끼띠");
}else if(year%12==8){
alert("용띠");
}else if(year%12==9){
alert("뱀띠");
}else if(year%12==10){
alert("말띠");
}else if(year%12==11){
alert("양띠");
}else if(year%12==0){
alert("원숭이");
}else if(year%12==1){
alert("닭띠");
}else if(year%12==2){
alert("개띠");
}else if(year%12==3){
alert("돼지띠");
}
</script>
</head>
</html>
2) 그 외의 연산자
= 대입
let a = 20 ;
a = a + 10 ;
alert(a);
결과값 -> 30
== 같다 (등호)
let a = 20 ;
a = a + 10 ;
if(a == 30){
alert("a는 30이다.");
}
결과값 -> a는 30이다.
!= 다르다
let a = 20 ;
a = a + 10 ;
if(a != 35){
alert("a는 35가 아니다.");
}
결과값 -> a는 35가아니다
< > 작다 크다
let a = 20 ;
a = a + 10 ;
if(a > 25){
alert("A");
}
결과값 -> A
<= => 작거나(크거나) 같다.
let a = 20 ;
a = a + 10 ;
if(a <= 30){
alert("A");
}
결과값 -> A (a가 30보다 작거나 같기 때문에)
&& 그리고 (둘다 참이어야)
let a = 20;
let b = 30;
if(a>15 && b<25){
alert("B");
}
결과값 -> 없음
|| 또는 (둘 중 하나 참이면)
let a = 20;
let b = 30;
if(a>15 || b<25){
alert("B");
}
결과값 ->B
++ 1증가 시키기
let a = 20;
a++;
alert(a);
결과값 -> 21
-- 1감소 시키기
let a = 20;
a--;
alert(a);
결과값 -> 19
5. 반복문
for 여러번 반복적으로 시킬 수 있는 문법
for(시작 조건; 끝 조건; 증감 조건){실행되는 일;}
for(let i = 0; i < 5; i=i+1){alert("안녕");}
뜻 -> i가 0부터 5보다 작을 때 까지 반복할건데 i는 1씩 증가시킬거야
결과값 -> 안녕 (5번)
for(let i = 0; i < 5; i=i+1){alert(i);}
결과값 -> 0, 1, 2, 3, 4,
let sum = 0;
for(let i=1; i<100; i++){
sum = sum+i;
}
alert(sum);
결과값 -> 4950 (sum이1부터 99까지의 합, sum이 0이고 i가 1일 때 합계는 1, sum이 1이고 i가 2일 때 합계는 3, sum이 3이고 i가 3일 때 합계는 6, sum이 6이고 i가 4일 때 합계는 10, sum이 10이고 i가 5일 때 합계는 15...... 결과를 다 합치면 4950)
let sum = 0;
for(let i=1; i<=5; i++){
alert(sum);
}
결과값 ->1, 3, 6, 10, 15
미션
1~100까지의 수 중에서 짝수의 합만을 구하는 코드 만들기
<html>
<head>
<script>
let sum = 0;
for(let i = 1; i <= 100; i++){
if(i%2 == 0){sum = sum+i;
}
}alert(sum);
</script>
</head>
</html>
6. 배열
변수에 여러개의 수를 담고 싶을 때
let alphabet = {"A", "B", "C", "D" };
인덱스(순서)는 0부터 시작
A를 꺼내오고 싶으면
alphabet[0] -> 0번째 꺼내와줘 ->A가 꺼내와짐
<script>
let a = ["A", "B", "C", "D"];
alert(a[0]);
</script>
결과값 -> A
배열의 길이 - 배열에 들어가 있는 값의 개수
alphabet.length
위에서 총 4개의 값이 들어가있으므로 lenth는 4
<script>
let a = ["A", "B", "C", "D"];
alert(a.length);
</script>
결과값 ->4
미션
1) 과일명 5개를 담은 배열 만들고
2) 각 과일별 가격을 담은 배열을 만들고
3) for를 이용해서 과일을 순차적으로 alert 띄워주기
4) for문으로 과일 가격의 합을 구하기
<script>
let a = ["바나나", "사과", "딸기", "포도", "수박"];
let price = [500, 1000,200, 300, 5000];
for(let i=0; i<5; i++){
alert(a[i]);
}
</script>
i가 0일 때 alert가 바나나로 한 번 출력 되고 순차적으로 수박까지 alert가 출력됨
<script>
let a = ["바나나", "사과", "딸기", "포도", "수박"];
let price = [500, 1000, 200, 300, 5000];
for(let i=0; i<5; i++){
alert(a[i]);
}
let sum = 0;
for(let j=0; j<5; j++){
sum = sum + price[j];
}
alert(sum);
</script>
-> 결과값은 7000
미션
1. 12개의 띠를 배열에 담고,
2. for문과 if문을 이용해서 띠 찾기
<html>
<head>
<script>
let year = 1984;
let zodiac = ["원숭이띠", "닭띠", "개띠", "돼지띠", "쥐띠", "소띠", "호랑이띠", "토끼띠", "용띠", "뱀띠", "말띠", "양띠"];
for (let i = 0; i < 12; i++) {
if (year % 12 == i) {
alert(zodiac[i]);
}
}
</script>
</head>
</html>