[왕초보] 쉽게 배우는 웹개발 2주차
[수업 목표]
- Javascript의 사용 방식에 대해 이해하고, 문법에 익숙해진다.
- JQuery를 활용하여 HTML을 조작할 수 있다.
1. Javascript의 사용 방식에 대해 이해하고, 문법에 익숙해진다.
-
Javascript : 움직이기, 서버를 만드는데에도 쓰임
-
프로그래밍 언어 5개 기억하기
-
변수: 값을 담는 곳(변수이름은 알기 쉽게 직관적으로)<script> let a = '대한'; let b = '민국'; console.log(a+b); </script> -
자료형(꾸러미)-
리스트(순서가 중요, 0부터 시작)
<script> let a = ['사과', '배', '사과']; console.log(a[1]); </script> 결과값: 배 -
딕셔너리(사전처럼 무언가를 묶고싶을 때)
<script> let person = {'name':'bob', 'age':30, 'height':180} console.log(person['height']) </script> 결과값: 180<script> let person = {'name':'bob', 'age':30, 'height':180} let name = person['name'] let age = person['age'] console.log(name, age) </script> 결과값: bob 30
-
-
함수: 아래 DOM에서 확인 -
조건문<script> let age = 15; if (age < 20){ console.log('청소년입니다') }else { console.log('성인입니다') } </script> 결과값: 청소년입니다 -
반복문(리스트와 많이 쓰임)<script> let ages = [15,30,28,7,40,13]; ages.forEach(a => { console.log(a) }); </script> 결과값: 15 30 28 7 40 13<script> let ages = [15, 30, 28, 7, 40, 13]; ages.forEach(a => { if (a < 20) { console.log('청소년입니다') } else { console.log('성인입니다') } }); </script> 결과값: 청소년입니다 성인입니다 청소년입니다 성인입니다 청소년입니다
-
-
Javascript 활용문법(DOM)
-
함수
<script> function hey() { alert('안녕하세요'); } </script> <button onclick="hey()" type="button" class="btn btn-outline-light">영화 기록하기</button> 결과 : 영화 기록하기 버튼을 클릭했을 때 '안녕하세요' 알람이 뜬다.
-
2. JQuery를 활용하여 HTML을 조작할 수 있다.
-
JQuery : 누군가 만들어 놓은 라이브러리
-
미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다.
<!DOCTYPE html> <html> <head> <title>자바스크립트 문법 연습하기!</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <style> .button-part { display: flex; height: 50px; } </style> <script> </script> <body> <div class="top-part"> <h1>자바스크립트 문법 연습하기!</h1> </div> <hr/> <br> <h2>1. 함수</h2> <div class="button-part"> <button onclick="checkResult()">결과 확인하기!</button> </div> <div class="list-part"> <h2>2. 리스트</h2> <div id="q1"></div> </div> <div class="dict-part"> <h2>3. 딕셔너리</h2> <div id="q2"></div> </div> <div> <h2>4. 리스트 딕셔너리</h2> <div id="q3"></div> </div> </body> </html>
-
-
리스트 자료형
<script> function checkResult() { let a = ['사과', '배', '감', '귤'] $('#q1').text(a); } </script>
-
딕셔너리 자료형
<script> function checkResult() { let c = [ { 'name': '영수', 'age': 30 }, { 'name': '철수', 'age': 35 } ] $('#q1').text(c[1]['age']) } </script>
-
리스트-딕셔너리 자료형
<script> function checkResult() { let c = [ { 'name': '영수', 'age': 30 }, { 'name': '철수', 'age': 35 } ] $('#q1').text(c[1]['name']) } </script>
-
JQuery 연습하기
<!DOCTYPE html> <html> <head> <title>자바스크립트 문법 연습하기!</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <script> function checkResult() { let fruits = ['사과','배','감','귤','수박']; $('#q1').empty(); fruits.forEach(a => { let temp_html = `<p>${a}</p>`; $('#q1').append(temp_html); }); } </script> <body> <div class="top-part"> <h1>자바스크립트 문법 연습하기!</h1> </div> <hr /> <br> <h2>1. 함수</h2> <div class="button-part"> <button onclick="checkResult()">결과 확인하기!</button> </div> <div class="list-part"> <h2>2. 붙이기</h2> <div id="q1"> <p>사과</p> <p>귤</p> <p>감</p> </div> </div> <div class="list-part"> <h2>3. 붙이기</h2> <div id="q2"> <p>영수는 24살입니다.</p> <p>세종은 30살입니다.</p> <p>수영은 20살입니다.</p> </div> </div> </body> </html><결과 확인하기 버튼을 누르면 아래와 같은 사진으로 바뀜>
-
JQuery 연습2
<script> function checkResult() { let people = [ { 'name': '서영', 'age': 24 }, { 'name': '현아', 'age': 30 }, { 'name': '영환', 'age': 12 }, { 'name': '서연', 'age': 15 }, { 'name': '지용', 'age': 18 }, { 'name': '예지', 'age': 36 } ] $('#q2').empty(); people.forEach(a => { let name = a['name']; let age = a['age']; let temp_html = `<p>${name}는 ${age}살입니다.</p>`; $('#q2').append(temp_html); }); } </script><새로고침 후 결과 확인하기 버튼을 누르면 아래와 같은 사진으로 바뀜>
🙌중요한건 꺾였는데도 그냥 하는 마음