javascript 문법 및 예제

25 Jun 2021 • javascript&jsp&Servlet

Boolean() 메서드는 숫자 0과 null, undefined, 빈문자(“ “)를 제외한 모든 데이터에 대해 true를 반환

typeof는 변수에 저장된 자료형을 알고싶을 때 사용

A == B는 표기된 숫자만 일치하면 true. 숫자형10과 문자형10은 true A != B는 표기된 숫자만 다르면 true. 숫자형10과 문자형10은 false A === B는 자료형도 일치해야 true. 숫자형10과 문자형10은 false A !== B는 자료형도 일치하지 않을 때 true. 숫자형10과 문자형10은 true

삼항 조건 연산자 -> 조건식? 자바스크립트 코드1 : 자바스크립트 코드2;

var a = 10, b = 3;
var result = a>b ? "javascript" : "Hello";
//결과는 javascript

location.reload(); 브라우저 새로고침

continue 문은 반복문(for, while)에서만 사용 가능. 반복문 이후의 코드 실행을 건너뛰고 다시 반복문의 증감식 수행한다.

객체는 기능과 속성을 가지고 있다.

내장객체는 자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용.

참조변수(인스턴스 이름) = new 생성함수()

날짜정보를 가져올 때(get) 날짜정보를 수정할 때(set)

일요일은 0

맛보기 예제 1번
var age = prompt("당신의 나이는?", "0"); 
if(age >= 20){
    document.write("<p class='blue'>당신은 성인입니다.</p>");
}else{
    document.write("<p class='red'>당신은 미성년자입니다.</p>");
}

증감 연산자 실습
var a, b, c;
a = prompt("a 값 입력 : ");
b = prompt("b 값 입력 : ");
c = a-- - ++b; //증감 연산자를 활용한 연산

document.write("c= ", c);
document.write("a= ", a);
document.write("b= ", b);

var year = prompt("월을 입력 해주세요", "");
var month = (year%4 == 0 && year%100 !== 0) || year%400 == 0 ? true : false;

if(month == true){
    document.write("<p class='blue'>윤년</p>");
}else{
    document.write("<p class='red'>평년</p>");
}

1~n(prompt)까지의 수에서 3의 배수만 골라서 합산한 결과를 화면에 출력해주세요...
var n = prompt("수를 입력해주세요", "");
var sum = 0;

for(var i=1; i<=n; i++){
    if(i % 3 == 0){
        sum += i;
    }    
}

document.write(sum);

 var height = prompt("신장 입력 : ", "");
 var weight = prompt("체중 입력 : ", "");

 var result = (height - 100)*0.9;

 var overWeight = result - weight;

 if(weight == result){
    document.write("신장 : " + height + "<br />체중 : " + weight + "<br />적정체중은" + result + "이며, 현재 적정체중입니다.");
 }else if(weight > result){
    document.write("신장 : " + height + "<br />체중 : " + weight + "<br />적정체중은" + result + "이며, 현재 적정체중에서" + overWeight + "kg 초과 입니다.");
 }else{
    document.write("신장 : " + height + "<br />체중 : " + weight + "<br />적정체중은" + result + "이며, 현재 적정체중에서" + overWeight + "kg 미만 입니다.");
 }

var time = prompt("시간 입력 : ", "");
var age = prompt("나이 입력 : ", "");

var over_age = (age>=5 && age <=13) || age >= 65;

var day_time = (time >= 9 && time <= 18);
var night_time = (time >= 18 && time <= 22);

var d_adult_price = 20000;
var d_over_price = 10000;
var n_adult_price = 12000;
var n_over_price = 5000;

if(age = over_age){
    if(time = day_time){
        document.write("해당 사람의 요금은 " + d_over_price);
    }else if(time = night_time){
        document.write("해당 사람의 요금은 " + n_over_price);
    }
}else{
    if(time = day_time){
        document.write("해당 사람의 요금은 " + d_adult_price);
    }else if(time = night_time){
        document.write("해당 사람의 요금은 " + n_adult_price);
    }
}

var month = prompt("몇 월? ");
switch(month){
    case "2":
        days = 28;
        break;
    case "4":
    case "6":
    case "9":
    case "11":
        days = 30;
        break;
    default:
        days = 31;
}
document.write(month + "월에는 전체 날수가 " + days);

var url = "http://www.navaer.com"
location.href = url;

/*work0617*/
var price3 = 3000;
var calc = (price1 + price2 + price3) - 10000; 

var total = 10000 < price1 + price2 + price3 ? calc + "원 초과" : "돈관리 잘했어요!";

document.write(total);

var num4 = prompt("4분기 판매량 입력 : ");
var num1 = 1200;
var num2 = 1300;
var num3 = 1000;
var avg_num = num1 + num2 + num3 / 3;

var output;
if( num4 >= num3 ){
    output = "4분기 판매량이 평균 이상입니다.";    
}else{
    output = "4분기 판매량이 평균 미달입니다.";    
}

document.write("1, 2, 3분기 평균 판매량은 " + avg_num + "입니다<br />" + output);

var i = 1;
while(i <= 9){
    document.write("5 X " + i + "= " + i*5 + "<br />");
    i++
}

var num = 1;
var t = "<table border=1>";
for(var i = 1; i <= 5; i++){
    t += "<tr>";

    for(var k = 1; k <=5 ; k++){
        t += "<td>" + num + "</td>";
        num++;
    }

    t += "</tr>";
}

t += "</table>";
document.write(t);

/*javascript*/
var com = Math.floor(Math.random()*100 + 1);
var state = 0;

var i = 0;
while(true){
    if(i >= 5){
        state = 0;
        break;
    }

    var user = prompt("컴퓨터의 숫자를 맞춰주세요");

    if( user > com ){
        alert("값을 down ");
    }else if(user < com){
        alert("값을 up ");
    }else{
        state = 1;
        break;
    }
    
    i++
}

if(state == 1){
    document.write("정답입니다", com);
}else{
    document.write("입력횟수 초과", com);
}

/*C*/
void main() {
    int com = 10;
    int state = 0;
    int user = 0;

    int i = 0;
    while (1) {
        if (i >= 5) {
            state = 0;
            break;
        }

        int user = scanf("%d", &user);

        if (user > com) {
            printf("값을 down ");
        }
        else if (user < com) {
            printf("값을 up ");
        }
        else {
            state = 1;
            break;
        }

        i++;
    }

    if (state == 1) {
        printf("정답입니다");
    }
    else {
        printf("입력횟수 초과");
    }
}

/*JAVA*/
import java.util.Scanner;

public class test {

 public static void main(String[] args) {
        
     Scanner scanner = new Scanner(System.in);
        
     int com = 10;
     int state = 0;

     int i = 0;
     while (true) {
         if (i >= 5) {
             state = 0;
             break;
         }

         int user = scanner.nextInt();

         if (user > com) {
             System.out.println("값을 down ");
         }
         else if (user < com) {
             System.out.println("값을 up ");
         }
         else {
             state = 1;
             break;
         }

         i++;
     }

     if (state == 1) {
         System.out.println("정답입니다");
     }
     else {
         System.out.println("입력횟수 초과");
     }
        
 }

}

/*tv 객체 생성하여 정보 출력하기 1*/
var tv = new Object(); //클래스 선언 및 생성
tv.color = "white"; //속성 선언
tv.price = 300000; //속성 선언
tv.info =  function(){ //메소드 생성
    document.write("tv 색상 : " + this.color);
    document.write("tv 가격 : " + this.price);
}
tv.info();

/*tv 객체 생성하여 정보 출력하기 2. json?*/
var tv = {
    color : "white", //속성 선언
    price : 300000, //속성 선언
    info : function(){ //메소드 생성
        document.write("tv 색상 : " + this.color);
        document.write("tv 가격 : " + this.price);
    }
}
tv.info();

/*내장 객체*/
var max = Math.max(20, 5, 7, 68, 10);
document.write(max + "<br />");
var rd = Math.round(3.14);
document.write(rd + "<br />");
var pr = Math.pow(2, 3);
document.write(pr + "<br />");

/*date 객체*/
var d1 = new Date(); //생성자 오버로딩
var d2 = new Date("2021/06/18"); //생성자 오버로딩
var d3 = new Date(2021,5,18); //생성자 오버로딩

/*93페이지 예제*/
var today = new Date();
var nowMonth = today.getMonth(), nowDate = today.getDate(), nowDay = today.getDay();

document.write("<h1>오늘 날짜 정보 </h1>");
document.write("현재 월 : " + nowMonth + "<br />");
document.write("현재 일 : " + nowDate + "<br />");
document.write("현재 요일 : " + nowDay + "<br />");

var worldcup = new Date(2002,4,31);
var worldMonth = worldcup.getMonth(), worldDate = worldcup.getDate(), worldDay = worldcup.getDay();

document.write("<h1>월드컵 날짜 정보 </h1>");
document.write("월드컵 몇 월 : " + worldMonth + "<br />");
document.write("월드컵 몇 일 : " + worldDate + "<br />");
document.write("월드컵 무슨 요일 : " + worldDay + "<br />");

/*97페이지 예제*/
document.write("<h1>컴퓨터 가위바위보 게임</h1>");

var user = prompt("가위, 바위, 보 입력 : ");
var com = Math.floor((Math.random()*3) + 1);

var user_num;
switch(user){
    case "가위" : 
        user_num = 1;
        break;
    case "바위" :
        user_num = 2;
        break;
    case "보" : 
        user_num = 3;
        break;
    default : 
        alert("잘못 입력했습니다.");
        location.reload();
}

document.write("<img src=\"images/math_img_" + com + ".jpg\">");

if(user_num == com){
    document.write("<img src=\"images/game_1.jpg\">" + "<br /><br /><br /><br /><br /><br />");
}else{
    document.write("<img src=\"images/game_2.jpg\">" + "<br /><br /><br /><br /><br /><br />");
}

//가위바위보 게임
var diff = user_num - com;
if(diff == 0){
    document.write("<h1>비김</h1>");
}else if(diff == -2 || diff == 1){
    document.write("<h1>사용자 승리</h1>");
}else if(diff == 2 || diff == -1){
    document.write("<h1>컴퓨터 승리</h1>");
}

document.write("<h2>com = " + com, " user_num = " + user_num + "</h2>");

/*배열객체*/
var arr = new Array();
var arr1 = new Array(1,2,3,4,5,6,7);
var arr2 = [1,2,3,4,5,6,7];
var arr3 = [1,"따르릉",3.14]; //가능

//document.write(arr1[0]);

// for(var i = 0; i<arr2.length; i++){
//     document.write(arr2[i]);
// }

for(var j in arr2){
    document.write(arr2[j]);
}

/*로또 숫자 생성*/
var lotto = new Array();

for(var i = 0; i < 6; i++ ){        
    lotto[i] = Math.floor((Math.random()*45) + 1);

    for(var t = 0; t < i; t++){
        if(lotto[i] == lotto[t]){
            i--;
        }
    }
}

for(i = 0; i < 6; i++ ){   
    document.write("<span class='ball" + i + "'>" + lotto[i] + "</span>");
}

$(document).ready(function(){
    $("[class^='ball']").css('top', '0');
});

/*로또 숫자 생성 숫자까지 오름차순 정렬*/
var lotto = new Array();

for(var i = 0; i < 6; i++ ){        
    lotto[i] = Math.floor((Math.random()*45) + 1);

    for(var t = 0; t < i; t++){
        if(lotto[i] == lotto[t]){
            i--;
        }
    }
}

for(var i = 0; i <5; i++) {
    var min = i;
    for(var j = i+1; j < 6; j++) {
        if(lotto[min] > lotto[j]) {
            min = j;
        }
    }

    var temp = lotto[min];
    lotto[min] = lotto[i];
    lotto[i] = temp;
}

for(var i = 0; i < 6; i++ ){   
    document.write("<span class='ball" + i + "'>" + lotto[i] + "</span>");
}

$(document).ready(function(){
    $("[class^='ball']").css('top', '0');
});

/* 이분법인데 배열?순차정렬?한것과 같이 선언해줘야 돌아감 */
var array = new Array(180, 165, 175, 170, 160, 171, 150, 162);
var key = 172;
var low = 0;
var high = array.length - 1;
var state = 0; //성공(1)과 실패(0)의 상태값

while(low <= high){
    var middle = Math.floor((low+high)/2); //중간값 인덱스

    if(key == array[middle]){
        state = 1;
        break;
    }else if(key > array[middle]){
        low = middle + 1;
    }else if(key < array[middle]){
        high = middle - 1;
    }
}

if(state == 1){
    document.write("성공");
}else{
    document.write("탐색 실패");
}

for(var i = 0; i < 6; i++ ){   
    document.write(array[i] + ", ");
}

/* 이분법인데 배열?순차정렬?한것과 같이 선언해줘야 돌아감 */
var lotto = new Array();

for(var i = 0; i < 6; i++ ){        
    lotto[i] = Math.floor((Math.random()*45) + 1);

    for(var t = 0; t < i; t++){
        if(lotto[i] == lotto[t]){
            i--;
        }
    }
}

var key = 172;
var low = 0;
var high = lotto.length - 1;
var state = 0; //성공(1)과 실패(0)의 상태값

while(low <= high){
    var middle = Math.floor((low+high)/2); //중간값 인덱스

    if(key == lotto[middle]){
        state = 1;
        break;
    }else if(key > lotto[middle]){
        low = middle + 1;
    }else if(key < lotto[middle]){
        high = middle - 1;
    }
}

if(state == 1){
    document.write("성공");
}else{
    document.write("탐색 실패");
}

for(i = 0; i < 6; i++ ){   
    document.write("<span class='ball" + i + "'>" + lotto[i] + "</span>");
}

$(document).ready(function(){
    $("[class^='ball']").css('top', '0');
});

var arr_1 = ["사당", "교대", "방배", "강남"];
var arr_2 = ["신사", "압구정", "옥수"];

var result = arr_1.join("-");
console.log(result);

var result = arr_1.concat(arr_2);
console.log(result);

var result = arr_1.slice(1, 3);
console.log(result);

arr_1.sort();
console.log(arr_1);

arr_2.reverse();
console.log(arr_2);

/*p.103*/
var greenArr = ["교대", "방배", "강남"];
var yellowArr = ["미금", "정자", "수서"];

greenArr.splice(2, 1, "서초", "역삼");
console.log(greenArr);

var data1 = yellowArr.pop();
var data2 = yellowArr.shift();

yellowArr.push(data2);
console.log(yellowArr);

yellowArr.unshift(data1);
console.log(yellowArr);

var num = prompt("입력 예시 043-276-9999 >> ");

var first = num.substring(0, 3);
var second = num.substring(4, 7);
var last = num.substring(8, 12);

document.write("첫번째 " + first);
document.write("두번째 " + second);
document.write("세번째 " + last);
//----------------------------------------------------
var num = prompt("입력 예시 043-276-9999 >> ");
var result = num.split("-");

for(var i in result){
    document.write(result[i]);
}

var mail = prompt("이메일 입력 >> ");
var arrUrl = [".co.kr", ".com", ".net", ".or.kr", ".go.kr"];

var check1 = false; 
var check2 = false;

if(mail.indexOf("@") > 0){
    check1 = true;
}

for(var i in arrUrl){
    if(mail.indexOf(arrUrl[i]) > 0){
        check2 = true;
    }
}

if(check1 && check2){
    document.write(mail);
}else{
    document.write("이메일 형식이 잘못되었습니다.");
}

/*p120*/
var addNum = 0;
var subNum = 1000;

var auto_1 = setInterval(function(){
    addNum++;
    console.log("addNum : " + addNum);
}, 3000);

var auto_2 = setInterval(function(){
    subNum--;
    console.log("subNum : " + subNum);
}, 3000);

/*0625 chapter05 p.113*/
var count = 0;

//일반함수는 위에나 아래 선언 둘다 가능
myFnc();  //일반함수 호이스팅

function myFnc(){
    count++;
    document.write("hello" + count, "<br />");
}

myFnc();

//익명함수는 먼저 호출하면 안됨
var theFnc = function(){
    count++;
    document.write("bye" + count, "<br />");
}

theFnc();


/*p.134*/
var color = ["white","#f3ffc1","#dfffc1","#c1cbff"];

var i = 0;
function changeColor(){
    i++;
    if(i >= color.length){  //i값이 4개나 넘어가면 다시 0으로 가라
        i = 0;
    }

    var bodyTag = document.getElementById("theBody");
    bodyTag.style.backgroundColor = color[i];
}

//html--------------------------------------------------
<button onclick="changeColor();">배경색 바꾸기</button>

/*p.136*/
function myFnc(name, area){
    document.write("안녕하세요." + name + "입니다. <br />");
    document.write("사는 곳은" + area + "입니다. <br />  <br />");
}

myFnc("홍당무", "서울");

myFnc("깍두기", "부산");

var rightId = "korea";
var rightPw = "1234";

function login(id, pw){
    if(id == rightId){
        if(pw == rightPw){
            confirm(id + "님 방문을 환영합니다.");
        }else{
            alert("잘못된 비밀번호입니다.");
        }
    }else{
        alert("존재하지 않는 아이디입니다.");
    }
}

var userId = prompt("아이디를 입력하세요 >> ");
var userPw = prompt("비밀번호를 입력하세요 >> ");

login(userId, userPw);

/*p.138 매개변수 없는 함수*/
function sum(){
    var sum = 0;
    for(var i = 0; i <arguments.length; i++){
        sum += arguments[i];
    }
    document.write(sum);
}

//---------------------------------------------
<button onclick="sum(10, 20, 30, 40);">매개변수 없는 함수 테스트</button>

/* p.140 return이 있는 함수 : 평균 계산 함수 */
function testAvg(arrData){
    var sum = 0;
    for(var i = 0; i < arrData.length; i++){
        sum += Number(prompt(arrData[i] + "점수는?", "0"));
    }
    var avg = sum / arrData.length;
    return avg;
}

var arrSubject = ["국어", "수학"];
var result = testAvg(arrSubject);

document.write("평균 점수는" + result + "입니다.");

/* p.141 갤러리 함수 */
var num = 1;
function gallery(direct){
    if(direct){
        if(num == 9) return;
        num++;
    }else{
        if(num == 1) return;
        num--;
    }
}

var imgTag = document.getElementById("photo");
imgTag.setAttribute("src", "images/pic_" + num + ".jpg");

//-------------------------------
<div id="galleryZone">
    <p><img src="images/pic_1.jpg" id="photo" alt="" /></p>
    <p>
        <button onclick="gallery(0)">이전</button>
        <button onclick="gallery(1)">다음</button>
    </p>
</div>

/* p.147 함수명이 같은 함수들의 호출 방법 */
var num = 100;
function menu(){
    num += 100;
    alert(num);
}
menu(); //위, 아래 중 어떤 menu를 호출 할 것인가? 아래거호출함.
function menu(){
    alert(num);
}

/* p.148 즉시 실행 함수 */
(function(){
    var num=100;
    function menu(){                
        num += 100;
        alert(num);
    }
    menu();
}());

/* p.149 객체 생성자 함수 */
function CheckWeight(name, height, weight){
    this.userName = name;
    this.userHeight = height;
    this.userWeight = weight;
    this.minWeight;
    this.maxWeight;

    this.getInfo = function(){
        var str=""
        str += "이름 : " + this.userName + ", ";
        str += "키 : " + this.userHeight + ", ";
        str += "몸무게 : " + this.userWeight + "<br /> ";
        return str;
    }

    this.getResult = function(){
        this.minWeight = (this.userHeight - 100)* 0.9 - 5;
        this.maxWeight = (this.userHeight - 100)* 0.9 + 5;

        if(this.userWeight >= this.minWeight && this.userWeight <= this.maxWeight){ 
            return "정상 몸무게입니다";
        }else if(this.userWeight < this.minWeight){
            return "정상 몸무게보다 미달입니다.";
        }else{
            return "정상 몸무게보다 초과입니다.";
        }
    }
}

var jang = new CheckWeight("장보리", 168, 62);
var park = new CheckWeight("박달재", 180, 88);

console.log(jang);
console.log(park);

document.write(jang.getInfo());
document.write(jang.getResult());
 javascript  js

Comments

Related Posts