본문 바로가기
Frontend/JavaScript

2월 8일 JavaScript (01~08)

by howdyoon 2023. 2. 8.

01_자바스크립트 기본문법
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>01_자바스크립트 기본문법.html</title>
        <style>
            /* CSS 영역 */
        </style>
    </head>
    
    <body>
    
        <!-- HTML 본문 영역 -->

        <!-- 참조 https://www.w3schools.com/js/default.asp -->
    

        <script>
            //자바 스크립트 코드 작성 영역 
            // 한줄 주석
            /* 여러줄 주석 */
            
        </script>

    </body>
</html>
02_data
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>02_data.html</title>
        <style></style>
    </head>
    
    <body>
    
        <h1>데이커, 값, Data, Value</h1>

        <script>
            //● 객체(Object) : 속성(property)과 함수(method)로 구성되어 있다
            // - 객체의 속성과 메소드는 . 로 접근한다
            // - 객체.속성
            // - 객체.메소드()

            //document객체 : HTML 문서를 가리키는 객체
            //document.write() : 본문(<body>)에 출력


        //1. 숫자형
        document.write(123);  //정수
        document.write(-123);
        document.write(1.2);  //실수
        document.write(-3.4);

        //2. 문자형
        //-> 반드시 ' 또는 " 기호로 감싼다
        document.write('KOREA');
        document.write("SEOUL");
        document.write("대한민국");
        document.write('서울특별시');

        //->에러
        //-> 크롬브라우저에서 F12를 이용해서 에러메세지 분석후 수정
        //document.write('JEJU");
        //document.write(대한민국);

        //3. 논리형 (boolean)
        //-> 맞다(참 true), 틀리다(거짓 false)
        document.write(true);
        document.write(false);

        document.write('true');  //문자형
        document.write("false"); //문자형
        document.write("1004");  //문자형

        </script>

    </body>
</html>
03_출력
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>03_출력.html</title>
        <style></style>
    </head>
    
    <body>
    
        <script>
            //자바스크립트에서 HTML태그를 사용하려면, 문자형으로 사용한다
            document.write("대한민국");
            document.write("<br>");
            document.write("오필승코리아");
            document.write("<hr>");

            //명령어로 사용되는 기호를 단순 기호로 인식하려면 \와 같이 사용한다
            document.write("\"");
            document.write("<hr>");
            document.write('\'');
            document.write("<hr>");
            document.write("\\");
            document.write("<hr>");

            document.write("'");
            document.write("<hr>");
            document.write('"');




        </script>

    </body>
</html>
04_변수
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>04_변수.html</title>
        <style></style>
    </head>
    
    <body>
    
        <h3>상수와 변수</h3>

        <script>
        //참조 https://www.w3schools.com/js/js_variables.asp  
        
        //1. 상수 constant
        //-> 고정 불변의 값
        document.write(3);
        document.write(-5);
        document.write(3.4);
        document.write('A');
        document.write("가");
        document.write(true);
        document.write("<hr>");

        //2. 변수 variable
        //->변수의 성격: var, let, const, nothing

        //  1) var
        var a=3; // a라는 변수를 선언하고 3을 저장
        var b=5;
        var c=7;

        document.write(a);   //변수
        document.write(b);
        document.write(c);

        document.write(1+2+3);
        document.write(a+b+c);

        document.write("a");  //상수
        document.write("<hr>");

        //  2) nothing : 변수를 선언하지 않아도 사용할 수 있다
        name="손흥민";
        age=25;
        height=178.5;
        document.write(name);
        document.write(age);
        document.write(height);
        document.write("<hr>");

        //변수는 새로운 값으로 대입하면서 사용한다
        a=2;
        b=4;
        c=6;

        name="김연아";
        age=30;
        height=165.9;

        document.write(a);
        document.write(b);
        document.write(c);

        document.write(name);
        document.write(age);
        document.write(height);
        document.write("<hr>");


        //  3) let
        //->반드시 변수를 선언하고 사용한다
        let i=2;
        let j=4;
        let k=i+j;
        document.write(k);//6

        // 에러. let으로 선언한 i변수를 이중으로 선언할 수 없다
        //let i=8;

        //  4) const
        //-> 변수를 상수화
        const x=10;
        document.write(x);

        //에러. 변수값을 바꿀 수 없다
        //x=9;

        </script>

    </body>
</html>
05_document
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>05_document.html</title>
        <style></style>
    </head>
    
    <body>
    
        <h3>document 객체</h3>

        <div id="demo"></div>

        <script>
        /*
        ● 객체 Object
          ->속성    객체명.멤버변수
          ->메소드  객체명.멤버함수()   
        */               
       
        document.write(123);
        document.write("대한민국");
        document.write("<hr>");

        // + 연산자
        document.write(3+5);     //8
        document.write("<hr>");
        document.write(3+"5");   //35
        document.write("<hr>");
        document.write("3"+5);   //35
        document.write("<hr>");
        document.write("3"+"5"); //35
        document.write("<hr>");
        document.write("3+5");   //3+5
        document.write("<hr>");

        let name="손흥민";
        let age=25;
        let height=178.9;

        document.write("이름:" + name + "<hr>");
        document.write("나이:" + age + "<hr>");
        document.write("키:" + height + "<hr>");

        //자바스크립트에서 HTML tag 사용시 문자열 처리해서 사용한다
        document.write("개나리<br><p>진달래<p>");
        document.write("<img src='../../images/monkey.png'>");
        document.write("<hr>");
        ///////////////////////////////////////////////////////

        let str=""; //빈문자열 (글자갯수 0개)

        str=str+"ONE";
        document.write(str);
        document.write("<hr>");

        str=str+"TWO";
        document.write(str);
        document.write("<hr>");

        str=str+"THREE";
        document.write(str);     //ONETWOTHREE
        document.write("<hr>");

        str="";                 // 문자열 지우기
        document.write("#" + str + "#");
        document.write("<hr>");
        //////////////////////////////////////////////////

        //본문 <body>에 있는 id 속성 접근

        //1)순수 JavaScript
        //document.getElementById("demo")
        //document.getElementById("demo").innerText="아이티윌";

        //2)jQuery 접근 (jQuery라이브러리 필요함)
        //$("#demo")
        //$("#demo").val("아이티윌")
        //////////////////////////////////////////////////


        //연스) 이름, 나이, 키 값들을 표작성을 해서 id=demo에 출력하시오
        name="김연아";
        age=30;
        height=165.7;

        let result=""; //결과값
        result = result + "<table border='1'>";
        result = result + "<tr>";
        result = result + " <th>이름</th>";
        result = result + " <td>" + name + "</td>";
        result = result + "</tr>";
        result = result + "<tr>";
        result = result + " <th>나이</th>";
        result = result + " <td> " + age + "</td>";
        result = result + "</tr>";
        result = result + "<tr>";
        result = result + " <th>키</th>";
        result = result + " <td> " + height + "</td>";
        result = result + "</tr>";
        result = result + "</table>"

        //결과값을 문자열로 출력
        //document.getElementById("demo").innerText = result; //$("#demo").text(result)

        //결과값을 HTML tag 형식으로 출력
        document.getElementById("demo").innerHTML = result; //$("#demo").html(result)


        </script>

    </body>
</html>
06_연산자
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>06_연산자.html</title>
        <style></style>
    </head>
    
    <body>

        <h3>연산자</h3>

        <script>
        
        //1. 산술연산자
        document.write(5+3);
        document.write(5-3);
        document.write(5*3);
        document.write(5/3); // 몫    1.666666
        document.write(5%3);// 나머지  2  
        document.write("<hr>");
        
        document.write(3/5); //0.6
        document.write(3%5); //3
        document.write("<hr>");
        /////////////////////////////////////

    
        //2. 비교(관계)연산자
        //-> 논리형(boolean)으로 반환된다
        //->true, false
        document.write(5>3);
        document.write(5<3);
        document.write("<hr>");

        document.write(5>=3);
        document.write(5<=3);
        document.write("<hr>");

        document.write(5==3);   //서로같다
        document.write(5!=3);   //서로 같지않다
        document.write("<hr>");

        //3. 논리연산자
        // 1) && 연산자
          // -> 그리고, and연산자, 논리곱
          // -> 모든 조건이 true 일때만 true
          // -> ~이면서
        document.write(5<3 && 2<4);
                   // false    true
                   // false

        // 2) ||연산자
        // -> 또는 ,or 연산자, 논리합
        // -> 조건들중에서 하나만이라도 true 이면 true
        // -> ~이거나
        document.write(5<3 || 2<4);
                    // false    true
                    // true


        // 3) ! 연산자
        // -> 논리 부정 연산자, not 연산자
        // -> ~아니라면
        let flag=true;
        document.write(!flag);


        </script>

    </body>
</html>
07_연습문제
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>07_연습문제.html</title>
        <style></style>
    </head>
    
    <body>
    
        <h3>연산자 연습문제</h3>
        
        <script>
         
        //문1) 임의의 정수가 짝수(2의 배수)인지 확인하시오
        //-> 짝수란? 2로 나누어서 나머지가 0
        let a=4;
        document.write(a%2==0);
                //     4%2
                //      0 == 0
        document.write(a%2!=1);
                //     4%2
                //      0 != 1 
        document.write("<hr>");    

        //문2) 임의의 정수가 3의 배수인지 확인하시오  
        let b=7;
        document.write(b%3==0);
                //     7%3
                //      1 == 0
        document.write("<hr>"); 


        //문3) 임의의 정수가 4의 배수인지 확인하시오
        let c=4;
        document.write(c%4==0);
                //     4%4
                //      0 == 0
        document.write("<hr>"); 

        //문4) 해당 년도가 윤년인지 확인하시오     
        //->윤년 : 4년마다 한번씩 2월 29일이 속해 있는 년도       
        let year=2020;
        document.write(year%4==0);
        document.write("<hr>"); 

        //문5) 임의의 정수가 2의 배수이면서 5의 배수인지 확인하시오  
        let d=5;
        document.write(d%2==0 && d%5==0);
        document.write("<hr>");

        //문6) 임의의 정수가 1 또는 3인지 확인하시오
        let code=1;
        document.write(code==1 || code==3);
        document.write("<hr>");

        //문7) 국어점수가 80~89 사이인지 확인하시오
        let kor=85;
        document.write(kor>=80 && kor=89);

        //문8) 해당 년도가 윤년인지 확인하시오 (윤년 구하는 공식)
        let y=2023;
        document.write(y%4==0 && y%100!=0 || y%400==0);

        </script>

    </body>
</html>
08_연산자
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>08_연산자.html</title>
  <style></style>
</head>

<body>

    <h3>연산자</h3>

  <script>

    //1. () 연산자
    document.write(3+4+5/2);   //9.5
    document.write((3+4+5)/2); //6
    document.write("<hr>");


    //2. 대입연산자
    let num=3;

    num=num+2; //3+2
    document.write(num+"<hr>");

    num+=2;
    document.write(num+"<hr>");//7

    num=num-3; //7-3
    document.write(num+"<hr>");//4

    num-=3;
    document.write(num+"<hr>");//1

    num*=10;   //1*10
    document.write(num+"<hr>");//10

    num/=2;    //10/2
    document.write(num+"<hr>");//5

    num%=2;   //5%2
    document.write(num+"<hr>");//1
    /////////////////////////////////



    //3. 1증감연산자
    
    let a=3;
    a=a+1; //3+1
    document.write(a+"<hr>");
    a+=1;  //5
    document.write(a+"<hr>");
    a++;   //6
    document.write(a+"<hr>");
    ++a;   //7
    document.write(a+"<hr>");

    let b=3;
    b=b-1; //3-1
    document.write(b+"<hr>");
    b-=1   //1
    document.write(b+"<hr>");
    b--;   //0
    document.write(b+"<hr>");
    --b;   //-1
    document.write(b+"<hr>");


    //1증감연산자는 다른 계산식과 같이 사용할 경우 주의!!
    let c=10;
    let d=20;

    let i=c++;  //let i=c
                //c=c+1

    let j=--d;  //d=d-1
                //let j=d

    document.write(c+d+i+j);//11+19+10+19
    document.write("<hr>");
    /////////////////////////////////////



    //4. 삼항연산자
    //형식) (조건) ? 참 : 거짓

    //문1) 절대값을 구하시오 (양수값을 구하시오)
    let su=5;
    let result = (su<0) ? su*-1 : su;
               // -5 <0    -5*-1

    document.write(su+" 절대값: " + result);
    document.write("<hr>");

    
    let n=3;
    document.write(n*-1); //이항
    document.write(-n);   //n*-1
    document.write("<hr>");

    //문2) 세개의 수중에서 가장 큰값(최대값)을 구하시오
    let x=7, y=5, z=9;

    let max = (x<y) ? y : x;
            // 7<5        7
    max = (max<z) ? z : max;
        //  7<9     9
    document.write(x + "," + y + "," + z + "중 최대값 : " + max);


  </script>

</body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'Frontend > JavaScript' 카테고리의 다른 글

2월 9일 JavaScript (01~06)  (0) 2023.02.09

관련글

티스토리툴바