자바스크립트 함수

자바스크립트 함수

선언적 함수

반환 값 선언없이 function 키워드만 이용하여

function 함수명() {소스코드 작성} 로 작성해서 실행하는 방법 function test1 () {

document . getElementById ( "p-tag1" ). innerHTML = "test1() 함수 실행됨"

}

선언적 함수 반환 값 선언없이 function 키워드만 이용하여 function 함수명() {소스코드 작성} 로 작성해서 실행하는 방법 실행확인

//선언적함수(기본) function test1() { document.getElementById("p-tag1").innerHTML="test1() 함수 실행됨" }

익명함수

function에 함수명을 작성하지 않고 변수에 대입하는 방법

변수(함수명) = function() {소스코드 작성} 로 작성하여 실행하는 방법 var test2 = function (){

document . getElementById ( "p-tag2" ). innerHTML = "test2() 함수 실행됨"

}

익명함수 function에 함수명을 작성하지 않고 변수에 대입하는 방법 변수(함수명) = function() {소스코드 작성}로 작성하여 실행하는 방법 실행확인

//익명함수 var test2 = function(){ document.getElementById("p-tag2").innerHTML="test2() 함수 실행됨" }

스스로 실행하는 함수

1회만 실행

(function() {소스코드 작성})();

스스로 실행하는 함수 (function() {소스코드 작성})(); 실행확인

//스스로 실행하는 함수(1회용), 오류시 스크립트 영역 별도로 주기 (function() { document.getElementById("p-tag3").innerHTML = "자동으로 혼자 실행됨"; })();

함수의 전달인자와 매개변수

함수의 전달 인자와 매개변수 실행확인

//함수의 전달 인자와 매개변수 function test4(num1,num2,num3){ console.log(num1+num2+num3); document.getElementById("p-tag4").innerHTML = num1+num2+num3; }

함수의 리턴처리

함수의 리턴처리 실행확인

//함수의 리턴처리 function test5() { var value = returnFunction(); document.getElementById("p-tag5").innerHTML=value; } function returnFunction() { return Math.floor(Math.random()*100+1); }

매개변수로 함수 전달

익명함수로 매개변수로 활용 함수도 하나의 자료형이기 때문에 매개변수로 전달 가능

매개변수로 함수 전달 익명함수로 매개변수로 활용 함수도 하나의 자료형이기 때문에 매개변수로 전달 가능

//매개변수로 함수 전달 function callFuncTenTimes(otherFunc){ for(var i = 0; i < 10; i++){ otherFunc(i); } } callFuncTenTimes(function(num){ document.getElementById("p-tag6").innerHTML += (num+1) + "번째 함수 호출 완료 "; });

익명함수를 리턴하는 함수

익명함수를 리턴하는 함수 실행확인

//익명함수를 리턴하는 함수 function returnExam() { var nameTag = document.getElementById("name"); //익명함수는 이 자체로 값이 되어 리턴값, 매개변수로 쓰일 수 있다. return function() {alert(nameTag.value+"님 환영합니다. ^오^")}(); //스스로 동작하는 함수 주의!!! 가장 끝에 (); 꼭 붙여줘야한다. 없으면 alert 실행 안됨. }

실습문제

시작실습1>

더보기 시작실습1 div{ border : 1px solid red; height:100px; width:300px; } 문제1. div 안에 있는 내용을 "성공" 으로 바꾸어 보세요 (JavaScript로만 바꾸는걸 잊지마세요!) 저를 바꾸어보세요^^ 도전 문제2. "바꿀수 있을까? 라는 문구를 "성공" 으로 바꾸어 보세요 도전 문제3. 해당 값을 읽어서 개발자도구 : 콘솔에 출력해보세요 저를 읽어서 콘솔에 출력해보세요 도전 문제4. 해당 태그의 타입을 변경하여 볼 수 있도록 해보세요(버튼이 없는 문제입니다.) function myfunc1(){ document.getElementById("div1").innerHTML="성공"; } function myfunc2(){ document.getElementById("test").value="성공"; } function myfunc3(){ console.log(document.getElementById("span").innerHTML); } document.getElementById("test2").type="text";

시작실습2>

더보기 시작실습2 다음 보기에 있는 내용들을 각 문제에 맞게 바꾸어 보아라. 보기 이름 : pass : name : addr : 문제1 보기에 있는 "이름 : " -> "ID : " 으로 변경 되도록 하여라. 도전 문제2 현재는 패스워드 입력시 비밀번호가 노출되는 형태이다. 비밀번호 입력시 비밀번호가 노출되지 않도록 만들어라. 도전 문제3 name의 기본 노출값이 이상하다.! 기본 노출값이 "비밀번호를 입력하세요"가 아닌 "이름을 입력하세요"로 변경하시오 도전 문제4 addr의 주소 입력창이 너무 짧다! 최대 50글자를 입력할 수 있도록 입력바를 길게 만들어라. 도전 문제5 보기에 있는 필드에 내용을 작성하고 작성된 내용을 모두 가져와서 alert창에 출력하시오 단, getElementById를 사용하지 말고 처리하시오 ex) ID : XXX PW : XXXXXX 이름 : XXX 주소 : XXXXXXXX 도전

" + "PW : " + info[1].value + "

" + "이름 : " + info[2].value + "

" + "주소 : " + info[3].value); }

from http://roqkfgksmsdbstn.tistory.com/79 by ccl(A) rewrite - 2021-09-09 08:27:31