Javascript 는
<head>~</head> 안에 <script>~</script> 로 만들어 사용함
alert창
을 만들어 봅시당 전에 만들어 뒀던 영화 웹페이지에 있는 버튼을 누르면 'Hello' 문구가 적힌 alert창이 나오도록 해보자면
<script>
function hey(){
alert('Hello !')
}
</script>
...
<body>
<div class="mytitle">
<button onclick="hey()">영화 기록하기</button>
</div>
</body>body에서 button에 함수를 하나 만들고 script에서 그 함수를 불러오는 식으루
hey라는이름의 'Hello !' alert 창이 뜨게 하는 함수를 만들었답니다
간단한 javascript 기초 문법
console.log()
개발자들이 확인용으로 쓰는 공간!
개발자 도구 - 콘솔창(console)에서 확인 할 수 있음
<script>
console.log('hello world')
</script>짠
<script>
let a = '대한'
let b = '민국'
console.log(a+b) // 대한민국 출력
</script>문자열은 ''로 감싸기
<script>
let a = 2
let b = 3
console.log(a+b) // 5 출력
</script>list
: 순서를 지켜서 가지고 있는 형태
: 배열이랑 거의 같은 개념
<script>
let a = ['A', 'B', 'C']
console.log(a[0]) // A
console.log(a.length) // 3
</script>리스트에 요소를 추가할 수도 있답니다
<script>
let a = ['A', 'B', 'C']
console.log(a[0]) // A
console.log(a.length) // 3
a.push('hey')
console.log(a)
</script>
dictionary
: key-value 값의 묶음
그래서 key값을 입력하면 그에 맞는 value를 가져옴
<script>
let a = {'name':'soomin', 'age':'22'}
console.log(a['name']) // soomin 출력
</script>🙋🏻♀️ 응용: 리스트형과 딕셔너리형을 함께 쓸 수도 있답니다
<script>
let a = [{'name':'soomin', 'age':'22'},
{'name':'용', 'age':'10'}
]
console.log(a[1]['name']) // 용 출력
</script>jQuery
: 개발자들이 미리 짜둔 코드를 가져오는 것
: 그래서 임포트(import)를 해줘야 함
css -
class를 부여해주는 것처럼
jQuery에서는id를 잡아준답니다<div id = q1>
$('#id값').명령어의 문법으로 쓰임
<script>
function checkResult(){
let a = ['사과','배','감','귤']
$('#q1').text(a[0]) // q1에 있는 것을 '사과' 라는 text로 변경
let b = {'name':'soomin', 'age':'22'}
$('#q2').text(b['name']) // soomin 으로 변경
let c = [
{'name':'soomin', 'age':'22'},
{'name':'yong', 'age':'10'}
]
$('#q3').text(c[1]['age']) // 10 으로 변경
}
</script><script>
$('#q1').css('color', 'red') // 글자색 red로 변경
</script>이런식으로 이외에도 다른 것들도 바꿀 수 있답니당
반복문
변수.forEach(() => {})
<script>
let fruits = ['사과', '귤', '딸기', '포도']
fruits.forEach((a) => { // fruits 의 요소 하나하나를 a 라는 변수로 설정
console.log(a)
})
</script>조건문
: 다른 프로그래밍 문법이랑 비슷
<script>
let age = 24
if(age > 20){
console.log('성인')
}
else{
console.log('청소년')
}
</script>🙋🏻♀️ 응용
<script>
let ages = [12,15,20,25,17,37,24]
ages.forEach((a) => {
if(a > 20){
console.log('adult')
}
else{
console.log('child')
}
}) // child(3) adult child adult(2)
</script>append
: 말 그대로 추가 !
갖다 붙이고 싶은 html을 만들어서 변수로 선언한 다음, 그걸 jQuery를 사용해서 붙여주면 된다 !
1. 원하는 html 태그를
백틱(``)으로 묶어 생성
2. html 태그 안에 들어갈 값은${}에
3.$('#id').append(변수)
let's 연습
기존의 모습입니다
사과, 배, 감, 귤, 수박 이라는 과일 리스트를 만들고 이걸 2번(id='q1') 밑에 붙여넣어 봅시다
- 기존에 있더너 사과, 귤, 감 빼고
- 리스트 만들고
- forEach 로 리스트 안의 요소를 하나씩 꺼내서 append 하기
<script>
function checkResult() {
let fruits = ['사과', '배', '감', '귤', '수박']
$('#q1').empty() //사과, 귤, 감 빼기
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>` // append 할 html 만들어 주기 ()
$('#q1').append(temp_html) // 'q1' 에 temp_html 추가 !
})
}
</script> 그러면 이렇게 결과 확인하기! 버튼을 눌렀을 때 저렇게 쭈루룩 바뀐답니다
이런 식으로
<script>
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> 
이런 결과를 만들어 볼수도 있어요
🙌 javascript & jQuery 기초 끝 ! 🙌
