새소식

인기 검색어

카테고리 없음

[JS] JS 기본 문법 정리 1

  • -

| 자바 스크립트 작성위치

자바 스크립트 출력

 

1. 화면에 출력

  • document.write(" ");

2. 콘솔창 출력

  • console.log(" ")
<html>
<head>
    <title>콘솔창</title>
</head>
<body>
    <script>
        document.write("화면에 내용을 출력합니다.");
        console.log("콘솔창에 내용을 출력합니다.");
    </script>
</body>
</html>

document.write(" ")
console.log(" ")

  JS HTML
줄바꿈 \n <br>
주석 // or /* content  */ <!-- content -->

| 변수 선언

1 . var

  • 데이터 형과 상관없고 재선언이 가능
<script>
       var x=30;
       var y=3;
       var z=x+y;
       document.write(z);

       console.log("x= "+x);
       console.log("y= "+y);
       console.log("z= "+z);

       var x=21; //재선언 가능
       var y=3;  //재선언 가능
       var z=x+y; //z에는 새로운 값이 할당됨
       document.write(z);
 </script>

2. let

  • ES6버전 부터 추가 , 재선언 불가능(선언시 에러 발생) but 변수 변경은 가능
<script>
    let x1=7;
    let y1=16;
    let z1=x1+y1;
    console.log(z1);

    //let x1=10; 재선언시 에러가 발생함(불가능)
    x1=8; //정상적으로 실행됨.(바꾸는 건 가능,변수가 선언되는게 불가능함)
</script>

3. const

  • ES6버전부터 추가
  • const변수는 선언과 동시에 꼭 초기화를 해줘야하고 재선언 불가!
<script>
   const PI=3.14;
   // PI=3.141592; 에러 발생
   //const PI=3.141592; 변수명 제선언시 에러 발생
   
   // const x3;  const변수는 선언과 동시에 꼭 초기화를 해줘야함(에러)
   console.log(PI);
</script>

| 데이터 타입

String

<script>
        let name1="홍길동";
        let name2="홍길순";

        //let str1="나의 이름은 "홍길동" 입니다"; //에러발생
        let str1="나의 이름은 '홍길동' 입니다"; 
        console.log(str1);

        let str2="나의 이름은 \"홍길동\"입니다";
        console.log(str2);

        let str3="나의 이름은 \'홍길동\'입니다";
        console.log(str3);

        
        let str4="나의 이름은 \\홍길동\\입니다";
        console.log(str4);
 </script>

Number

<script>
        let x1=3;
        let y1=3.14;

        // Undefined
        let u1;
        console.log(u1); //결과: undefined

        let u2=undefined;
        console.log(u2); //결과: undefined

        // Null
        let n1=null;
        console.log(n1); //결과: null
        console.log(n1+1) //결과: 1
</script>

Object

<script>       
       //Object 선언후 멤버변수 초기화

        let person1={}; //객체(object) 선언
        person1.firstName="길동"; //멤버변수 초기화
        person1.lastName="홍";
        person1.age=20;

        //object선언과 동시에 초기화
        let person2={
            firstName:"길순",
            lastName:"홍",
            age:18
        };

        let person3={};
        person3["firstName"]="철수";
        person3["lastName"]="김";
        person3["age"]=18;

        console.log(person1.firstName);
        console.log(person1.lastName);
        console.log(person1.age);

        person2.email="hong@gmail.com";
        console.log(person2.firstName);
        console.log(person2.lastName);
        console.log(person2.age);
        console.log(person2.email);

        document.write(person3.firstName+"<br>");
        document.write(person3.lastName+"<br>");
        document.write(person3.age+"<br>");
        
 </script>

배열(Array)

<script>
        let car=["현대","기아","볼보","테슬라","벤츠"];
        console.log(car[0]);
        console.log(car[1]);
        console.log(car[2]);
        console.log(car[3]);
        console.log(car[4]);

        let num=[3,6,9,12,1,7];
        console.log(num[2]);
        console.log(num[4]);

        //문자와 숫자를 혼합해서 사용가능
        let arr1=["현대",3,3.14,undefined,null];
        console.log(arr1[0]);
        console.log(arr1[1]);
        console.log(arr1[2]);
        console.log(arr1[3]);
        console.log(arr1[4]);

        let arr2=[person1,person2,person3];
        console.log(arr2[0]);
        console.log(arr2[1]);
        console.log(arr2[2]);

        let arr3=[]; //선언만 하는 것도 가능
        arr3[0]=1;
        arr3[1]="대한민국";
        arr3[2]="짝짝짝짝짝";
        console.log(arr3);

        let arr4=[];
        //.push()하면 인덱스가 필요없이 0번째 부터 값을 넣음
        arr4.push("BTS");
        arr4.push(7);
        arr4.push("뷔");
        arr4.push("정국");
        arr4.push(3.14);
        arr4.push(null);
        arr4.push(undefined);

        console.log(arr4[0]);
        console.log(arr4[1]);
        console.log(arr4[2]);
        console.log(arr4[3]);
        console.log(arr4[4]);
        console.log(arr4[5]);
        console.log(arr4[6]);
        console.log(arr4); 

        //다시
        for(let i=0;i<arr4.length;i++){
            //onsole.log(arr4[i]);
            document.write(arr4[i]+"<br>"); 
        }
</script>

Boolean

<script>
        let isAdualt=true;  //isAdualt=false
        let num1=5;     
        let num2=7;
        console.log(num1>num2); //false

        console.log(typeof num1);
        console.log(typeof isAdualt); 
        console.log(typeof name1);   
        console.log(typeof person1); //object
        console.log(typeof car);   //배열은 object(array x)
</script>

| Number 64비트 부동 소수점

 <script>
        var x=0.1+0.2;
        console.log(1/2); //출력값(유한소수): 0.5
        console.log(2/3); //출력값(무한소수): 0.6666666666666666
        console.log(1/10); //출력값(유한소수): 0.1

        console.log((0.1).toString(2)); //소수점 0.1을 2진수로 표현: 64비트 0.0001100110011001100110011001100110011001100110011001101
        console.log((0.2).toString(2)); //0.001100110011001100110011001100110011001100110011001101

        console.log((parseInt('0.010110011001100110011011001100110011001100110011001100110011')),2)*Math.pow(2,-55);
        
        //부동소수점 연산에는 외부라이브러리를 활용
        // BinNumber.js
        //Big.js
        //Decimal.js

        var x2=999999999999999; //15자리까지는 정상적으로 출력되
        console.log(x2);

        var x3=9999999999999999; //16자리 출력 값: 정상적으로 출력되
        console.log(x3);

        console.log(Number.MAX_SAFE_INTEGER); //9007199254740991 : 자바스크립트에서 지원해주는 최대값

        
 </script>

| 연산자

더하기

<script>
        var x1=5;
        var y1=2;
        var z1=x1+y1;
        console.log(z1);
</script>

빼기

<script>
        var x1=5;
        var y1=2;
        var z1=x1+y1;
        console.log(z1);

</script>

곱하기

<script>
        var x3=5;
        var y3=2;
        var z3=x3*y3;
        console.log(z3);
</script>

나누기

<script>
        var x4=5;
        var y4=2;
        var z4=x4/y4;
        console.log(z4);
<script>

거듭제곱

<script>
        var x5=5;
        var y5=2;
        var z5=x5**y5; //5의 2승
        console.log(z5);
</script>

나머지

<script>        
        var x6=5;
        var y6=2;
        var z6=x6%y6; //5의 2승
        console.log(z6);
</script>

증가 연산자

<script>
        var x7=1;
        x7++; //x7=x7+1
        console.log(x7);
        x7++; 
        console.log(x7);
</script>

감소연산자

<script>
        var x8=4;
        x8--; //x=x-1;
        console.log(x8);
        x8--; 
        console.log(x8);
</script>

문자열 연산자

        var txt1="방탄소년단";
        var txt2="뷔(김태형)";
        var txt3=txt1+" "+txt2;       //문자열결자
        console.log(txt3);

        txt1+=txt2;                         //txt1=txt1+txt2;
        console.log(txt1);

숫자의 문자

       var x=5+5;  
        console.log(x);        //출력값:10

        var x="5"+5;
        console.log(x);       //출력값:55 

비교 연산자

        console.log(1==1);         //결과값: true
        console.log(1=="1")       //결과값: true --> 실제로 "" 안에 있는 값을 비교함
        console.log(1==="1")     //결과값:false --> -- 값과 type 둘다 비교함
       
        console.log(1!=3);          //출력값:  true
        console.log(1!="1")        //출력값: false -- 시험에 나올 듯
        console.log(1!=="1")      //출력값: true

        console.log(3>2)            //출력값: true
        console.log(3<2)            //출력값: false
        console.log(3>=2)          //출력값: true
        console.log(3<=2)          //출력값: false

논리 연산자: & | !

       
        console.log(3>2 && 1>2); //출력값: false
        console.log(3>2 || 1>2); //출력값: true
        console.log(!(3>2)); //출력값: false
        console.log(!(3<2)); //출력값: true

| 조건문

 

if문

 //if else if,else if .. else
        var hour=14;
        if(hour<10) console.log("Good morning");
        else if(hour<17) console.log("Good afternoon");
        else if(hour<21) console.log("Good evening");
        else console.log("Good night");

        var age=19;
        var isAdult=false;

        if(age>18){
            isAdult=true;
        }else{
            isAdult=false;
        }
        console.log(isAdult);
 if(day==0) {
            dayName="일요일";
        }
        else if(day==1){
            dayName="월요일";
        }
        else if(day==2){
            dayName="화요일";
        }
        else if(day==3){
            dayName="수요일";
        }
        else if(day==4){
            dayName="목요일";
        }
        else if(day==5){
            dayName="금요일";
        }
        else if(day==6){
            dayName="토요일";
        }
        console.log("오늘은 "+dayName+"입니다");

switch: 정수,break,default

 //switch: 정수,break,default
        var d=new Date();
        var day=d.getDay(); //일요일:0,월요일:1,화요일:2...토요일:6
        console.log(day);
        var dayName="";

       switch(day){ //day:정수
            case 0:
                dayName="일요일";
                break;
            case 1:
                dayName="월요일";
                break;
            case 2:
                dayName="화요일";
                break;
            case 3:
                dayName="수요일";
                break;
            case 4:
                dayName="목요일";
                break;
            case 5:
                dayName="금요일";
                break;
            case 6:
                dayName="토요일";
                break;
            default:
                break;
        }
        console.log("오늘은 "+dayName+"입니다");
 

==> switch case와 if는 서로 변환 가능

| 반복문

 

for

       
        for(var i=0;i<5;i++){
            console.log("The Number is "+i);
        }
 
  •  ;는 무한루프 즉 true와 같
        var i=1;
        var total=0;
        for(;i<=10;){
            console.log("Test");
            total+=i;
            i++;
        }
        console.log("총 합은 - "+total);
  • break, continue문
 
       for(var i=1;i<=5;i++){
            //if(i==3) break;'
            if(i==3) continue;
            console.log("The Number is "+i);
        }
 

Array

        var numbers=[43,23,5,7,99,12,19];
        var len=numbers.length;
        //console.log(len);
        for(var i=0;i<len;i++){
            console.log(numbers[i]);
        }
//향상된 for문
        var numbers=[43,23,5,7,99,12,19];
        //(1) 데이터 타입,(2): 배열을 가리키고 있는 레퍼런스 변수
        for(var i in numbers){
            //console.log(i);
            console.log(numbers[i]);
        }

        //in은 q배열에서는 index를 가져오고 object에서는 키값을 가져옴  of는 그 안에 value(키 값)를 가져옴
        var numbers=[43,23,5,7,99,12,19];
        for(var i of numbers){
            console.log(i);
        }
//클래스(Object)
        //person(클래스),firstName,lastName(Object),멤버변수를 키,value값이라고 함
        var person={
            firstName:"길동",
            lastName:"홍",
            age:37
        };

        /*console.log(person.firstName);
        console.log(person.lastName);
        console.log(person.age);*/

        for(var key in person){
            //console.log(key);
            console.log(person[key]);
        }

        //in과 of의 차이점 알기
        var cars=["현대","기아","볼보","벤츠"];
        /*for(var car in cars){
            console.log(car);
        }*/
        for(var car of cars){
            console.log(car);
        }

        //while: zero or more
        /*var i=1;
        var total=0;
        while(i<=100){
            total+=i;
            i++;
        }
        console.log(total);*/
 //do ~while: one or more
        var i=1;
        var total=0;
        do{
            total+=i;
            i++;
        }while(i<=10);
        console.log(total);

| 함수

 
<script>
        var income=10;
        var vat=0.1;
        var tax=income*vat;
        //console.log(tax);

        /*함수 형식
        function 함수명(){
            //code
            return 0;
        }
        함수명();*/income
       
        function calculateTax(income){
            var vat=0.1;
            var tax=income*vat;
            return tax;
        }
        //console.log(calculateTax(10));

        function calculator(x1,y1,operator){
            if(operator=="+") return (x1+y1);
            else if(operator=="-") return (x1-y1);
            else if(operator=='*') return (x1*y1);
            else if(operator=='/') return (x1/y1);
        }
        console.log(calculator(5,7,'+'));
        console.log(calculator(5,7,'-'));
        console.log(calculator(5,7,'*'));
        console.log(calculator(5,7,'/'));
    </script>
 
Contents
댓글 0

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.

SHARE

DARK

MENU

티스토리툴바