HTML = 뼈대 CSS = 꾸미기 Javascript = 움직이기 !
프로그래밍 언어 5가지
1.변수 2.자료형 3.함수 4.조건문 5.반복문
Javascript 기초 문법 1 - 변수 이해
변수
변수 : 값을 담음(문자,숫자,..) => 값을 담아서 한 번에 관리하기에 용이! (치환 느낌?)
console.log() : 검사->콘솔 _ 콘솔창에 뜨게 해주세요
변수 이름 : 내가 기억하기 쉽게 지정
ex) let name = 'bob'; let age = 28;
<script>
let a = 'hello';
console.log(a);
</script>
<script>
let a = '대한';
let b = '민국';
console.log(a);
console.log(b);
</script>
<script>
let a = '대한';
let b = '민국';
console.log(a+b);
</script>
<script>
let a = '대한';
let b = '민국';
console.log(a+b);
console.log(a+b+b);
console.log(a+b+b+b);
</script>
# 한 번에 수정 가능 _ 'b=민국' 에서 'b=국민' 으로 바꾼다면?
<script>
let a = '대한';
let b = '국민';
console.log(a+b);
console.log(a+b+b);
console.log(a+b+b+b);
</script>
# 숫자도 가능 _ 덧셈
<script>
let a = 3;
let b = 5;
console.log(a+b);
console.log(a+b+b);
console.log(a+b+b+b);
</script>
Javascript 기초 문법 2 - 자료형 - 리스트, 딕셔너리
자료형 = 꾸러미
리스트
100개, 1000개, ... 리스트들을 관리 (순서 중요)
let a = [' ', ... , ' '] 대괄호 안에 리스트 나열
console.log(a[ ]) => [ ] 안에 순서 적기 (0,1,2,3,...999)
<script>
let a = ['사과','배','수박']
console.log(a[0])
</script>
변수에 대한 정보를 사전처럼 한 번에 묶기 위해 (정리하기 위해)
딕셔너리
<script>
let person = {'name' : 'bob' , 'age' : 30, 'height' : 180}
console.log(person)
</script>
# name에 접근
<script>
let person = {'name' : 'bob' , 'age' : 30, 'height' : 180}
console.log(person['name'])
</script>
# 두 가지 이상 나열
<script>
let person = {'name' : 'bob' , 'age' : 30, 'height' : 180}
let name = person['name']
let age = person['age']
console.log(name, age)
</script>
Javascript 기초 문법 3 - 조건문, 반복문
조건문
<script>
let age = 15;
if. (age <20) {
console.log('청소년입니다.')
} else {
console.log('성인입니다.')
}
</script>
age = 15 로 지정, 콘솔에 청소년이라고 뜸
반복문
어떤 꾸러미 수만큼 반복해라 => 순서대로 반복 => 리스트라는 꾸러미와 함께 쓰임
foreach 사용! (수정 필요)
<script>
let ages = [15,24,35,43,12,44];
array.forEach(element => {
});
</script>
포맷 : array.forEach(element => { ... });
=> 어떤 array를 forEach로 돌려서 써먹는다.
여기서 수정하여 사용하면 됨
<script>
let ages = [15,24,35,43,12,44];
ages.forEach(a => {
console.log(a)
});
</script>
ages를 하나씩 돌려서 써먹는다.
# 변형 (반복문 추가)
let ages = [15, 24, 35, 43, 12, 44];
ages.forEach((a) => {
if (a< 20) {
console.log("청소년입니다.");
} else {
console.log("성인입니다.");
}
});
ages에서 하나씩 뺀 걸 a라고 부름
기존에 만든 반복문에서 age => a 로 바꾸면, ages의 숫자 중 하나를 꺼내 청소년 or 성인인지 판단하여 console에 내보냄 반복
Javascript 활용 문법 (DOM)
함수 만들기
함수 -> 같은 동작을 반복하는 것
# Function 함수이름 () {}
<script>
function hey () {
}
</script>
Alert 띄우기
# script에 alert (' ') 넣기
<script>
function hey () {
alert ('기록할까요?')
}
</script>
# <body> 에 영화 기록하기 button에 onclick='hey()'
<button onclick="hey()" type="button" class="btn btn-outline-light">
-> 영화 기록하기 버튼을 누르면 hey라는 함수가 실행된다.
영화 기록하기 버튼을 눌렀을 때 alert 띄우기
JQuery 시작하기
HTML의 요소들을 조작하는 Javascript를 미리 더 쉽게 작성해둔 것. 라이브러리!
자바스크립트를 왜 쓴다? 웹을 조작하려고!
왜 조작해? 움직이게 만드려고!
그런데 순수 javascript만 사용하면 길고 복잡하니까 JQuery를 씀!
Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야 해서,
JQuery라는 라이브러리가 등장하게 됨!
JQuery 사용하기
JQuery CDN 임포트하기 <head>...</head> 사이에 복붙!
타이틀 아래에 CDN 붙여넣기
함수 이용하여 텍스트 바꾸기
1. <head>에 함수 hey() 만듦
<script>
function hey () {
}
</script>
2. <body>의 바꿀 부분에 id 값 주기
<h1 class="display-5 fw-bold">킹덤</h1>
에서 id=title 값 추가 (JQuery로 조작하려면 id값을 주고 조작해야 함)
<h1 id='title' class="display-5 fw-bold">킹덤</h1>
3. <head>의 스크립트에 JQuery 사용
$('#함수이름')
<script>
function hey () {
$('#title')
}
</script>
id 가 title 이라는 아이를 지정
<script>
function hey () {
$('#title').text('쥬라기월드')
}
</script>
id가 title인 아이의 텍스트를 쥬라기월드로 바꿔라
4. <body>에서 '~했을 때 함수하도록' 만들기
<button onclick="hey()" type="button" class="btn btn-outline-light">영화 기록하기</button>
영화 기록하기 버튼을 눌렀을 때, 함수 헤이해라 (함수 헤이=텍스트가 쥬라기월드로 바뀌어라)
JQuery 연습하기
새파일 prac.html 만들기 -> 자료에 있는 prac.html 스켈레톤 복사 -> prac.html에 붙여넣기
크롬으로 연 페이지
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
버튼을 클릭했을 때, 함수 checkResult해라 (함수 checkResult=?) 부분에서 쓰인 checkResult에 대해 정의가 없는 상태!
함수 정의해보기
<script>
function checkResult() {
$('#q1').text('쥬라기월드');
}
</script>
# 함수 chekResult 정의
<div class="button-part"> <button onclick="checkResult()">결과 확인하기!</button> </div>
# q1을 눌렀을 때 쥬라기월드라는 텍스트를 추가해라
전->후
리스트 자료형
리스트 자료형 코드스니펫 복사 -> 함수 아래에 붙여넣기
let a = ['사과', '배', '감', '귤']
<script>
function checkResult() {
let a = ['사과', '배', '감', '귤']
$('#q1').text(a[2]);
}
</script>
$('#q1').text(a[2]); => a의 3번째를 가져와라
딕셔너리 자료형
딕셔너리 자료형 코드스니펫 복사 -> 함수 아래에 붙여넣기
let b = {'name' : '영수','age' : 30}
<script>
function checkResult() {
let b = {'name' : '영수','age' : 30}]
$('#q1').text(b['name']);
}
</script>
$('#q1').text(b['name']); => b의 name을 가져와라
리스트-딕셔너리 자료형
let c = [
{'name':'영수', 'age':30},
{'name':'철수', 'age':35}
]
let c = [
{ name: "영수", age: 30 },
{ name: "철수", age: 35 }
];
철수를 가져오고 싶다면? => c의 1번째의 name
$("#q1").text(c[1]['name']);
즉,
<script>
function checkResult() {
let c = [
{ name: "영수", age: 30 },
{ name: "철수", age: 35 }
];
$("#q1").text(c[1]['name']);
}
</script>
JQuery 연습하기 append 1
자바스크립트 연습코드 - 리스트
자바스크립트 연습코드 복붙
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
</head>
<script>
function checkResult() {
}
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr />
<br>
<h2>1. 함수</h2>
<div class="button-part"> ...
<script>
function checkResult() {
}
</script>
함수 부분 비어있음!
fruits 코드스니펫 복붙
let fruits = ['사과','배','감','귤','수박']
함수 정의하기
<script>
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
}
</script>
사과를 [ 2. 붙이기 ] 아래에 붙여보기
<h2>2. 붙이기</h2>
<div id="q1">
<p>사과</p>
<p>귤</p>
<p>감</p>
</div>
2. 붙이기 아래에 사과 귤 감을 없애고 사과만 넣기
# 1. 지우기
- 일단 q1을 지정하기 $('#함수이름') => id가 q1이라는 아이를 지정
function checkResult() {
let fruits = ['사과','배','감','귤','수박'];
$('#q1')
}
- 지정 후 .empty() 사용
function checkResult() {
let fruits = ['사과','배','감','귤','수박'];
$('#q1').empty();
}
2. 아래에 있던 아이들 없어짐!
# 2.붙이기
html을 만들어서 붙임
- 일단 html 만들기
let temp_html = ` <p>감자</p>`;
temp_html 은 변수 이름
`` 백틱 사용
let temp_html = ` <p>감자</p>`;
$('#q1').append(temp_html);
감자 라는 html이 (temo_html)에 들어가서 붙게 됨 => 다 지워지고 감자만 남는다.
다 지워지고 감자만 붙음
- 우리는 사과가 붙길 원하니까
let a = fruits[0]; 써주고 (fruits 0번째는 사과임)
<p>감자</P> 였던 부분을 감자 대신 ${a}로 바꿈 (a=fruits의 0번째=사과)
let a = fruits[0];
let temp_html = `<p>${a}</p>`;
$('#q1').append(temp_html);
사과만 붙음
# 3. 배 감 귤 수박 다 붙이려면?
- foreach문을 통해 반복하게 만들면 됨!
array.forEach(element => {
});
=> array를 가지고 돈다
- foreach문 수정
fruits를 가지고 돌게 바꿈, element 너무 길어서 a로 바꿈
fruits.forEach(a => {
});
=> fruits를 가지고 a를 뽑아서 돈다.(반복)
- html을 만들어 붙이게 함
fruits.forEach(a => {
let temp_html = `<p>${a}</p>`;
$('#q1').append(temp_html);
});
사과 html 만들어 붙이고, 배 html 만들어 붙이고 ... 반복
즉,
function checkResult() {
let fruits = ["사과", "배", "감", "귤", "수박"];
$("#q1").empty();
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`;
$("#q1").append(temp_html);
});
}
사과 배 감 귤 수박이 다 붙음!
JQuery 연습하기 append 2
자바스크립트 연습코드 - 딕셔너리
append1을 바탕으로 append2 연습
function checkResult() {
let fruits = ["사과", "배", "감", "귤", "수박"];
$("#q1").empty();
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`;
$("#q1").append(temp_html);
});
}
이전에 했던 append1에서 let fruits 부분을 없애고
- people 코드스니펫 복붙
let people = [
{'name':'서영','age':24},
{'name':'현아','age':30},
{'name':'영환','age':12},
{'name':'서연','age':15},
{'name':'지용','age':18},
{'name':'예지','age':36}
]
function checkResult() {
let people = [
{'name':'서영','age':24},
{'name':'현아','age':30},
{'name':'영환','age':12},
{'name':'서연','age':15},
{'name':'지용','age':18},
{'name':'예지','age':36}
]
이렇게 만든 뒤,
$("#q1").empty();
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`;
$("#q1").append(temp_html);
});
기존 append1 에서 q1대신 q2를 넣기
# q2를 다 없애고 html 만들어 붙이기 (append1에서 수정)
$("#q2").empty();
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`;
$("#q2").append(temp_html);
});
}
fruits 대신 people로 바꾸고, <p>감자</p> 대신에 <p>영수는 24살입니다.</p> 이걸 쓸 거니까
people.forEach((a) => {
let temp_html = `<p>영수는 24살입니다.</p>`;
$("#q2").append(temp_html);
});
에서 <p></p> 부분을 함수로 지정. ${a} 사용 -> ${변수[변수]}
'영수' => ${a["name"]} '24' => ${a["age"]}
$('#q2').empty();
people.forEach(a => {
let temp_html = `<p>${a["name"]}는 ${a["age"]}살입니다.</p>`;
$('#q2').append(temp_html);
});
}
= 같음
여기선 간단하게 ${ }를 사용하려고
let name 정의, age 정의함
$('#q2').empty();
people.forEach(a => {
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}살입니다.</p>`;
$('#q2').append(temp_html);
});
}
숙제
이렇게 만들기
people 코드스니펫
let people = [
{ 'name': '서영', 'height': 165 },
{ 'name': '현아', 'height': 170 },
{ 'name': '영환', 'height': 175 },
{ 'name': '서연', 'height': 162 },
{ 'name': '지용', 'height': 190 },
{ 'name': '예지', 'height': 168 }
]
<script>
function checkResult() {
let people = [
{ name: "서영", height: 165 },
{ name: "현아", height: 170 },
{ name: "영환", height: 175 },
{ name: "서연", height: 162 },
{ name: "지용", height: 190 },
{ name: "예지", height: 168 },
];
$("#q2").empty();
people.forEach(a => {
let name = a["name"];
let height = a["height"];
let temp_html = `<p>${name}의 키는 ${height}cm 입니다.</p>`;
$("#q2").append(temp_html);
});
}
</script>
