전업요리사의 앱 개발 공부하기
Javascript 기본용어사용2 본문
셀렉터
아이디
Var id = document.gerElementsById("id_name")
네임
Var name = document.gerElementsByName("name_name")
클래스
앨리먼트에 html 코드 입력
Document.getElementById("test'
이벤트
모든행동
<Botton onclick="alert('클릭함')"/)
<select on change="alert('선택됨
<div onmouseover="alert('마우스들어옴
<div onmouseout="alert('마우스나감
Body unload="alert('load
<textarea onkeydoen="alert('키보드입력됨
form데이터 가져오기
입력할때마다 기록
<body>
<form name="myform">
<input type="text" name="fname" onkeyup='datashow()'/>
<form>
<script>
function datashow()
{
var data = document.forms['myform']['fname'].value;
console.log(data);
}
</script>
</body>
9일차
Jqurey
자바스크립크 라이브러리
자유소프트웨어
폭넓은 브라우저 지원
Ajax
비동기적인 웹페이지 제작을 위한 기법
Json
Javascript object nation
키 값이 쌍으로 이루어진 데이터 오브젝트
CDN
Contents delivery network
자료를 효윻적으로 전달하기위해 여러노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템
https://code.jquery.com/
주소. https://code.jquery.com/jquery-3.6.0.js
<html>
<head>
<title></title>
</head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<style></style>
<body>
<script>
$(function()
{
alert('1');
});
</script>
</body>
</html>
$('#id_name')
$(this)지금
$("element_name")
O'clock
$('#id_name').on("click",function()){
Console.log()
}
<button id="btn">클릭</button>
<script>
$(function()
{
$("#btn").on("click",function(){
console.log("click");
})
});
온로드 돔이 구축하고나서 이것을구축
$("#btn").on("click",function(){
console.log("click");
이건 차레차레 구축
Onmouseover
<button id="btn1">HTML</button>
<button id="btn2">Text</button>
<div id="text"></div>
<script>
$(function()
{
$("#btn1").on("click",function(){
$("#text").html("<b>HTML</b>");
});
$("#btn2").on("click",function(){
$("#text").html("<b>text</b>");
});
});
끼워넣기
$(target).append(source)
<button id="btn1">append</button>
<button id="btn2">prepend</button>
<div id="text"></div>
<script>
$(function()
{
let codes ="<b>text</b>";
$("#btn1").on("click", function(){
$("#text").append(codes);
})
$("#btn2").on("click", function(){
$("#text").prepend(codes);
})
});
Append 뒤에넣기
Prepend 앞에넣기
옵셩값 변경가능
$(target).attr("바꿀옵션",값)
<button id="btn1">attr 변경</button>
<button id="btn2">attr 확인</button>
<div id="text">now</div>
<a href="" id="link">Link</a>
<script>
$(function()
{
let codes ="<b>text</b>";
$("#btn1").on("click", function(){
let url = prompt("주소를 입력해 주세요");
console.log(url);
$("#link").attr("href",url);
})
$("#btn2").on("click", function(){
console.log($("#link").attr("href"));
$("#link").attr("href");
})
});
CSS 변경
<div id="text">now</div>
<a href="" id="link">Link</a>
<script>
$(function()
{
$("#btn1").css("wide", "2000px");
$("btn2").css("hight","100%");
});
'JavaScript' 카테고리의 다른 글
| Javascript 기본구조 (0) | 2021.04.28 |
|---|---|
| 자바스크립트 기본 용어정리 의미 (0) | 2021.04.28 |