Jam's story

[JS] 자바스크립트의 기본적인 문법 본문

WEB/JavaScript

[JS] 자바스크립트의 기본적인 문법

애플쩀 2022. 5. 30. 12:48
  •  javascript 누가실행??
  •  html 문서 안에 <script></script> =>웹 브라우저에서 실행
  •  작성된 순서대로 하나씩실행
  •   실행문 뒤에 세미콜론 추가
  •   js는 세미콜론을 안붙여도 상관x(개행작업만 잘 한다면 )
  •   개행작업안하면 안쓰임  -> 세미콜론 붙이는 것을 권장함
  •    스크립트에 공백을 추가하면 가독성이 좋아진다.
  • java처럼 변수와
  • 리터럴 ==고정값 3.14이 있다. 
  • js 대소문자를 구분한다
  • 예약어 
    • abstract   arguments   await*   boolean
      break   byte   case   catch
      char   class*   const   continue
      debugger   default   delete   do
      double   else   enum*   eval
      export*   extends*   false   final
      finally   float   for   function
      goto   if   implements   import*
      in   instanceof   int   interface
      let*   long   native   new
      null   package   private   protected
      public   return   short   static
      super*   switch   synchronized   this
      throw   throws   transient   true
      try   typeof   var   void
      volatile   while   with   yield
 
 
 
Js 변수 선언하는 4가지 방법
 
  • var 2015년 이전에 사용 
  • let 2015 이후에 사용
  • const : 변수값을 변경 x
  • 아무것도 사용하지 x
 
Js의 자료형 

typeof 연산자를 통해 확인할 수 있다 

  • undefined - 값이 할당되지 않았을때 
  • string 
  • number- 실수 ,정수 
  • boolean 

 

 

 변수를 다시 선언해도 값이 손실되지 않는다. -var 

 

하지만 2015년부터 사용되는 let 과 const는 불가하다. 

    var name="홍길동";
    var name;
    alert(name);

 

 

string +number=string

    let y="5"+3;
    alert(y);

53이 출력 된다.

 

 

 

호이스팅 

변수선언을 아래에 해도 먼저 처리한다.

let으로 선언된 변수는 호이스팅이 안된다 .



증감연산자

자바와 같다. 

 var x=10;
 ++x;
document.write(x+"<br>");

 

비교연산자

자바와 같은 것들 

      document.write(3==5+"<br>");
        document.write(3!=5+"<br>");
        document.write(3<=5+"<br>");
        document.write(3>=5+"<br>");
        document.write(3>5+"<br>");
        document.write(3<5+"<br>");

자바와 다른것 

값비교+타입비교

=== 

!==

 

 

 

 

배열
 <script>
    int [] m=new int[3];
    m[0]=1;
    m[1]=2;
    m[2]=3;
    const cars=[];
    alert(typeof cars);

    alert(m[0]);
    alert(m[1]);
    alert(m[2]);

    js객체는 중괄호를 사용한다. 

         const person={
        name:"admin",
        age:20
    };
    alert(person.name);
    alert(person["name"]);

    function test(){}

    alert(typeof test);
    </script>

 

autofocus 기능을 js로 구현 

body 태그에 load, unload 이벤트 이해 

<body onload="init()">
    <input type="text" id="txtbox1">
    <input type="text" id="txtbox2" >

<script>
    function init(){
        document.getElementById("txtbox1").focus();
        
    }
</script>

 

  • onload 브라우저가 열릴때 
  • onunload 브라우저가 닫힐때 
  • focus 초점을 맞출때 일어나는 이벤트 
  • blur 초점을 잃을때 
  • onkeydown 누를 때 발생. 누르고 있는 경우 계속 실행. 한글처리 
  • onkeypress 누를 때 발생. 누르고 있는 경우 계속 실행. 문자가 실제로 입력되었을때 ,오로지 문자와 숫자 인식가능 한글x 
  • onkeyup 눌렀다가 뗄때  (놓을때)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        input[type=text]{
            border:1px solid gray;
            padding: 5px;
            font-size: 20px;
            margin: 10px;
            width: 90%;
        }
        /* 의사 클래스 (특정 상태) */
        input[type=text]:focus{
             background-color: yellow;}
    </style>
</head>
<body onload="init()" >
    <input type="text" id="txtbox1" tabindex="1" onkeydown="txt1_keydown()" onkeypress="" onkeyup="txt1_keyup()">
    <input type="text" id="txtbox2" tabindex="2" >

<script>
    function init(){
        document.getElementById("txtbox1").focus();
    }
    function txt1_keyup(){
        document.getElementById("txtbox2").value=document.getElementById("txtbox1").value;

    }
    function txt1_keydown(){
    /*     event.srcElement;
        event.keyCode; -> 13(enter) 16(shift) 38(f1) 65(a/A) -대소문자 구분 x
        */
        document.getElementById("txtbox2").value=event.keyCode+"("+String.fromCharCode(event.keyCode)+")"+"/"+event.shiftKey;
   
    }
    
    </script>
</body>
</html>
Document

 

저작자표시 (새창열림)

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

[JS] 엔터쳐서 숫자를 이어받고, 합을 출력 -onkeydown 사용  (0) 2022.05.30
[JS] input-text 입력받으면 넘어가고, p에 출력  (0) 2022.05.30
[JS] day2- 시험  (0) 2022.05.30
[JS] 클래스 추가하기  (0) 2022.05.29
[JS] select  (0) 2022.05.27
'WEB/JavaScript' Related Articles more
Comments