jQuery
제이쿼리는 자바스크립트의 명령어가 길고 쓰기 힘드니 더욱 편하게 쓰도록 만들어진 라이브러리이다.
<script>
function checkResult() {
let c = [
{ name: "영수", age: 30 },
{ name: "철수", age: 35 },
];
$("#q1").text(c[1]['name']);
}
</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>
checkResult()라는 함수를 생성.
checkResult()의 내용은
리스트 딕셔너리인 변수 c가 존재하며
id가 q1인 어떤 곳에 text를 띄어준다.
text의 내용은 c변수의 2번째 name 키 값의 밸류를 출력해주세요.(철수)
딕셔너리 안의 데이터가 리스트 형식으로 묶여 2개가 존재하고 있다.
첫번째 데이터(c[0])는 name = 영수, age = 30
두번째 데이터(c[1])는 name = 철수, age = 35 이다.
그러니 c[1]['name']을 하면 두번째 데이터 name 키의 밸류인 철수가 나온다.
헷갈리면 https://gyuni.tistory.com/8 여기 블로그 리스트와 딕셔너리 혼합사용 예제 보기.
id가 q1인 곳은 div class가 list-part인 곳의 자식 div이다.(<h2>리스트<h2>의 아래)
그럼 이곳에 text가 출력되야 한다. 그런데 아무때나 출력 되는 것이 아니다.
div class 명이 button-part인 곳에는 자식 button이 존재하는데 이 버튼을 클릭할 때 출력이 되는 것이다.
그 이유는 button에 onclick 이벤트가 존재하고 버튼을 클릭시 oclick 이벤트가 이행되고 이행할 내용은 checkResult() 함수의 호출이다.
호출되면 위에 내용처럼 철수가 출력되는 것이다.
자바스크립트 문법 연습하기!
1. 함수
2. 리스트
3. 딕셔너리
4. 리스트 딕셔너리
'html,css,javascript' 카테고리의 다른 글
| JSON, API, fetch (0) | 2024.11.27 |
|---|---|
| toggle, val (0) | 2024.11.25 |
| html, css, javascript (2) | 2024.11.20 |