<!DOCTYPE html>
<html>
...
<style>
...
</style>
<script>
function checkResult() { /* checkResult() 함수로 불러옴 */
alert('안녕')
}
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr/>
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button> <!-- checkResult() 함수로 불러옴 -->
</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>
jQuery 에서는 지칭을 해줄 때 id
라는 이름표(명찰)을 사용함
checkResult()
함수는 기본적인 자바스크립트(Javascript) 에서 사용한 hey()
함수와 동일한 기능을 함
<!DOCTYPE html>
<html>
...
<style>
...
</style>
<script>
function checkResult() { /* checkResult() 함수로 불러옴 */
let a = '사과'
$('#q1').text(a) /* id="q1" 인 데이터를 지칭함 */
}
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr/>
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button> <!-- checkResult() 함수로 불러옴 -->
</div>
<div class="list-part">
<h2>2. 리스트</h2>
<div id="q1">테스트</div> <!-- id="q1" 으로 이름을 붙임 -->
</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>
let fruits = ['사과', '배', '감', '귤']
fruits.forEach((a) => {
console.log(a)
})
</script>
a
는 단순히 변수명 (원하는 변수명으로 설정 가능) <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('성인')
} else {
console.log('청소년')
}
})
</script>
<script>
let ages = [12, 15, 20, 25, 17, 37, 24]
ages.forEach((a) => {
if (a > 20) {
alert('성인')
} else {
alert('청소년')
}
})
</script>
백틱 안에 <p>${변수명}</p>
자동으로 데이터가 추가
되도록 만들 수 있음<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- jQuery 를 사용하기 위해서는 이 부분이 들어가 있어야 함 -->
</head>
<script>
function checkResult() {
/* 배열일 경우 */
let fruits = ['사과','배','감','귤','수박']
$('#q1').empty() /* empty() 함수를 이용해서, for문 전에 미리 초기화 해둔다. ${변수명} 내용을. */
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>` /* 백틱(`) 안에 만들고 싶은 html을 넣기. ${변수명} 형태 */
$('#q1').append(temp_html) /* id 불러와서 temp_html 변수를 append 하기 */
})
}
</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"> <!-- 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>
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- jQuery 를 사용하기 위해서는 이 부분이 들어가 있어야 함 -->
</head>
<script>
function checkResult() {
/* key : value 형태일 경우 */
let people = [
{'name':'서영','age':24},
{'name':'현아','age':30},
{'name':'영환','age':12},
{'name':'서연','age':15},
{'name':'지용','age':18},
{'name':'예지','age':36}
]
$('#q2').empty() /* empty() 함수를 이용해서, for문 전에 미리 초기화 해둔다. ${변수명} 내용을. */
people.forEach((a) => {
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}살입니다.</p>` /* 백틱(`) 안에 만들고 싶은 html을 넣기. ${변수명} 형태 */
$('#q2').append(temp_html) /* id 불러와서 temp_html 변수를 append 하기 */
})
}
</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"> <!-- id="q2" 이름 붙이기 -->
<p>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>
</div>
</body>
</html>