728x90
DOM(문서 객체 모델)
자바스크립트가 쉽게 웹 페이지 요소에 접근하여 조작할 수 있도록 연결시켜주는 일종의 인터페이스
- 예시
function hey(){
alert('안녕!');
document.getElementById('hello').style.color = 'red';
}함수 hey()가 호출되면 '안녕!' 메세지창이 뜨고 id가 hello인 요소의 글자색이 red로 바뀐다.
JQuery
미리 작성된 Javascript 라이브러리
-> 코드가 간단해짐. import를 해야 함.
- Javascript일 때
document.getElementById('hello').innerHTML = '안녕';- jQuery일 때
$('#hello').html('안녕');
- jQuery CDN
<head> </head> 사이에 임포트
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></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 people = [
{ 'name': '서영', 'height': 165 },
{ 'name': '현아', 'height': 170 },
{ 'name': '영환', 'height': 175 },
{ 'name': '서연', 'height': 162 },
{ 'name': '지용', 'height': 190 },
{ 'name': '예지', 'height': 168 }
]
$('#q1').empty();
people.forEach(a => {
let name = a['name'];
let height = a['height'];
let temp_html = `<p>${name}의 키는 ${height}cm 입니다.</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>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>
</div>
</body>
</html>- <script> 내부의 변수를 태그 안에 쓰는 방법: ${변수명}
- <script> 외부의 변수 값을 받는 방법: let 변수명 = $('#가져올input의id').val();
- 원하는 html 태그는 백틱(``)으로 묶어줌
$('#q1').empty(); // q1의 내용 지우기
$('#q1').text('사과'); // q1의 텍스트를 '사과'로 바꾸기
$('#q1').append(temp_html); //q1에 temp_html 내용 붙이기
$('#q1').toggle(); //q1이 함수가 호출될 때마다 나타났다 사라짐을 반복
'프로그래밍 언어 > Javascript' 카테고리의 다른 글
| Firebase 이용: 데이터를 보내고 가져오는 경우 (0) | 2023.09.14 |
|---|---|
| document ready (0) | 2023.09.14 |
| JSON, GET, Fetch (0) | 2023.09.14 |
| 반복문과 조건문 (0) | 2023.09.14 |
| 기초 문법 (변수선언, 리스트, 딕셔너리) (0) | 2023.09.14 |