screen 으아아
function func1()
{ // 모니터의 총 가로세로 값
var x = screen.width;
var y = screen.height;
document.getElementById("aa").innerText=x+" : "+y;
}
function func2()
{ // 모니터에서 사용가능한 가로세로 값
var x = screen.availWidth;
var y = screen.availHeight;
document.getElementById("bb").innerText=x+" : "+y;
}
function func3()
{ // 브라우저의 가로세로 값
var x = window.innerWidth;
var y = window.innerHeight;
document.getElementById("cc").innerText=x+" : "+y;
}
function func4()
{ // 위와 같음
var x = document.documentgetElement.clientWidth;
var y = document.documentgetElement.clientHeight;
document.getElementById("dd").innerText=x+" : "+y;
}
function func5()
{ // 같은 브라우저 가로세로 값이지만 사용한 내부?, 예전에 쓰던거임
var x = document.body.clientWidth;
var y = document.body.clientHeight;
document.getElementById("ee").innerText=x+" : "+y;
}function에 실행이벤트를 위로 올리는것도 있다.
<script>
function test()
{
alert("실행1");
}
window.onload=function()
{
document.getElementById("bb").onclick=test2;
// onload시에 바로 이름 없는 익명의 함수(function())을 만들어서 할수도있음
document.getElementById("cc").onclick=function()
{
alert("실행3");
};
// 이벤트를 추가하는 방법 , 이것도 익명함수로 할수있지만 remove를 못함 그럴거면 이거 안씀
document.getElementById("dd").addEventListener("click",dd_test);
// 추가한 이벤트를 삭제 하기
document.getElementById("ee").onclick=function()
{
document.getElementById("dd").removeEventListener("click",dd_test);
}
//실행을 한번만 할 수 있게 만들기
document.getElementById("ff").addEventListener("click",test2,{once:true});
}
function test2()
{
alert("실행2");
}
function dd_test()
{
alert("실행4");
}
</script>
</head>
<body>
<div onclick="test()"> 클릭</div> <hr>
<div id="bb"> 클릭 </div> <hr>
<div id="cc"> 클릭 </div> <hr>
<div id="dd"> 클릭(addEvent) </div>
<div id="ee"> 위의 클릭에 이벤트를 삭제</div> <hr>
<div id="ff"> 실행을 한번만 </div>
</body>jQuery는 무조건 욜케 사용해야함
<script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function()) { }); </script> 위를 짧게 해서 $(function() << 주로 이형태로 사용함 { });
jQuery 이벤트를 사용한 버전과 안하고 바로 실행하는버전
<script>
$(function()
{
//document.getElementById("aa").style.color="red";
$("#aa").css("color","blue"); // css >> style을 변경시 사용하는 메소드
// 이벤트를 통해서 실행하고 싶을땐 항상 $("요소").이벤트(function() {} );
$("#bb").click(function()
{
$("#bb").css("color","green");
}); // id="bb"인 요소를 클릭하면이라는 뜻
});
</script>
</head>
<body>
<div id="aa"> 안녕하십쎕세요 </div><p>
<div id="bb"> 감사합니다요리 </div>
</body>
국비 코딩