-
항해99 - JavaScript/jQuery 기초Front End/css, html, JS 2023. 3. 23. 00:10
JavaScript는 평상시 자주 볼 수 있었던 tag 문법에서 다양한 기능을 배웠다면
jQuery는 정말 생각지 못한 문법이라서 깜짝 놀랐다.
이 두가지는 또한 연관이 없음을 느끼고 왜 J를 다같이 달고 있는건지 궁금하다....
우선, 변수 할당에서는 let 을 앞에 선언한다는 것을 제외하면 파이썬과 동일해서 정리하지 않을 것
JavaScript : 움직이기
경고 창을 띄울 수도 있고 console에 데이터를 찍어볼 수도 있고 db에서 연동되는 데이터를 처리할 수도 있는 JS
python과 비슷한 변수형태에 계속 python 문법을 적용하려고 해서 큰일이다.
따로 문법을 정리해야할 것 같다.
참고로, 변수 길이는 a.length
경고창 띄우기 & 콘솔에 데이터 찍기
<head> <script> alert("경고입니다."); console.log("log를 찍습니다."); </script> </head>배열에 대해 for문 적용
<head> <script> let int_list = [1, 2, 3, 4] int_list.forEach((num) => { console.log(num+1) }) </script> </head>REST API로 데이터 받아오기
<head> <script> fetch("API URL").then(res => res.json()).then(data => { let rows = data['원하는 key'] rows.forEach((row) => { console.log(row['원하는 key'], row['원하는 key']) }) }) </script> </head>
jQuery
JS로 길게 쓸 내용을 jQuery를 사용하여 짧게 사용할 수 있다.
css에서 지칭했던 태그는 class, jQuery에서 지징하는 태그는 id
또한, append에서 backtick(`)을 활용하면 html을 적용할 수 있다.
jQuery 활용 방식
$('#id').empty() - 해당 ID의 데이터 모두 삭제
$('#id').append(html) - 해당 ID에 html 추가
<head> <script> function checkResult() { let numbers = [1, 2, 3, 4] $('#q1').empty() fruits.forEach((num) => { let temp_html = `<p>${num}</p>` $('#q1').append(temp_html) }) </script> </head> <body> <div class="button-part"> <button onclick="checkResult()">결과 확인하기!</button> </div> <div class="list-part"> <div id="q1"> <p>100</p> <p>200</p> <p>300</p> </div> </div> </body>
페이지에 들어오자마자(ex.새로고침) 자동 실행해야하는 함수
<script> 태그 바로 아래에 $(document).ready(function(){ })
<head> <script> $(document).ready(function () { test_ft(); }); function test_ft() { 함수 내용 } </script> </head>'Front End > css, html, JS' 카테고리의 다른 글
항해 99 - JavaScript 배열 (0) 2023.04.05 항해 99 - JavaScript 2주차 확인문제 (1) 2023.04.05 항해 99 - JavaScript 조건문 (0) 2023.04.03 항해 99 - JavaScript 자료형과 변수 (0) 2023.04.02 항해99 - css/html 기초 (0) 2023.03.21