| 용어 | 설명 |
| 라이브러리 | 웹 페이지에 구현할 수 있는 기능과 효과등을 하나의 프로그램에 모아서 정리한 것 |
| 플러그인 | 플러그인은 라이브러리에 의존해서 기능과 효과 등을 확장하는데 사용하는 프로그램 중 하나이다. |
| 확장 라이브러리 | 쉽게 설정하면 '플러그인을 정리한 것'이다. 예를 들어 jQuery를 사용해서 UI를 구축하는 작업에 특화한 확장 라이브러리로 'jQuery UI'가 있다. |
| 함수 | 어떤 값(인수)을 전달하면 그 값을 처리하여 결과값을 반환하는 하는 기능 |
| [모던 자바스크립트 입문] 8장. 함수 호출하기 (0) | 2021.02.08 |
|---|---|
| [모던 자바스크립트 입문] 6장. 웹 브라우저에서의 입출력 (0) | 2021.02.05 |
| [Web 2강] HTML과 JS의 만남 (0) | 2021.02.05 |
jQuery를 사용하여 CSS 스타일을 변경해 보겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content ="IE= edge">
<title>Creative jQuery</title>
<link rel = "stylesheet" href ="./css/normalize.css">
<link rel ="stylesheet" href="./css/main.css">
<script src = "./js/vendor/jquery-1.10.2.min.js"></script>
<script src = "./js/vendor/jquery-ui-1.10.3.custom.min.js"> </script>
<script src = "./js/main.js"></script>
</head>
<body>
<header class ="page-header" role = "banner">
<h1> Creative jQuery Sample </h1>
</header>
<div class = "page-main" role="main">
<div id ="typo"> //변경될 부분
<div class ="inner"> Creative jQyery </div>
</div>
</div>
<footer class ="page-footer" role ="contentinfo">
<small class ="copyright"> COPYRIGHT *copy;
<a href = "http://shsdfjk.co.jp" target ="_blank">
SHIFTBISIA INC. </a>
</small>
</footer>
</body>
</html>
$(function()
{
$('#typo').css('color','#ebc000');
});
css() 메서드에서 현재 속성값을 검색하는 방법
$(function() {
$('#typo').css('color');
});위 코드는 현재 속성값을 검색만 합니다. 따라서 코드를 실행하면 웹 브라우저에서 아무것도 변화하지 않습니다. (HTML 요소에는 아무런 변화가 없습니다.) 이런 코드를 작성하는 경우는 뒤에서 설명할 것이므로 여기서는 '현재 속성값을 검색할 수 있다." 라고만 기억하면 됩니다.
css() 메서드에서 여러 가지 속성값을 한꺼번에 변경하는 방법
css() 메서드에서 여러 가지 속성값을 한꺼번에 변경하려면 코드를 어떻게 작성해야 할까요? 예를 들어 다음과 같은 코드를 작성하는 사람도 있을 겁니다.
$(function() {
$('#typo').css('font-size', '50px');
$('#typo').css('background-color', '#ae5e9b');
$('#typo').css('color', '#ebc000');
});$('선택자').css({
'속성 1' : '수치 1',
'속성 2' : '수치 2',
'속성 3' : '수치 3',
});$(function(){
$('#typo').css({
'font-size' : '50px' ,
'background-color : '#ae5e9b',
'color : 'ebc000'
})
});$(function(){
$('#typo').cs({
fontSize : '50px',
backgroundColor : '#ae5e9b',
color : '#ebc000'
})
});
| jQuery 기본 구문 설명 (0) | 2021.02.09 |
|---|---|
| JQuery? (0) | 2021.02.08 |
| jQuery.ready() 란 (0) | 2021.02.04 |
| JavaScript 관련 용어 (라이브러리, 플러그인, 함수, 확장 라이브러리) (0) | 2021.02.09 |
|---|---|
| [모던 자바스크립트 입문] 6장. 웹 브라우저에서의 입출력 (0) | 2021.02.05 |
| [Web 2강] HTML과 JS의 만남 (0) | 2021.02.05 |
자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드
보통웹 페이지에서는 id 속성과 class 속성으로 지정한 HTML 요소에 javaScript에서 구현한 기능이나 효과를 추가합니다. (id는 html에서 고유한 이름 class는 html에서 고유하지 않은 집합의 이름)
HTML요소를 이렇게 조작하거나 바꾸는 작업을 DOM 조작이라고 함
$('#books > ul.list').append('<li>Creative jQuery</li>위의 코드에서는 CSS(#books>ul.list)와 HTML(<li>Creative jQuery</li> 이 함께 사용되는 것을 알 수 있습니다. 위 코드를 실행하면 HTML은 1번과 2번을 통해 다음과 같이변경 됩니다.
번경전
<div id = "books">
<ul class ="list">
<li> Text of jQuery </li>
</ul>
</div>변경후
<div id = "books">
<ul class ="list">
<li> Text of jQuery </li>
<li> Create jQuery </li> //추가
</ul>
</div>
JavaScript
var button =documetn.getElementById('greeting'),
sayHello =function(){
alert("Hello World");
};
if(button.addEventListener){
button.addEventListener('click',sayHello,false);
}else if (button.attachEvent){
button.attachEvent('onclick',sayHello);
}
jQuery
$('#greeting').on('click',function() {
alert('Hello World!');\
});사용방법
1. 직접 서비스하는 경우
2. 구글의 자바스크립트 라이브러리를 사용하는 경우
<html>
<body>
<div class="welcome"></div>
<div class="welcome"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('.welcome').html('hello world! coding everybody!').css('background-color','yellow');
</script>
</body>
</html>
| jQuery 기본 구문 설명 (0) | 2021.02.09 |
|---|---|
| jQuery CSS 스타일 변경하기 (0) | 2021.02.09 |
| jQuery.ready() 란 (0) | 2021.02.04 |
DOM에서는 HTML 문서나 HTML 요소를 가리키는 객채로 자바스크립트를 사용하여 HTML 문서를 조작합니다. DOM의 주요객체는 다음과 같이 분류할 수 있습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>시각을 콘솔에 표시하기</title>
<script type="text/javascript">
function displayTime(){
var d = new Date();
console.log("현재시각은" + d.toLocaleString() + " 입니다.");
}
// 1) window 객체의 onload 프로퍼티에 함수를 저장한다.
// 이 함수는 웹 브라우저가 문서를 모두 읽어 들인 후에 실행한다.
window.onload =function(){
//2) input 요소의 객체 가져오기
var button = document.getElementById("button");
//3) input 요소를 클릭했을 때 동작하는 이벤트 처리기를 등록한다.
button.onclick =displayTime;
}
</script>
</head>
<body>
<input type = "button" value= "click" id ="button">
</body>
</html>
DOM에서 이벤트 처리기를 등록하는 가장 큰 목적은 HTML 코드와 자바스크립트 코드를 분리하기 위해서입니다. 코드를 분리하면 가독성과 유지 보수성이 높아 집니다. 이를 구현하기 위해 script 요소를 head 요소의 자식 요소로 배치합니다. (script를 head에 구현했다)
DOM을 사용하면, body요소 바깥에서 body요소 안에 있는 HTML 요소를 조작할 수 있습니다. 그러나 head 요소 안에 있는 script요소의 코드가 실행되는 시점은 body 요소를 아직 읽어 들이지 못한 시점입니다. 따라서 이 시점에는 조작하고자하는 요소가 없으므로 이벤트 처리기를 등록할 수 없습니다. 그래서 이벤트 처리기를 등록하느 작업의 실행 시점을 HTML 문서 전체를 읽어 들인 이후로 미룹니다. 이를 위해 window객체의 onload 프로퍼티에 이벤트 처리기를 등록하는 작업을 수행하는 초기 설정함수를 정의합니다.
자바스크립트 코드가 실행되는 시점
웹 브라우저는 HTML 문서를 위에서 부터 차례대로 해석하면서 표시한다. 해석하는 도중 script 요소를 발견하면 script 요소 안에 있는 코드를 해석해서 실행한다. script 요소 안에 있는 코드를 실행한 다음에 HTML 요서를 해석하여 추가해 나간다. 이처럼 script 요소는 동기 실행(블로킹 실행)이 된다.
document 요소에 속하는 getElementById 메서드를 사용하여 요소 객체를 가져옵니다.
var button = document.getElementById("button");
document.getElementById는 전달받은 인수를 id 속성의 값으로 가지고 있는 HTML 요소의 요소 객체를 본환합니다. HTML 요소를 찾기 못하면 null을 반환합니다. 앞의 코드는 id 속성 값이 "button"인 요소(input 요소)의 요소 객체를 가쟈와서 가져와서 변수 button에 저장합니다. 이 요소 객체가 가진 메서드를 사용해서 HTML 요소를 조작하는 다양한 작업을 수행할 수 있습니다.
마지막으로 input 요소를 클릭했을 때 동작할 이벤트 처리기를 등록합니다.
button.onclick = displayTime;
웹 브라우저에 내장된 대화상자를 활용하여 입출력하는 방법을 배웁니다. 대화상자는 실제로 프로그래밍을 할 때 자주 사용되는 요소는 아니지만 입출력이 간단하기 때문에 프로그래밍을 학습할 때 자주 사용된다.
웹 브라우저의 전역 객체인 Window 객체에는 대화상자를 표시하기 위한 메서드가 세 개 있다.
alert("안녕하세요")
var name = prompt ("이름을 입력하세요");
//초기값 지정
var name = prompt ("이름을 입력하세요" , "이현규" );
//prompt가 반환하는 값은 문자열이므로 숫자 값을 구 하려면 parseInt나 parseFloat 메서드를 이용해야한다.
var age = parseInt(prompt("나이를 입력하세요");
var ret = confirm("취소, 확인 버튼을 클릭하세요");
console.time("answer_time");
alert("확인 버튼을 누르십시오");
console.timeEnd("answeR_time"); //answer_time :1236.106ms.
HTML 요소에 이벤트 처리기 속서을 설정하면 그 요소에 이벤트가 발생했을 때 동작하는 이벤트 처리기를 등록할 수 있습니다. 예제를 살펴보면 예제 6-1 CLICK 버튼을 클릭하면 콘솔에 현재 시각을 표시하는 프로그램입니다.
<!DOCTYPE html>
<html">
<head>
<meta charset="utf-8">
<title>시각을 콘솔에 표시하기</title>
<script type="text/javascript">
function displayTime(){
var d =new Date();
console.log("현재시각은 " + d.toLocaleString() + "입니다");
}
</script>
</head>
<body>
<input type="button" value = "click" onclick = "displayTime()">
</body>
</html>
위의 소스에서 가장 핵심은 onclick="displayTime()" 이며 input 요소를 클릭 했을 때 함수 displayTime이 실행되는 것이다.
| JavaScript 관련 용어 (라이브러리, 플러그인, 함수, 확장 라이브러리) (0) | 2021.02.09 |
|---|---|
| [모던 자바스크립트 입문] 8장. 함수 호출하기 (0) | 2021.02.08 |
| [Web 2강] HTML과 JS의 만남 (0) | 2021.02.05 |
JS는 동적이라 1+1을 계산해서 웹상에 뿌려준다. 하지만 HTML은 그냥 그대로 뿌려준다
<<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<h1> javascript </h1>
<body>
<script type="text/javascript">
document.write(1+1);
</script>
<h1> html </h1>
1+1
</body>
</html>
onclick 클릭 했을 때 이미 기억하고 있던 동작하는 메소드 (=Event)
마우스 포인터가 창 밖으로 나간 동작을 인식하는 메소드
키를 눌렸을 때 동작하는 메소드
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type ="button" value ="hi" onclick="alert('hi')">
<input type ="text" onchange="alert('onchange')">
<input type ="text" onkeydown="alert('key down!')">
</body>
</html>
| JavaScript 관련 용어 (라이브러리, 플러그인, 함수, 확장 라이브러리) (0) | 2021.02.09 |
|---|---|
| [모던 자바스크립트 입문] 8장. 함수 호출하기 (0) | 2021.02.08 |
| [모던 자바스크립트 입문] 6장. 웹 브라우저에서의 입출력 (0) | 2021.02.05 |
jQuery를 이용한 뷰단 event 함수 구현 중 비슷하지만 다른 두 jQuery 함수에 대한 궁금증
$(document).ready(function(){
alert('hi-ready');
});
$(window).onload(function(){
alert('hi-load');
});
우선 알아둬야할 내용 "웹 브라우저의 HTML문서 랜더링 과정"
| jQuery 기본 구문 설명 (0) | 2021.02.09 |
|---|---|
| jQuery CSS 스타일 변경하기 (0) | 2021.02.09 |
| JQuery? (0) | 2021.02.08 |