함수란?
실행할 명령을 바로 실행하지 않고 함수에 저장하였다가 필요에 따라 그 함수명만 호출하여 그 함수에 저장되어 있는 명령을 실행하는 구문
형식
function 함수명(매개변수) {
저장할 명령
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>function_test</title>
<meta name="description" content="">
<meta name="author" content="Administrator">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script>
function printFruit(fruit){
document.write(fruit);
}
printFruit('apple');
</script>
</head>
<body>
</body>
</html>
내장함수: 자바스크립트에서 이미 정의내려둔 함수
외장함수: 사용자 임의 새로 정의해둔 함수
내장함수 사용 테스트
<script>
window.onload=function(){
var divs = document.getElementsByTagName('div');
alert(divs.length);
}
</script>
내장함수
getElementsByTagName(): 태그이름의 요소를 배열화해서 변수에 담기
getElementsByClassName(): 클래스이름의 요소를 배열화해서 변수에 담기
getElementByID(): 아이디이름의 요소를 변수에 담기
<script>
window.onload=function(){
var divs = document.getElementsByTagName('div');
//alert(divs.length);
/*divs[0].style.border = "solid 3px red";
divs[1].style.border = "solid 3px red";
divs[2].style.border = "solid 3px red";
*/
for(var i = 0; i<divs.length; i++){
divs[i].style.border = "solid 3px purple";
}
var subMenus = document.getElementsByClassName('subMenu');
for(var i = 0; i<subMenus.length; i++){
subMenus[i].style.border = "solid 3px yellow";
}
var logo = document.getElementById("logo");
logo.style.border = "solid 3px red";
}
</script>
jquery
자바스크립트에서 자주쓰이는 것들을 간단하게 정의해놓은 것.
사용법
library파일을 호출하기
<script></script>안에서 사용하기
기본규칙
"태그명"
".클래스명"
"#아이디명"
스타일 함수
css("스타일종류", "스타일값")
tip: 자바스크립트와 다르게 jquery는 변수명 앞에 $를 붙이면 for문을 쓰지 않아도 됨.
<script src="libs/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
//tip: 자바스크립트와 다르게 jquery는 변수명 앞에 $를 붙이면 for문을 쓰지 않아도 됨.
var $divs = $("div");
$divs.css("border","solid 3px red");
var $subMenu=$(".subMenu");
$subMenu.css("border", "solid 3px purple");
var $logo=$("#logo");
$logo.css("border", "solid 3px green");
});
</script>