- 구구단 가로로 출력하기
for(var i=0;i<=9;i++) {
for(var dan=2;dan<=9;dan++){
if(i==0){
document.write("[ "+dan+"단 ] ");
}else{
document.write(dan+"*"+i+" = "+(dan*i)+" ");
}
}
document.write("<br>");
}
→ 모양은 이상하지만 가로로 일단 출력
- 연습1) 반복문 사용해서 테이블 구현하기
var tag = "<table border='1'>";
for(var r=1;r<=2;r++){
tag+= "<tr>";
for(var d=1;d<=3;d++){
tag += "<td>("+r+","+d+")</td>";
}
tag+="</tr>";
}
tag += "</table>";
document.write(tag);
- 연습2) 반복문으로 별그리기
for(var i=1;i<=5;i++){
for(var j=1;j<=i;j++){
document.write("*");
if(i==j){
document.write("<br>");
}
}
}
////////////////////////////////////////////////////////////////
for(var row=1;row<=5;row++){
for(var col=1;col<row;col++){
document.write("*");
}
document.write(" * <br>");
}
< 함수 >
① 함수의 선언
- function 함수명 ( ) {
실행문1;
실행문2;
실행문3;
}
- 예 ) document.write(), alert(), prompt(),
- 익명함수의 선언
· 참조변수 = function( ) {
실행문1;
실행문2;
}
② 함수의 사용
- 함수명 ( ) ;
- 익명함수의 사용
· 참조변수 ( ) ;
function Hello(){
for(var i=1;i<=5;i++){
document.write("안녕하세요! <br>");
}
}
Hello();
var BYE = function(){
document.write("GOODBYE <br>");
document.write("GOODBYE <br>");
}
BYE();
③ 매개변수
- 함수의 특정 정보를 전달하는 변수
- function 함수명( 매개변수1, 매개변수2, ... , 매개변수n ) {
}
함수명 (데이터1, 데이터2, .... , 데이터n) ;
function ShowNyInfo(name, age, tel){
document.write("이름은 "+name+"입니다. <br>");
document.write("나이는 "+age+"입니다. <br>");
document.write("번호는 "+tel+"입니다. <br>");
}
ShowNyInfo("홍길동", "22", "010-123-4567");
④ return
- 함수의 선언
· function 함수명() {
실행코드;
return 데이터;
}
- 함수의 사용
· 변수 = 함수명();
function myFunction(num1, num2){
var sum = num1 + num2;
return sum;
}
var result = myFunction(1000,500);
document.write("숫자의 합 : "+result);
document.write("숫자의 합 : "+myFunction(500,500));
- 연습1 )로그인 처리 로직
function ItwillLoginCheck(id, pw){
var userID="admin";
var userPW="1234";
if(id==userID){
if(pw==userPW){
alert(id+"로그인 성공 !");
}else {
alert("비밀번호 오류 !");
}
}else{
alert("비회원 입니다!");
}
}
ItwillLoginCheck("admin","1234");
- 연습2) 절대값 만들기
function myABS(num){
if(num<0){
return num*(-1);
}else{
return num;
}
}
document.write(myABS(-2)+"<br>");
var tmp = myABS(200);
document.write(tmp+"<br>");
/////////////////////////////////////////////
if(num<0) {
num = num * -1;
}
return num;
/////////////////////////////////////////////
return (num<0)? -num : num;
- 함수안에 있는 return문
· 함수는 안에 들어있는 모든 코드를 실행하면 끝
· 함수안에 return문이 있는 경우 실행 후 끝 (리턴문 이후의 코드 실행 X)
- 함수( ){
return 데이터; → 값을 리턴
}
- 함수( ){
return; → 함수의 종료
}
< 내장함수 >
- 자바스크립트 엔진에 포함되어있는 함수
- 함수의 선언(정의)없이 함수의 호출만으로 사용가능
① 재귀함수
- 자기 자신의 함수 호출
var num=0;
function testFnc(){
num++;
document.write(num+"<br>");
if(num == 10){
return; // 종료
}
testFnc();
} //함수 끝
testFnc(); // 함수 호출
< 전역변수 & 지역변수 >
- 전역변수 : 프로그램 전 영역에서 사용가능 / 코드 생성시 변수 생성
· var 변수 ;
function 함수 ( ) {
변수=값;
}
- 지역변수 : 특정지역에서만 사용가능 / 함수 생성시 변수 생성
· function 함수 ( ) {
var 변수=값;
}
var num=500;
function myFnc(){
var num=300;
document.write(num); // 결과 : 300 (지역변수)
}
myFnc();
document.write(num); // 결과 : 500 (전역변수)
< 객체 >
- 눈 앞에 보이는 대상들
- 코드로 표현할 수 있도록 기능과 속성을 정의 → 객체 모델링/추상화
- 자바스크립트에서 사용되는 객체
· 내장 객체 : 필요에 따라서 생성해서 사용가능 ( String, Date, Math, Array )
· 브라우저 객체 모델 (BOM) : 브라우저를 객체로 표현해서 사용가능한 객체 ( Window, screen, location, navigator, ...)
· 문서 객체 모델 (DOM) : HTML문서를 표현한 객체
① Object
- 객체 생성
· var 객체명 = new Object( );
· new 연산자 : 객체를 생성하는 연산자, 객체를 메모리에 올린다.(인스턴스화)
- TV 전원 껐다 켰다 하기
var SamSungTV = new Object();
SamSungTV.power = false;
function pushPower(){
if(SamSungTV.power){ // 켜짐
SamSungTV.power = !SamSungTV.power;
}else{ // 꺼짐
SamSungTV.power = !SamSungTV.power;
}
}
document.write("전원: "+((SamSungTV.power)? "켜짐":"꺼짐<br>"));
pushPower();
document.write("전원: "+((SamSungTV.power)? "켜짐":"꺼짐<br>"));
② Date
- 내장객체 - 날짜 정보객체 (Date)
- 날짜 정보 저장객체 생성 - 시스템의 시간정보를 가져와서 사용
var t1 = new Date(); // 현재 시간정보
document.write(t1);
var t2 = new Date(2021,10,28); // 연, 월-1, 일 // 0월 ~ 11월
document.write(t2);
var t3 = new Date(2021,9,28,17,09,00); // 연, 월-1, 일, 시, 분, 초
document.write(t3);
var t4=new Date("2021/10/28"); // 연 월 일
document.write(t4);
∴ 0월→ 1월이고 11월 → 12월
document.write(t1.getFullYear()+"년");
document.write((t1.getMonth+1)+"월");
document.write(t1.getDate()+"일");· .getDay() : 요일 정보 가져옴 // 0(일요일) , 1(월요일), 2(화요일), ..., 6(토요일)
