1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {padding: 10px; list-style: none;}
</style>
</head>
<body>
<input type="button" value="alert" onclick="alertFunc();">
<input type="button" value="confirm" onclick="func_confirm();">
<input type="button" value="prompt" onclick="func_prompt();">
</br>
<input type="button" value="window.open(demo2)" onclick="open1();"> </br>
두번째 인자는 새창의 이름이다. _self는 스크립트가 실행되는창을의미 </br>
<input type="button" value="window.open(demo2,_self)" onclick="open2();"> </br>
두번째 인자는 새창의 이름이다. _blank는 새창을의미 </br>
<input type="button" value="window.open(demo2,_blank)" onclick="open3();"></br>
창에 이름을 붙일 수 있다 open을 재실행했을때 동일한 이름의 창이있으면 그곳으로 문서가 로드 </br>
<input type="button" value="window.open(demo2,'ot')" onclick="open4();"></br>
창크기 조절하는 세번쨰 인자 </br>
<input type="button" value="window.open(demo2,'ot',---)" onclick="open5();"></br>
<input type="button" value="open" onclick="winopen()">
<input type="text" onkeypress="winmessage(this.value)">
<input type="button" value="close" onclick="winclose()">
<script>
var win=window;
function winopen(){
win=win.open('demo2.html','ot');
console.dir(win.pathname);
console.dir(win);
}
function winmessage(msg){
win.document.getElementById("message").innerText=msg;
}
function winclose(){
win.close();
}
function alertFunc(){
alert(1);
}
function func_confirm(){
if(confirm('데이터를 변경할래?')){
alert('ok')
}else{
alert('cancel');
}
}
function func_prompt(){
if(prompt('id를 입력')==='lee'){
alert('welcomd');
}else{
alert('fail');
}
}
// BOM이란 웹 브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단 Window 객체의 사용법을 아는 것이라 할 수 있다
// 전역객체 window
// alert('Hello world!')
// window.alert("hello wordl!") // 위의 내장함수는 앞에 window가 생략된것
var a=1;
a;
window.a;
// Location객체 => 현재 윈도우의 URL 알려준다
console.log(location.toString,location.href)
console.log(location);
// alert(location); 이런식으로도 가능하다
console.log(location.protocol);
console.log(location.host);
console.log(location.port);// 컴퓨터에서 서버 소프트웨어를 식별하는 것
console.log(location.pathname);
console.log(location.hash);
// location은 url주소를 변경하거나 리로드를 할수 있다
// location.href='/study/array.html';
// location.href =location.href; // 리로드
// location.reload(); 리로드를 할수있다
// Navigator 객체
console.dir(navigator);
console.dir(navigator.appName);
console.dir(navigator.appVersion);
console.dir(navigator.platform);
// window 창제어
function open1(){
window.open('demo2.html');
}
function open2(){
window.open('demo2.html','_self');
}
function open3(){
window.open('demo2.html','_blank');
}
function open4(){
window.open('demo2.html','ot');
}
function open5(){
window.open('demo2.html','_blank','width=200, height=200');
}
// 윈도우 브라우저 보안에 관해서
</script>
</body>
</html>2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery.js"></script>
</head>
<body>
<ul>
<li class="active">HTML</li>
<li class="active">CSS</li>
<li class="active" id="active">자바스크립트</li>
</ul>
<script>
// dom으로 제어하기 위해서는 제어 대상을 찾아야한다
// documents.getElementsByTagName
var ul =document.getElementsByTagName('ul')[0];
var lis= ul.getElementsByTagName('li');
for(var i=0 ;i<lis.length;++i){
lis[i].style.color='red';
}
// 위의 방식대로 범위를 좁히는 것이 중요하다
// 다른 방식
var liss= document.getElementsByClassName('active');
for(var k in liss){
// liss[k].style.color='black';
}
// getElementById 결과는 항상 1개만 나옴
var aa = document.getElementById('active');
aa.style.color='green';
// querySelector
var li = document.querySelector('li');
li.style.color='red';
var li = document.querySelector('.active')
li.style.color='blue';
// # = id , . = class ul>li(ul 안에있는 li) a[href='#']
// jQuery의 사용
jQuery(document).ready(function($){
$('body').prepend('<h1>Hello world!</h1>');
});
// 제이쿼리는 항상 $로 시작 $는 제이쿼리 함수를 의미한다
// 가장 많이 받은 인자값은 css selector값이다
$('li').css('color','red');
// jquery로 인해서 리턴된 결과물을 제이쿼리 객체라 부른다
// <li style='color:red'></li> 를 의미함
$('.active').css('color','black');
$('#active').css('color','green').css('textDecoration','underline');
</script>
</body>
</html>3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery.js"></script>
<title>Document</title>
</head>
<body>
<ul>
<li id="anchor">HTML</li>
<li id="active">CSS</li>
<li id="list"> 자바스크립트</li>
<li id="obj"></li>
<input type="button" value="button" id="button">
</ul>
<script>
var li=document.getElementById('active');
console.log(li.constructor.name);
var lis= document.getElementsByTagName('li');
console.log(lis.constructor.name);
var target=document.getElementById('list');
console.log(target.constructor.name);
var target=document.getElementById('anchor');
console.log(target.constructor.name);
var target = document.getElementById('button');
console.log(target.constructor.name);
console.group('before');
var lis = document.getElementsByTagName('li');
for(var v=0;v<lis.length;++v){
console.log(lis[v]);
}
console.groupEnd();
console.group('after');
lis[1].parentNode.removeChild(lis[1]);
var lis = document.getElementsByTagName('li');
for(var v=0;v<lis.length;++v){
console.log(lis[v]);
}
console.groupEnd();
var list = $('li');
list.css('color','red').css('text-decoration','underline')
var li = $('li');
console.log(li[0].constructor)
// 돔 객체는 jquery 메서드를 사용 못하므로 제이쿼리객체안에 넣어야한다
// 이후 css 적용
$(li[0]).css('color','black');
// 맵을 통해 제이쿼리 살펴보ㄱ,
var li = $('li');
li.map(function(index,elem){
console.log(index,elem);
$(elem).css('color','blue');
});
var obg={1:'lee'};
$(obg).map(function(index,ele){
for(var key in ele){
console.log(11);
console.log(obg[key]);
}
$('#obj').text(obg[key]).css('color','red');
})
</script>
</body>
</html>
자바를 사랑합니다