PROGRAMING: 01day Javascript

JavaScript

java (x)
browser 안에서 해석 되는 간단한 프로그램 언어
만든 사람: Netscape 오질라 프로젝트에서 Sun
표준화 W3C 에서 권고안을 만듬

EI=JSscript
유럽=ECNAscript
구글: v8 해석엔진 자바를 가져다가 C++로 고침 >>성능 향상, ECNAscript를 표준화로 만듬

프로그램

컴퓨터에게 모든 것을 가르쳐줘야함

자료

자료형(컴퓨터가 이해할 수 있는 자료 형태)
자료형을 연구하는 학문 ==> 자료구조

프로그램 언어별로 다름

숫자:number - 사칙연산할 수 있는 값
문자:string - "" or '' 으로 구분한 값
ex) 1= 숫자 , "1" = 문자

불:Boolean - TRUE or FALSE (진리값)
변수: variable - 저장소
이름(식별자 규칙에 따라 이름 정함)

식별자

문법적 규칙 - 잘못하면 에러발생

키워드 - 내부적인 이름(사용x)
특수기호나 숫자로 시작할 수 없음
대소문자 구분

팀간 규칙 - 잘못하면 짤림

내용을 알 수 있는 이름을 짓는다
ex) a/b(x) -> name/id(o)
소문자로 시작하는 것을 권장

변수선언:

var 변수명;
변수에 처음 값을 입력(초기화):
변수명 = 값;

연산자

산술
문자열 연결
비교/논리/일치
증감
삼항

흐름(제어)

위 -> 아래
단방향
조건(분기)

두 갈래 방향 처리(true/false)
둘 중 한 방향으로 밖에 진행할 수 없음(교차불가)
조건 : 비교연산자 / 논리연산자로 만듦

if
if else
if ~ else if ~ else
switch ~case ~ default
삼항연산자 ( )? : ;

(조건에 의한)반복

for(초기식 ; 조건식; 증감식) {내용}

기타

pdf

portable document format
adobe사에서 만듬
adobe acrobat reader로 읽음

001

<!--자바스크립트 넣는 위치는 head, body-->
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript">
    // 주석1 : 한 줄 주석
    /* 주석2 : 여러 줄 주석      */
    // head 위치는 선언적인 내용
    </script>
</head>
<body>
    <script type="text/javascript">
    // body 위치는 실행적인 내용
    </script>
</body>
</html>

002

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        // 출력 - 프로그램으로 내용을 출력하는 것
        // HTML출력은 document.write로 한다
        // 출력 확인 - 개발자도구 > DOM 탐색기
        // 에러 확인 - 개발자도구 > console
        document.write("Hello Javascript<br/>");
        document.write("<b>Hello Javascript</b><br />");
        document.write("<table width='150' border='1'>");
        document.write("<tr>");
        document.write("<td>1열</td>");
        document.write("</tr>");
        document.write("</table>");
        //자바 스크릡트 코드는 브라우저 상에서 가상의 HTML코드로 변환되어 화면에 출력된다
    </script>
</body>
</html>

003

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        // 콘솔 출력 - console.log
        // 브라우저 화면에는 보이지 않고 개발도구 콘솔에서 보임
        console.log("Hello Javascript");
        // 경고창 출력 - alert
        alert("Hello Javascript");
    </script>
</body>
</html>

004

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        var num1;   //변수의 선언
        num1 = 10;  //변수의 초기화 (변수 값을 지정)
                    /* =은 같다는 뜻이 아니라 오른쪽의 값을 왼쪽에 할당
                       "20 = num2" 는 불가능한 형식 */
        
        var num2 = 20; //변수의 선언과 초기화 동시에
        
        //변수 내용 출력
        console.log(num1);
        console.log(num2);
        document.write(num1);
        alert(num1);
    </script>
</body>
</html>

005

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //가변형 데어터 타입: 변수에는 어떤 값이든 넣을 수 있음
        var data1= 1; //변수의 자료형태는 숫자
        var data2= "1"; //변수의 자료형태는 문자
        
        //typeof 자료형을 구분하는 연산자
        console.log(typeof(data1));
        console.log(typeof(data2));
    </script>
</body>
</html>

006

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        // 자바스크립트에서 자료형은 총 6가지가 있음 (undefined 자료형 포함)
        var stringVar = 'String';
        var numberVar = 273;
        var booleanVar = true;
        var functionVar = function (){};
        var objectVar = {}
        
        console.log(typeof(stringVar));
        console.log(typeof(numberVar));
        console.log(typeof(booleanVar));
        console.log(typeof(functionVar));
        console.log(typeof(objectVar));
        console.log(typeof(undefinedVar));
    </script>
</body>
</html>

007

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        var radius, pi, e=10; // 변수 여러개 동시에 선언 가능함
                              // 선언과 초기화를 동시해 해도 좋지만 가독성이 떨어짐
        radius = 10;
        pi = 3.14159265;
        
        console.log(radius);
        console.log(pi);
        console.log(e);
    </script>
</body>
</html>

008

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        var cup = "coffee";
        cup = 'Green Tea';
        cup = 'Water'; //변수는 누적 구조가 아니라 override 구조다
        
        console.log(cup) 
        
    </script>
</body>
</html>

009

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        var food ="김치찌게";
        var food ="라면";
        var food ="냉면";
        // 중복 선언 - 다른 프로그램 언어에서는 에러
        // 자바스크립트에서 허용됨 - 최종선언을 우선시 함
        console.log(food);
        var alert = "red alert"; //중복선언을 할때 원래 가지고 있는 함수가 바뀌는 것을 조심
        alert(food);
    </script>
</body>
</html>

010

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript" src="default.js"> //default.js 에 있는 자바스크립트를 읽음
    
    </script>
</body>
</html>

011

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //연산자 : 변수와 변수 or 변수와 값을 계산
        //산술 연산자 : + - * /
        var num1 = 10;
        var num2 = 2;
        console.log(num1+num2);
        console.log(num1-num2);
        console.log(num1*num2);
        console.log(num1/num2);
        //연산자 우선순위 : ()괄호 먼저
        //나머지 연산자 : % -그룹화가 가능함 (ex 짝수 홀수)
        console.log(num1%num2);
        // + : 문자열 연결 연산자
        console.log("Hello"+"Javascript");
        console.log(num1+num2+"Hello"); 
        console.log("Hello"+num1+num2); //문자열 덧셈이 먼저 나오면 숫자 덧셈도 문자 덧셈으로 인식
        console.log("Hello"+(num1+num2)); //괄호를 쓰면 숫자덧셈으로 계산
    </script>
</body>
</html>

012

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //비교연산자
        // == 같다 , = 대입 헷갈리지 말 것
        // 연산의 결과는 불(true, false)
        
        console.log(52 > 273);
        console.log(52 < 273);
        
        // 논리 연산자 : 비교연산자를 중복 처리하고 싶을 때 씀, 범위를 지정할 때 사용
        // ! 부정 
        // && 논리곱 : 좌변과 우변이 모두 참일 때만 참
        // || 논리합 : 좌변과 우변이 모두 거짓일 떄만 거짓
        // "10 < x < 30" 을 컴퓨터가 이해하도록 하려면 ---> "10<x && x<30"
    </script>
</body>
</html>

013

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        // 대입(할당) 연산자 : =
        // 복합 대입 연산자 : 산술연산자 + 대입 연산자
        var num1=10;
        num1 +=10; //num1 = num1 + 10;
        
        var html = "";  // HTML코드를 누적해서 저장하고 싶을 때 씀
        html += '<ul>';
        html += '<li>사과</li>';
        html += '<li>수박</li>';
        html += '<li>딸기</li>';
        html += '</ul>';
        
        document.write(html);
        
    </script>
</body>
</html>

014

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //증감연산자(단항 연산자)
        // ++,--
        var num1 = 1;
        num1 = num1 + 1;
        num1 += 1;
        num1++; //하나씩 증감하는 경우가 많기 떄문에 생긴 연산자
        ++num1; //증감연산자 위치 앞, 뒤로 올수 있으나 할당 시 차이 있음
        
        var num1 = 1;
        var num2 = 1;   
        var num3 = num1++;
        var num4 = ++num2;
        console.log(num1);
        console.log(num2);
        console.log(num3); //증가 전에 할당이 됨
        console.log(num4); //증가 후에 할당이 됨
        
    </script>
</body>
</html>

015

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //일치 연산자
        console.log(Boolean('')); //Boolean 형변환 함수: 불값으로 변환한다
        console.log(Boolean(0));
        console.log(Boolean('273'));
        
        console.log(''== false); //==는 값을 비교
        console.log(''== 0);
        console.log(0 == false);
        console.log('273'== 274);
        
        console.log(''=== false); //===는 값과 자료형태 까지 비교
        console.log(''=== 0);
        console.log(0 === false);
        console.log('273'=== 274);
    </script>
</body>
</html>

016

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //단순 if 문
        // num > 10 크다 출력, num <= 10 출력하지 않음
        console.log("시작");
        var num = 2;
        if(num > 10){
            console.log("크다")
        }
        console.log("끝");
        
        // ifelse 문
        // num > 10 크다 출력, num <= 10 작다 출력
        console.log("시작");
        var num = 2;
        if(num > 10){
            console.log("크다")
        }else{
            console.log("작다")
        }
        console.log("끝");
        // num : 홀수와 짝수를 구분해서 출력
        console.log("시작");
        var num = 2;
        if(num%2==0){
            console.log("짝수");
        }else{
            console.log("홀수");
        }
        console.log("끝");
    </script>
</body>
</html>

017

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //if문 안에 if문이 중복으로 들어가는 경우
        var hour = 12;
        if(hour <11){
            console.log("아침먹을 시간");
        }else{
            if(hour <15){
                console.log("점심먹을 시간");
            }else{
                console.log("저녁먹을 시간");
            }
        }
        //선택적 if --exam 학점 계산
        var hakjum =78;
        if(hakjum >= 90){
            console.log("A");
        }else{
            if(hakjum >= 80){console.log("B");
            }else{
                 if(hakjum >= 70){console.log("C");
                }else{
                      if(hakjum >= 60){console.log("D");
                    }else{
                         console.log("F");
                    }
                }
            }
        }
    </script>
</body>
</html>

018

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //if ~ else if ~ else문
        var hakjum =78;
        if(hakjum >= 90){
            console.log("A");
        }else if(hakjum >= 80){console.log("B");
        }else if(hakjum >= 70){console.log("C");
        }else if(hakjum >= 60){console.log("D");
        }else{
            console.log("F");
        }
    </script>
</body>
</html>

019

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        /* 선택적 구문
        
            switch(값){
                case 값:
                    실행문;
                case 값:
                    실행문;
                default:
                    실행문;
                }
        */
        var num = 10;
        switch(num){
            case 10:
                console.log('10');
                break;  //switch 문은 case가 트루일때 밑에것을 모두다 출력시키므로 break해야 함
            case 20:
                console.log('20');
                break;
            case 30:
                console.log('30');
                break;
            default:
                console.log('기타');
        }
    </script>
</body>
</html>

020

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //삼항 연산자 :한줄로 간단히 조건문 실행 -- (조건)?참실행문:거짓실행문
        var num = 2;
        (num%2==0) ? console.log("짝수") : console.log("홀수");
        
        var result = (num%2==0) ? "짝수" : "홀수"; //변수에 할당하고 출력을 해도된다
        console.log("결과: "+result);
    </script>
</body>
</html>

021

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //반복문
        //for (초기값 ; 조건식; 종결식){}
        console.log('시작');
        
        // console.log('Hellow Javascript');
        // console.log('Hellow Javascript');
        // console.log('Hellow Javascript');
        // console.log('Hellow Javascript');
        // console.log('Hellow Javascript');

        for(var i=1 ; i<=5 ; i++){
            console.log('Hellow Javascript');
        }
        
        console.log('끝');
    </script>
</body>
</html>

022

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //반복문 실행 속도 10회
        for(var i=1 ; i<=10 ; i++){   //i는 식안에서 사용할 수 있음
            if(i%2==0){
            console.log(i);
            } 
        }
        //반목문 실행 속도 5회
        for(var i=2 ; i<=10 ; i=i+2){
            console.log(i);
        }
    </script>
</body>
</html>

023

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        // 1~10까지 합
        var sum=0;
        for (var i=1;i<=10;i++){
            sum = sum + i;
        }
        console.log("결과: "+sum);
        /*
        1회전 0 + 1;
        2회전 1 + 2;
        3회전 3 + 3;
        ...
        */
    </script>
</body>
</html>

024

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        // 1~100까지 3의 배수 합
        var sum = 0;
        for(var i=1; i<=100; i++){
            if(i%3==0){
            sum = sum +i;
            }
        }
        console.log("결과: "+sum);
        
        var sum = 0;
        for(var i=3; i<=100; i=i+3){
            sum = sum +i;
        }
        console.log("결과: "+sum);
    </script>
</body>
</html>

025

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
    //이중루프
        for(var i=1; i<=10; i++){       //회전수 10
            for(var j=1; j<=10; j++){   //회전수 100
                document.write(i+"-"+j+"<br/>")
            }
        }
    </script>
</body>
</html>

026

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
    //별표 1~10개 누적 찍기
        for(var i=1; i<=10; i++){
            for(var j=1; j<=i; j++){
            document.write("*")
            }
            document.write("<br/>")
        }
    //별표 10~1개 누적 찍기
        for(var i=1; i<=10; i++){
            for(var j=1; j<=(11-i); j++){
             document.write("*")
             }
             document.write("<br/>")
        }
   
    </script>
</body>
</html>

027

<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
    //구구단
        document.write("<table border='1' cellspacing='0' cellpadding='5'>");
        for(var i=0; i<=9; i++){
            document.write("<tr>")
            for(var j=0; j<=9; j++){
                switch(i){
                    case 0:
                        switch(j){
                            case 0:
                                document.write("<td  align='center'>"+"</td>");
                                break;
                            default:
                                document.write("<td  align='center'>"+"x"+j+"</td>");
                        }
                    break;
                    default:
                        switch(j){
                            case 0:
                                document.write("<td  align='center'>"+i+"단"+"</td>");
                                break;
                            default:
                                document.write("<td  align='center'>"+i+"x"+j+"="+(i*j)+"</td>");
                        }
                }
            }
            document.write("<tr/>");
        }
        document.write("</table>");
   
    </script>
</body>
</html>

028

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    td { text-align: center; width: 150px; border: 1px dotted #ff00ff; }
    .odd { background-color: #335C85; }
    .even { background-color: #99ADC2; }
</style>
</head>
<body>

<script type="text/javascript">
    document.write("<table>");
    for(var i=0 ; i<=9 ; i++) {
        document.write("<tr>");
        for(var j=0 ; j<=9 ; j++) {
            if(i==0 && j==0) {
                document.write("<td></td>");    
            } else if(i == 0) {
                document.write("<td>X" + j + "</td>");
            } else if(j == 0) {
                document.write("<td>" + i + "단</td>");
            } else {
                if(i%2 ==0) {
                    document.write("<td class='even'>" + i + " X " + j + " = " + (i*j) + "</td>");
                } else {
                    document.write("<td class='odd'>" + i + " X " + j + " = " + (i*j) + "</td>");
                }
            }
        }
        document.write("</tr>");
    }
    document.write("</table>");
</script>

</body>
</html>

PROGRAMING

2016년 6월 2일 목요일

01day Javascript

댓글 없음:

댓글 쓰기

블로그 보관함