Javascript를 추가하여 움직이게 만들기
<script> function hey() { alert('안녕하세요!') } </script>
- 화면으로 안녕하세요!라는 문구를 보여주라!
<button onclick="hey()">영화 기록하기</button>
- 버튼을 클릭하면 hey라는 정해진 일을 불러라!
- 이 때, hey() = 안녕하세요!
- 영화 기록하기를 누르면 안녕하세요!라는 창이 뜸
Console.log
<script> function hey() { console.log('안녕하세요!') } </script>
- 영화 기록하기 버튼을 눌러도 아무런 반응이 없음
- 반응을 확인하고 싶을 때는 영화 기록하기 -> 우클릭 -> 검사 -> console
- 결과
- 영화 기록하기를 누를 때마다 계속 출력
- 예시)
- console창에서 hey()를 부를 수 도 있음
- 결과
- 페이지를 새로 고침하면 값이 다 없어짐
- 결과
변수
- 값을 담는 박스
- let 으로 표현
- 숫자 뿐만이 아니라 문자도 담을 수 있음
- 대신 문자를 담을 때에는 ' '(작은 따옴표)로 감싸줘야함
- 예시)
<script> let a = '사과' let b = '귤' console.log(a+b) </script>
리스트와 딕셔너리로 표현하고자 할 때
1. 리스트
<script> let a = ['사과','수박','딸기','감'] console.log(a) </script>
더 나아가 리스트의 첫 번째 값인 사과만 출력하고 싶을 땐?!
<script> let a = ['사과','수박','딸기','감'] console.log(a[0]) </script>
- 리스트는 0부터 시작 => 사과는 변수 a의 0번째 자리
- 결과
변수 a의 요소가 몇 개인지 알고 싶을 때?!
<script> let a = ['사과','수박','딸기','감'] console.log(a.length) </script>
- length를 사용하여 확인
- a의 요소이므로 a.length라고 해야함
딕셔너리
- key-value
<script> let a = {'name' : '영수', 'age' : 27} console.log(a) </script>
- 딕셔너리는 { }(중괄호) 시용
- 27은 문자가 아닌 숫자를 뜻하기 때문에 ' '(작음 따옴표)로 감싸주지 않아도 됨
이름을 알고 싶을 때는?!
<script> let a = {'name' : '영수', 'age' : 27} console.log(a['name']) </script>
- 영수라는 이름을 출력하고자 할 때는 a[key 값을 입력]
- name은 문자임으로 ' '(작은 따옴표)로 감싸줌
리스트 + 딕셔너리
<script> let a = [ { 'name': '영수', 'age': 27 }, { 'name': '철수', 'age': 15 }, { 'name': '영희', 'age': 20 } ] console.log(a) </script>
- 0번째의 name : 영수, 1번째의 name : 철수
영수를 출력하고 싶을 때
<script> let a = [ { 'name': '영수', 'age': 27 }, { 'name': '철수', 'age': 15 }, { 'name': '영희', 'age': 20 } ] console.log(a[0]['name']) </script>
- 영수는 a의 0번째 문자
- 영수는 이름
- 즉, a[o]['name'] => a의 0번째의 이름 = 영수
- name은 문자임으로 ' '(작은 따옴표)로 감싸줌
영희의 나이는??
<script> let a = [ { 'name': '영수', 'age': 27 }, { 'name': '철수', 'age': 15 }, { 'name': '영희', 'age': 20 } ] console.log(a[2]['age']) </script>
JQuery
document.getElementById("element").style.display = "none";
- Javascript로 길고 복잡하게 써야 하는 것을
$('#element').hide();
-
jQuery로 보다 직관적으로 사용 가능
-
사용법
- 지칭은 id =
- 지칭한 값을 가져올 때는 $('#id값')
- 예시)
$('#id값').text() $('#id값').css('color','red')
- 💡오타 주의!!!!
- 오타 작렬해서 자꾸 Error 뜸...😭
반복문
fruits.forEach((a) => { console.log(a) })
- fruits의 요소를 하나씩 확인하는데 이름은 a
- a는 b,c,zzz,fruit 어떤 걸로 해도 상관 없음
조건문
if (조건) { } else { }
- 조건에 맞다면~
- 아니라면~
조건문 + 반복문
let ages = [12,15,20,25,17,37,24] ages.forEach((a)=> { if (a > 20) { console.log('성인입니다') } else { console.log('청소년입니다') } })
- age라는 변수를 리스트로 지정
- 반복해서 출력하고자 forEach((a) => { } ) 사용
- a가 20살보다 많다면 '성인입니다' 출력
- 그게 아니라면 '청소년입니다' 출력
- 청소년입니다가 3번 출력 (=>첫 번째 줄 청소년입니다 앞의 숫자 3)
- 성인입니다가 2번 출력 (=> 4번 째 줄 성인입니다 앞의 숫자 2)
- 20살은 아무것도 포함이 되지 않으므로 미출력
append
- .append를 사용하면 HTML로 바뀜
function checkResult() { let fruits = ['사과','배','감','귤','수박'] fruits.forEach((a)=>{ let temp_html = `` }) }
- temp_html 이라는 변수를 만들기 위해 백틱(``)을 사용
사과를 출력하고 싶다면?
let temp_html = `<p>사과</p>`
- 원하는 html 태그를 백틱 안에 넣어줌
$('#q1').append(temp_html)
- temp_html을 html 태그처럼 붙임
코드
function checkResult() { let fruits = ['사과', '배', '감', '귤', '수박'] fruits.forEach((a) => { let temp_html = `<p>사과</p>` $('#q1').append(temp_html) }) }
사과만이 아닌 fruits 리스트에 있는 값들을 불러오고 싶어!!
function checkResult() { let fruits = ['사과','배','감','귤','수박'] fruits.forEach((a)=>{ let temp_html = `<p>${a}</p>` $('#q1').append(temp_html) }) }
- 사과가 아니라 forEach문으로 돌린 반복문의 데이터가 들어가야함
처음에 나오는 사과, 귤, 감을 삭제하고 싶어!!
function checkResult() { let fruits = ['사과','배','감','귤','수박'] $('#q1').empty() fruits.forEach((a)=>{ let temp_html = `<p>${a}</p>` $('#q1').append(temp_html) }) }
- $('#q1').empty()를 사용하여 삭제
활용하기
- 원하는 HTML 태그를 백틱(``) 으로 묶음
- 태그 안에 들어갈 값은 ${ 자료가 있는 변수 }로 표시
- 통째로 넣을 HTML 요소를 $('#아이디') 로 고르고 append(변수)를 넣음
백틱 ( )
- HTML 요소를 통째로 넣을 때 묶어주는 기호
- 문자와 변수를 함께 써줄 수 있도록 하는 특수 기호
- 예시)
let profile = `${}의 나이는 ${}살 입니다`
- 아래와 같이 변수와 문자를 함께 쓸 수도 있음
let profile = `${nameDict['name']}의 나이는 ${nameDict['age']}살 입니다`
코드
<!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) }) 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> <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>
