WEB/2020_webCamp

LAB04. Javascript

HBean_ 2020. 7. 29. 03:43
  • Javascript 

 

    • The programming language of HTML and the Web.
    • 웹페이지의 액션을 지정한다.
    • HTML의 content를 바꿀 수 있다. -> getElementById(“id”).innerHTML or src
    • HTML의 style을 바꿀 수 있다. -> getElementById(“id”).style.[display, …]

 

    • Javascript 위치
      • Inline : 태그 속성안에
      • Inner : <head> or <body> 에서
      • external : 외부 파일 ( 한 페이지에서 여러 외부 파일 사용 가능)
      • <script> 태그안에 코딩한다.
      • <script> 태그를 적는 방법은 css와 마찬가지로 3가지가 있다.

(ex. <script src=“myScript.js"></script> : myScrip.js라는 외부 파일 이용)

<장점>

        1. html과 code로 부터 분리 가능
        2. html과 javascript를 유지, 보수 하기 쉽다.
        3. 속도 개선
    • Javascript output
      • Html 페이지가 로드 된 이후로 document.write()가 실행되면 기존의 html은 모두 사라진다.  
      • innerHTML
      • document.write() : 웹 페이지에 바로 출력된다.

 

 

 

      • window.alert() : an alert box가 출력된다.
      • console.log() : 콘솔 창에서 확인

 

    • Javascript print
      • 자바스크립트는 프린트와 관련된 object나 method가 없다.
      • 유일하게 window.print() method 를 통해 현재 페이지의 내용을 프린트 할 수 있다.

 

    • JS statements : programming instructions

 

    • JS variables 
      • Ex. var person = “John”, carName=“Volvo”;
      • undefined와 null은 가지는 value는 같지만 type은 다르다!
      • 하나의 statement 에 변수 여러개 선언 가능
      • 변수의 value 없이 선언하면 ‘undefined’를 value로 가짐
      • Value를 가진 변수를 재선언 해도 값이 사라지지 않음
      • 한 변수는 다른 data types들을 가질 수 있다.

ex) var x;

x = 2; // x : number

x = “hong” // x : string

      • JS arithmetic 
        • 숫자, 문자 혼합 : 

Var x=“5” + 2 + 3 의 경우 x의 value는 523 이다. (문자열 처리)

Var x = 2 + 3 + “5”의 경우 value는 55 이다.

JS는 문자열을 만나는 순간 2와 3도 “2”, “3”으로 다룬다.

        • ** : 제곱을 표현한다. ( ex. 5 ** 3 = 5의 세제곱 = Math.pow(5,3) ) 
        • == : true -> equal value
        • === : true -> equal both value and type
      • JS $ _ : “$”,“_”를 문자로 취급한다.
      • JS arrays : var colors = [red, orange, yellow]; (typedef시 object로 나옴 in JS)
      • JS objects : var info = {name: ‘Amma’, age:20, gender: “woman”};
        • properties를 표현하는 방법 : 1. info.name, 2. info[“name”]
      • Typeof : variable의 type을 알려준다.
      • Primitive data(string, number, boolean, undefined) / Complex data(function object)
      • JS : objects / Properties / Methods
        • Objects (ex. A car), object 는 여러 value 를 여러개 가지고 있는 variable 이다.
        • Properties (ex. Color, weight)
        • Methods (ex, stop, start)
      • JS events
        • onchange, onclick, onmouseover, onmouseout, onkeydown, onload
      • JS string
        • Ex. var x = “\'hello\'";
        • slice(start,end) : 
          • start(+,- 상관없이)만 있을 경우 start 지점부터 문자열 끝까지 return
        • substring(start,end) : slice와 비슷하나 negative parameter를 받을 수 없음!
        • substr(start,length) : slice와 비슷하나 second parameter가 길이이다.
        • str.replace(original , new) : original string
          • 교체할 문자열을 찾을 때 대소문자가 다르면 다른 문자열이라고 인식하는데,       /google/i 처럼 /i를 붙이면 문자열의 대소문자 상관없이 찾는다.
          • /google/g 라고 하면 모든 google 문자열이 바뀐다.
        • string에서 ‘ ,“, / 사용하려면 앞에 \를 붙여야 한다.
        • \ 로 string 의 value를 나누어 긴 코드 줄을 피할 수 있다.
        • Object 가능 -> var y = new String(“John"); //typeof y => object
        • x.length : x값의 길이
        • x.(last)indexOf(“hello”,2) : x 문자열에서 ‘hello’가 처음 등장하는 위치의 index, 문자열의 index는 0에서 시작함, 파라미터를 하나 추가할 경우 x 문자열에서 search 시작할 위치
        • x.search() : 특정 string을 검색하고 존재하면 해당 위치를 return
        • Extracting string (start,end가 negative number 일 경우 문자열 뒤에서 부터 index count)

 

        • Extracting string characters
          • charAt(position) : 해당 position에 위치한 문자 return
          • charCodeAt(position) : 해당 position에 위치한 문자의 UFT-16 code return
          • str[index] : 속성으로 접근 해서 해당 index에 매치된 문자 return
        • Convert a string to array : split()

Ex. var str1 = “1,2,3,4”; var str2 = “hello”;

var arr1 = str1.split(“,”); // Split on commas

var arr2 = str2.split(“”); // Split on characters

      • JS Number
        • 실수의 계산은 정확하지 않다. 그래서 아래와 같이 해결한다. 

 

        • Numeric Strings
          • 계산식에 string 인 숫자가 존재 할 때, 연산자가 + 가 아닌 - , /, * 일 때, 문자열이 숫자로 바뀐다.
        • Not a number : NaN
          • 숫자와 문자열이(숫자가 아닌) 계산될 때 return
          • typeof NaN = number
        • .toString(8) : 8진수 값으로 return, parameter 값에 따라 바뀜(2진수, 16진수 …)
        • Object 가능 : var x = new Number(10); //typeof x return object
      • JS Array
        • array는 숫자(index)로 element에 접근 ->arr[0]
        • object는 member로 element에 접근 -> person.firstName
        • num1은 새로 추가할 위치, num2은 해당 위치에서 부터 지울 element 수
        • String1, string2 parameter가 없을 경우 추가없이 remove!!
        • arr1.concat(arr2,arr3) // arr1, arr2, arr3 순서대로 element들을 모아 새로운 array를 만든다.
        • argument가 하나 일때, 배열의 맨앞에서 부터 arg1만큼 element를 새로운 배열로 return
        • argument가 두개이면, 새로운 문자열을 시작과 끝의 다음 index
          • Ex. slice(1,3) 이면 index = 1,2 인 element 가 새로운 array의 element
        • 숫자열의 경우, ’25’ > ‘100’ 이므로 trick이 필요함
          • points.sort(function(a, b){return a - b});  //오름차순
          •  
        • typeof로는 object라고 return, 그러나 array 그자체로 생각하는 것이 좋음
        • array의 element는 object가 될 수 있음
        • arr.length 는 arr의 element 수를 리턴 -> 항상 array의 가장 큰 index + 1
        • New element를 추가할 때 : arr[arr.length] = ‘orange’;
        • Arr.toString() : 모든 element를 ,사이로 이은 문자열을 만든다.
        • Arr.join(“*”) : toString과 비슷한 역할을 하지만 element 별 구별자를 직접 지정 할 수 있다.
        • pop() : arr.pop() // arr에서 last element를 꺼내서 제거
        • push() : arr.push(“NEWelement") // 배열의 last element 다음에 새로운 element 추가
        • shift() : pop과 기능은 비슷 그러나 첫번째 element pop, 꺼낸 element return
        • unshift(“NEWelement") : push와 비슷하다 array의 처음에 추가, 새로운 배열의 길이 return
        • splice(num1, num2, “string1”,”string2”) : 새로운 문자열 string1, string2 추가
        • concat : Array Merge
        • slice(“arg1”,”arg2”) : 문자열을 특정 부분을 새로운 문자열로 만들어 return, 기존 문자열은 건드리지 않음!!!
        • sort : array 정렬 //알파벳순서로, 대문자 먼저 그다음 소문자
          • 숫자열의 경우, ’25’ > ‘100’ 이므로 trick 이 필요함
            • points.sort(function(a, b){return a - b});  //오름차순
            • points.sort(function(a, b){return b - a});  //내림차순
              • function(a, b){return a - b} : compare function
                • a - b -> return positive  : b 가 a 보다 앞에 sort
                • a - b -> return negative : a 가 b 보다 앞에 sort
                • a - b -> return 0 : no change
          • The Fisher Yates method (array.sort 보다 정확)
            • Fisher Yates shuffle : 랜덤 알고리즘으로 유명
              • 배열의 인덱스 중 하나를 랜덤하게 선택
              • 해당 인덱스에 해당하는 값을 꺼내서 정렬 
              • 배열의 element 없을 때 까지 위 과정을 반복 

 

 

        • 배열에서 가장 큰 값, 작은 값 찾기 ( 정렬 없이 )
          • Math.max.apply( null, [1,2,3] );       // == Math.max(1,2,3 );
          • Math.min.apply( null, arr );
          • 직접 함수 만들기
        • forEach(function name) : element 하나당 함수( a callback function) 를 호출
        • map() : element 하나씩 함수를 호출해서 새로운 배열 만듬, 기존 배열의 변화X
        • filter() : 테스트를 통과한 배열의 element만으로 구성한 새로운 배열을 만듬
        • reduce() : 각각 element에 대해 함수를 호출해 하나의 value로 만듬
        • reduceRight() : reduce와 비슷 하지만 element 실행순서가 (오->왼)
        • .every() : 모든 element가 test를 통과하는 가? // return : true/false
        • .some() : test를 통과하는 element가 있는 가? // return : true/false
        • .indexOf() : 해당 value를 가진 element의 index return
        • find() : 해당 조건을 만족하는 첫번째 element의 value return
          • findIndex() : index return
      • JS Dataes
        • Create data object
          • new Date() // 인자 없을 경우 현재 시간
          • new Date(year, month, day, hours, minutes, seconds, milliseconds) 
            • 인자가 최소 2개 이상!!!
            • Month -> 0 : 1월, 11 : 12월 의미, 년도를 한자리 또는 두자리로 표기할 경우 자동으로 1900년대
          • new Date(milliseconds)
            • 날짜를 milliseconds 단위로 저장 (1초 == 1000 milliseconds)
            • var d = new Date(1000); // Jan 01 1970 09:00:01 GMT+0900
            • 하루 = 86,400,000 milliseconds
          • new Date(date string)
            • var d = new Date("October 13, 2014 11:13:00”);
        • Dates display
          • toUTCString()
          • toDateString() 
          • toISOString()
        • Data methods 

 

 

 

    • Random 함수 

 

    • JS Booleans
      • No value (0, NaN, null, false, undefined,””,-0) -> false 
      • 음수값이라도 값이 있으면 true

 

 

 

    • JS 반복문
    •  
      • for/in : object의 속성(member)으로 반복

 

 

 

 

 

 

      • for/of : array의 인덱스요소로 반복

 

 

 

 

 

 

      • Break : 해당 loop를 탈출
      • Continue : 해당 차례는 끝냈지만(ex, i=1일때 pass), loop 탈출X
    • JS regular expression
      • Example
        • var str = "Visit W3Schools”;
        • var n = str.search(/w3schools/i);   //‘’W3Schools”보다 강력 

 

 

 

 

 

 

 

 

 

https://www.w3schools.com/js/default.asp

 

JavaScript Tutorial

JavaScript Tutorial JavaScript is the programming language of HTML and the Web. JavaScript is easy to learn. This tutorial will teach you JavaScript from basic to advanced. Start learning JavaScript now »