함수 기본 정의 호출
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수 정의 및 함수 호출</title>
</head>
<body>
<script type="text/javascript">
//"자바스크립트", "jQuery", "jsp" 문자열을 다섯 번씩 출력해주세요.
//함수 정의
function showName(name) {
for (var i = 1; i <= 5; i++)
document.write(i +", " + name + "입니다. <br/>");
}
//함수 호출
showName('자바스크립트');
showName('jQuery');
showName('jsp');
</script>
</body>
</html>
함수 기본 정의 호출 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수 정의 및 함수 호출</title>
</head>
<body>
<script type="text/javascript">
//"자바스크립트", "jQuery", "jsp" 문자열을 호출시 입력한 횟수만큼 출력해주세요.
//함수 정의
function showName(name, count) {
for (var i = 1; i <= count; i++)
document.write(i +", " + name + "입니다. <br/>");
}
//함수 호출
showName('자바스크립트', 5);
showName('jQuery', 10);
showName('jsp', 7);
</script>
</body>
</html>
별 찍기
<!DOCTYPE html>
<!--
*
**
***
****
*****
*
**
***
****
*****
-->
<html>
<head>
<meta charset="UTF-8">
<title>별표 찍기를 함수로 만들기</title>
</head>
<body>
<script type="text/javascript">
function printStar(){
var star = '';
for (var i = 1; i <= 5; i++) {
for (var j = 0; j < i; j++) {
star+='*';
}
star+='<br/>';
}
document.write(star);
}
printStar();
printStar();
</script>
</body>
</html>
전역변수, 지역변수 스코프
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지역변수와 전역변수 구분하기</title>
</head>
<body>
<script type="text/javascript">
var name = "test1"; //전역변수
function func1() {
var name ='test2' //지역변수
document.write('2. name = ' + name + '<br/>');
}
function func2() { //지역변수
var name ='test3'
document.write('3. name = ' + name + '<br/>');
}
function func3() { //전역변수
name ='test4'
document.write('4. name = ' + name + '<br/>');
}
document.write('1. name = ' + name + '<br/>'); //전역변수가 호출됨
func1(); //지역
func2(); //지역
func3(); //전역변수 var이 없음.
document.write('5. name = ' + name + '<br/>'); //전역변수가 호출됨
</script>
</body>
</html>
전역변수, 지역변수 생명주기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지역변수_전역변수_생명주기</title>
</head>
<body>
<script type="text/javascript">
function func1(){
var name = "gumi city";
document.write("1. name = " + name + '<br/>');
}
func1();
document.write("2. name = " + name);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전역변수 & 지역변수</title>
</head>
<body>
<script type="text/javascript">
var a = 10;
var b = 100;
function func1() {
var b = 20;
document.write("1. a = " +a+ "<br/>");
document.write("2. b = " +b+ "<br/>");
a = 50;
}
func1();
document.write("3. a = " +a+ "<br/>");
document.write("4. b = " +b+ "<br/>");
/*
1. a = 10 (전역변수)
2. b = 20 (지역변수)
3. a = 50 (전역변수)
4. b = 100 (전역변수)
*/
</script>
</body>
</html>
두수 더하는 함수
alert 이용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>두수를 더하는 함수</title>
</head>
<body>
<script type="text/javascript">
/* 매개변수로 받은 두수를 더한 결과 값을 출력하는 함수를 만들어 주세요. */
function sum(num1, num2) {
var result = num1 + num2;
alert("두 수의 합은 = " + result);
}
sum(2, 10);
</script>
</body>
</html>
매개 변수가 없더라도 호출됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>arguments</title>
</head>
<body>
<script type="text/javascript">
function showInfo() {
console.log("0 = " +arguments[0]);
console.log("1 = " +arguments[1]);
alert("안녕하세요. " +arguments[0]+ "님의 나이는 " +arguments[1]+ "입니다.");
}
showInfo("대한민국", 30);
</script>
</body>
</html>
window창 활용한 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>return문의 또다른 용도</title>
</head>
<body>
<script type="text/javascript">
/*
무한루프를 돌며 숫자를 입력받고 입력받은 수의 합을 화면에 출력 gumi()라는
함수에 만들어 주세요.
단, 입력값이 0이면 즉시 실행을 멈춰 주세요.
*/
function gumi() {
var sum = 0;
var count = 1;
//무한루프
while (true) {
var value = parseInt(window.prompt('수 입력', 1));
if(value == 0){
document.write("종료합니다. " + " ");
document.write("총 " +count+ "번 실행했습니다.");
//함수 탈출
return;
}
//입력값 더하기
sum += value;
//입력값 출력하기
document.write(count + ". " + sum + "<br/>")
count++;
}
}
//함수호출
gumi();
</script>
</body>
</html>
변수에 함수를 저장하는 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수에 함수를 저장</title>
</head>
<body>
<script type="text/javascript">
function hello(name){
document.write(name + "님 환영합니다.");
}
hello("도우너");
document.write('<br/>');
var func = hello;
func("둘리");
func("고길동");
</script>
</body>
</html>
매개변수 값으로 함수를 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>매개변수 값으로 함수를 사용</title>
</head>
<body>
<script type="text/javascript">
function happy() {
alert("Happy");
}
function newyear() {
alert("New Year");
}
function excute(func){ //매개변수 값으로 함수사용
func();
}
excute(happy);
excute(newyear);
</script>
</body>
</html>
jQuery
jQuery를 사용하는 이유
바닐라사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 사용</title>
</head>
<body>
<div>
<p>jQuery를 사용하는 이유를 알아보겠습니다.</p>
<p>요청 : 스크립트를 이용해서 문서에서 #menu2의 li태그의 스타일 속성 중 글자색을
모두 빨간색으로 변경해 주세요.</p>
</div>
<ul class="menu" id="menu1">
<li>menu-1</li>
<li>menu-2</li>
<li>menu-3</li>
<li>menu-4</li>
<li>menu-5</li>
<li>menu-6</li>
<li>menu-7</li>
</ul>
<ul class="menu" id="menu2">
<li>menu2-1</li>
<li>menu2-2</li>
<li>menu2-3</li>
<li>menu2-4</li>
<li>menu2-5</li>
</ul>
<script type="text/javascript">
window.onload = function() { //바닐라 방식은 번거롭다.
//먼저 #menu2를 찾는다.
var menu2 = document.getElementById("menu2");
//#menu2 태그중 li태그를 찾는다.
var lilist = menu2.getElementsByTagName("li");
//li태그에 하나씩 접근해서 글자색을 변경한다.
for (var i = 0; i < lilist.length; i++) {
var li = lilist[i];
li.style.color = "#f00";
}
}
</script>
</body>
</html>jQuery 사용
<!DOCTYPE html>
<!--
*jQuery
1) 2006년 1월 발표 / 2010년도 8월 프로젝트 공식 발표함.(jQuery mobile)
2) DOM의 쉬운 조작, 쉽고 일관된 이벤트, 시각화 지원, 쉬운 Ajax 지원...
3) 자바스크립트에서 DOM 객체를 질의(query)해 조작한다는 의미를 강조함.
4) HTML DOM과 자바스크립 사이의 상호작용을 간단하게 해주는 것이 jQuery의 가장
큰특징임.
5) jQuery는 HTML DOM 객체에 접근하기 위해 셀렉터(select) 매커니즘을 사용.
CSS 셀렉터로 문서의 특정 노드를 찾을수 있음.
6) jQuery의 별칭으로 $를 사용할수 있어 $()를 더 많이 사용함.
-->
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 사용</title>
</head>
<body>
<div>
<p>jQuery를 사용하는 이유를 알아보겠습니다.</p>
<p>요청 : 스크립트를 이용해서 문서에서 #menu2의 li태그의 스타일 속성 중 글자색을
모두 빨간색으로 변경해 주세요.</p>
</div>
<ul class="menu" id="menu1">
<li>menu-1</li>
<li>menu-2</li>
<li>menu-3</li>
<li>menu-4</li>
<li>menu-5</li>
<li>menu-6</li>
<li>menu-7</li>
</ul>
<ul class="menu" id="menu2">
<li>menu2-1</li>
<li>menu2-2</li>
<li>menu2-3</li>
<li>menu2-4</li>
<li>menu2-5</li>
</ul>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
/*
$(document).ready(function(){...}) 형태 : 익명함수를 매개변수로 사용.
*/
$(document).ready(function() {
$("#menu2 li").css("color", "#f00")
})
</script>
</body>
</html>
jQuery 준비 사용법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 준비</title>
<style type="text/css">
body {
font-size: 9pt;
font-family: "굴림";
}
div, p {
border: 1px #eeeeee solid;
margin: 10px;
}
</style>
</head>
<body>
<div>
jQuery를 이용한 노드 찾기
</div>
<p>
$()는 그냥 함수 호출일 뿐이다. 함수이름이 $인 함수 호출인것이다.
$() 함수의 역할은 선택자에 해당하는 노드를 찾아주는 역할을 한다.
</p>
<div>
var $변수명은 $()함수에서 리턴해주는 값을 저장하기 위해 만든 변수입니다.
변수이름 앞에 $를 붙여준 이유는 jQuery기능이 들어있는 변수라는 것을 표현하기 위해서입니다.
</div>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
/*
문서에서 div 태그의 글자색을 모두 빨간색으로 변경해 주세요
*/
$(document).ready(function() {
//여기에 노드를 다루는 코드를 작성하면 됩니다.
//alert("환영합니다.");
var $divs = $("div").css("color", "#f00");
})
</script>
</body>
</html>
