컴퓨터 프로그래밍/수업
2020.05.21_3
깝돌이
2020. 5. 21. 14:50
Dom: Document object model
태그의 하이어라키에 하나하나가 전부다 오브젝트로 만들어져서 메모리에 올라갑니다. 이 전체를 가리켜 다큐먼트라고 합니다. 돔구조에 객체로 올라가지 않는 것은 속성입니다. 속성은 메모리에 올라가지 않은. 속성은 객체에 적용되는 거다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>복합연산자</title>
<script type="text/javascript">
window.onload = function(){
/* var list = "aaa";//data type이 동적으로 할당
alert(list);
*/
var list = '';
//복합 연산자
list +='<ul>';
list +='<li>Hello</li>';
list +='<li>JavaScript!!!!</li>';
list +='</ul>';
//li 변수안에 있는 내용을 웹브라우저에 출력.... body태그아래에 붙이면 된다.
document.body.innerHTML = list;// 윈도우가 생략 window.document.body.innerHTML = list;
//window.onload = function(){이 없을 때에는 끝까지 읽지 않고 스크립트부터 읽는다. document가 완벽히 만들어지지 않으니까, 호출이 안됨. 그래서
//onload를 써주면, 완벽히 다 읽고나서 여기를 읽어서 완벽히 document를 만들수 있다.
//onload는 한번 밖에 사용을 못합니다.
//선생님 정리:
/*
window.onload
HTML 문서에 포함된 모든 콘텐츠가 메모리에 다 로드된 후에 실행하는 함수 가
동일한 문서에는 오직 하나만 존재한다.
여러개 존재할 수 있고 훨씬 동작이 유연한 함수.....
JQuery의 ready함수 입니다.
*/
}
</script>
</head>
<body>
<h2>========onload==========</h2>
</body>
</html>
JQuery의 jar(API)가 없다는 말이다.
jQuery CDM방식으로 해결할 수 있습니다.
복붙합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>복합연산자</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {//여러번 호출하고, 로딩이 지연되도 문제없이 실행됨.
var list = '';
list +='<ul>';
list +='<li>Hello</li>';
list +='<li>JavaScript!!!!</li>';
list +='</ul>';
document.body.innerHTML = list;
});
</script>
</head>
<body>
<h2>========onload==========</h2>
</body>
</html>
여러개를 쓸 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>복합연산자</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {//여러번 호출하고, 로딩이 지연되도 문제없이 실행됨.
var list = '';
list +='<ul>';
list +='<li>Hello</li>';
list +='<li>JavaScript!!!!</li>';
list +='</ul>';
document.body.innerHTML = list;
});
$(document).ready(function() {
alert("aaa");
});
$(document).ready(function() {
alert("bbb");
});
</script>
</head>
<body>
<h2>========onload==========</h2>
</body>
</html>
변수와 호이스팅
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
*var fuc = function(){} : 익명함수 선언법
*fuction name(){} : 선언적 함수 선언법
*/
/* 1.
var name = "james";//전역변수
function showName(){
var name = "gosling";//지역변수 showName(){} 함수 안에서만 사용
console.log(name);
}
console.log(name);//james
showName();//gosling
*/
/*
변수 선언부를(값은 제외합니다.) 함수 최상단으로 끌어올려서 선언함...변수 호이스팅(variable hoisting)
만약 함수 밖에서 선언된 변수라면 스크립트 선언부 최상단으로 끌어올려진다.
*/
2.
doSomething();
function doSomething(){//선언적 함수 선언: 내부적으로 아래와 같은 순서로 실행이 됩니다.
alert("정의되어 있지않음"+some); //2.
var some = "Good Day!!"; //1.
alert("정의되어 있음 "); //3.
}
</script>
</head>
<body>
</body>
</html>