기초 예제
// 짝수 구구단
for(var dan=2; dan<=9; dan++) {
if(dan%2==0)
for(var i=1; i<=9; i++) {
document.write(dan+"x"+i+"="+(dan*i),"<br>");
}
document.write("<br>");
}내가 입력한 단부터 입력한 단까지의 구구단만 출력
var num1=prompt("시작단 입력")
num1=parseInt(num1)
var num2=prompt("끝단 입력")
num2=parseInt(num2)
for(var dan=num1; dan<=num2; dan++) {
for(var i=1; i<=9; i++) {
document.write(dan+"x"+i+"="+(dan*i),"<br>");
}
document.write("<br>");
} //1부터100까지의 짝수합, 홀수합
var evenSum = 0 // 짝수값 저장 변수
var oddSum = 0
for(var i=1; i<=100; i++){
if(i%2==0){
evenSum+=i
}else{
oddSum+=i
}
}
document.write("짝수합:"+evenSum,"<br>")
document.write("홀수합:"+oddSum,"<br>")function : 키워드
hello : 함수이름
() : 입력부분. 입력부분의 변수를 매개변수라 함.
매개변수, 인수, 파라미터
매개채 변수. 매개체 : 둘 사이를 연결하는 어떤 것
document.write("짝수합:"+evenSum,"<br>")
document.write("홀수합:"+oddSum,"<br>")
function myFunc(num) {
document.write(num, "<br>")
return // 단순 함수 종료
document.write(num+10, "br>") // 실행이 되지 않는다.
}
myFunc(10)
// myFunc 함수를 호출하면서 입력으로 10을 줬다 문제를 풀어보자.
// 1~100까지의 합 구하기
function add(num1, num2) {
var sum = 0
for(var i = num1; i<=num2; i++){
sum+=i;
}
document.write(sum, "<br>")
return;
}
add(1,100)
다른 방식
function sum() {
var total = 0;
for(var i=1; i<=100; i++) {
total+=i;
}
return total;
}
var result=sum();
document.write("1~100까지의 합 : " + result, "<br>")// 내가 입력한 숫자가 짝수인지 홀수인지 판별하기
function num(num1) {
var num1 = prompt("값을 입력하세요. ");
num1 = parseInt(num1);
if(num1%2 == 0){
document.write("짝수입니다.")
} else {
document.write("홀수입니다.")
}
return;
}
num()// 최대공약수와 최대공배수 구하기
function num(num1, num2) {
var num1 = prompt("첫번째 값 입력");
num1 = parseInt(num1);
var num2 = prompt("두번째 값 입력");
num2 = parseInt(num2);
var min = ((num1 < num2) ? num1 : num2)
var gcd = 0;
for(var i = 1; i<=num1; i++) {
if(num1 % i == 0 && num2 % i == 0){
gcd = i;
}
}
document.write("최대공약수 : " + gcd + "<br>");
document.write("최대공배수 : " + (num1*num2) / gcd);
return;
}
num();
재귀함수
재귀 = 다시 돌아온다
recursive : 재귀적인
recursive function
자기 자신 함수 정의 안에 자기 자신 호출이 있다.
// 종료 조건이 있는 재귀함수
function recursive(n) {
if(n==0){
return // 함수종료
}
console.log('recursive call!' +n) //내부 콘솔 출력
recursive(n-1)
}
recursive(3) // recursive함수 호출
출력결과
팩토리얼 문제
function factorial(n) {
if(n==1){
return 1;
} else {
return n*factorial(n-1)
}
}
var result = factorial(3)
// var result=3*factorial(2)
// var result=3*2*factorial(1)
// var result=3*2*1
document.write(result,"<br>") // 6callback function
1. 다른함수의 인자로써 이용되는 함수
(다른함수의 입력으로 들어가는 함수)
2. 어떤 이벤트에 의해 호출되는 함수
setTimeout 사용
function myFunc() {
alert("myFunc!")
}
// myFunc함수는 setTimeout 함수의 인자로써 이용된다
// myFunc함수는 setTimeout 함수의 입력으로 들어간다
// myFunc함수가 콜백함수다.
setTimeout(myFunc,3000)
// 3000밀리세컨드(3초)뒤에 myFunc함수를 한번 실행하겠다.출력해보면 Alert 뜬다.
setInterval 사용
function myFunc() {
console.log('myFunc!')
}
setInterval(myFunc,2000)
//다른 함수가 인자로써 이용되는 함수가 콜백함수다.
//myFunc가 콜백함수
//2초(2000밀리세컨드)마다 myFunc함수를 실행하겠다.
출력해보면 2초마다 실행한다.
타이머 만들기
var time =55;
var hour =0;
var minute = 0;
var sec = 0;
var timeFormat=""
function tick() {
time++;
if(sec<=60) {
minute=time/60
minute=parseInt(minute)
if(minute<10){
minute="0"+minute;
}
sec=time%60
if(sec<10){
sec="0"+sec;
}
timeFormat=minute+"분 : "+sec+"초";
} else {
timeFormat=time;
}
document.write(timeFormat + "<br>")
}
setInterval(tick,1000)
document객체(변수,함수)
document객체의 내장메서드 getElementById
getElementById : 아이디로 원소를 가져온다.
특정 아이디에 해당하는 HTML요소에 접근하는 메서드(함수)
아이디가 myDiv인 태그에 접근해서 그 안의 글자를 "hello" 바꿈.
DOM
Document객체로 화면을 제어할 수 있게 만들어놨다.
실행해보면
클릭해보면
확인누르면
내용이 변경되었다.
위의 타이머를 html로 불러보았다.
시작,중지,재시작 동작 타이머 만들기
시작을 누르면 1부터 ++시작.
중지를 누르면 중지.
중지를 누른 후 시작 버튼을 눌러도 작동케 할 것.
재시작을 누르면 0부터 재시작. 다시 눌러도 작동케 할 것.
setTimeout이 중복되지 않도록 해야한다
그말인즉슨 1초에 숫자는 1씩 증가하여야 함.
중복되어 숫자가 큼직하게 증가되어서는 안됨.
