티스토리 뷰
Web basic - 02 JavaScript, jQuery
JavaScript, jQuery, CDN
JavaScript => jQuery => AJAX
JavaScript의 함수는 2가지
- 1) 선언적 함수 (python의 일반적인 함수 정의하는 방법)
- 선언적 함수는 함수 이름이 존재한다.
- 2) 익명 함수 (함수의 이름이 없다.) => 람다함수
- 변수에 저장해서 사용.
- 일급함수의 특징을 가지게 된다.
- 함수를 다른 함수의 인자로, 함수의 리턴값으로 함수를 이용.
# my_script.js
// my_script.js
// 자바스크립트의 변수 선언은 var로
var my_var = 100 // javascript
var tmp = 3.14 // number
var tmp1 = "Hello" // string (python과 동일)
var tmp2 = true // boolean (python True)
var tmp3 = [1, 2, 3, 4.555] // array
// 함수는 2가지가 존재한다.
// 1. 선언적 함수
function my_add(x, y) {
return x + y
}
// 2. 익명 함수 (함수의 이름이 없다.) => 람다함수
var my_add = function(x, y) {
return x + y
}
# 04_javascript_clock.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 사용할 javascript 파일 선언 -->
<script src="js/04_javascript_clock.js"></script>
<style>
div {
background-color: yellow;
color:red;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<h1>시계를 만들어 보아요!!</h1>
<div id="myDiv">여기에 시간이 출력되요!!</div>
<input type="button"
value="시계 시작!!"
onclick="start_clock()">
</body>
</html>
# 04_javascript_clock.js
// 04_javascript_clock.js
function start_clock() {
// alert("버튼이 클릭클릭!!")
// 시간을 출력해야 한다.
setInterval(function() {
// JavaScript는 특정시간마다 특정함수를 반복해주는 함수를 제공
var today = new Date() // 날짜 객체 생성
console.log(today.toLocaleString()) // ok
// HTML의 특정 위치를 지정!!
var my_div = document.getElementById("myDiv")
my_div.innerText = today.toLocaleString()
}, timeout=1000) // 위의 작업을 1초마다 반복
}
jQuery
- JavaScript로 만든 사용하기 편한 library
- 모든 browser에서 동일하게 동작한다.
- JavaScript는 browser마다 상이하게 동작하는 경우가 있다.
- 무료로 사용 가능하다.
- CDN (Content Delivery Network) 방식 가능
- 네트워크를 통해서 라이브러리를 동적으로 다운로드해서 사용하는 개념
# 05_jQuery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- jQuery를 CDN 방식으로 이용 - 라이브러리 로딩이 먼저 되어야 한다. -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="js/05_jQuery.js"></script>
</head>
<body>
<h1>jQuery 연습입니다.</h1>
<div>
<!-- 생략 -->
</div>
<input type="button" value="클릭클릭!!"
onclick="my_func()">
</body>
</html>
# 05_jQuery.js
// 05_jQuery.js
function my_func() {
// alert("함수가 호출되요!!!")
// 1. 전체 선택자 ( universal selector )
// $-jQuery로/ *-모든 element선택해서 /.css() 색 바꾸는 method 실행
$("*").css("color", "red")
// 2. 태그 선택자 ( tag selector )
$("li").remove()
// 3. 아이디 선택자 ( id selector ) - 기호 # 이용
$("#haha").text() // 인자가 없으면 값을 알아오라는 의미
$("#haha").text("제주") // 인자가 있으면 값을 변경하라는 의미
// 4. 클래스 선택자 (class selector)
$(".region").css("background-color", "yellow")
// 5. 구조 선택자 (자식 선택자 혹은 후손 선택자)
$("ol > *")
$("ol > li").css("color", "steelblue") // > 자식 선택자
$("div > li").css("color", "pink")
// 6. 구조 선택자 ( 형제 선택자)
$("#haha + li").remove()
$("#hong ~ li").remove()
// 7. 속성 선택자
$("[id]").css("color", "yellow")
$("[id=haha]").css("color", "yellow")
}'멀티캠퍼스 AI과정 > 02 Web & Django Basic' 카테고리의 다른 글
| Web basic - 04,05 jQuery로 JSON 형식 데이터 받기, Open API (0) | 2020.11.14 |
|---|---|
| Web basic - 03 jQuery, Bootstrap (0) | 2020.11.14 |
| Web basic - 01, 02 web 개요, 정적/동적 웹 (0) | 2020.11.14 |
댓글