script_기초

1.  <script defer src ="main.js"></script>

자바스크립트가 상단에 위치할 경우 호출한 이후에 나오는 실행코드를 읽지 못하거나 속도가 많이 뎌디게 된다.

과거에는 이러한 문제를 방지하기 위해 맨 아래 삽입했지만

defer를 넣으면 문제가 해결되기에 상단에 위치 할 수있게 되었다.

 

2. 주석

    /*  여러 줄 주석

    */

    // 한 줄 주석

 

3.

    식별자 : 사용자가 임의로 만드는 명칭

    예약어 : 자바스크립트 자체적으로 특정 기능을 실행하기 위해 예약된 명령어

    실행문 : 특정 명령어를 실행하기 위한 구문

 

   -식별자를 작성할 때에는 예약어는 피해야 함

 

4. 변수

     : 특정 데이터값을 임시로 저장하는 공간

 

    쓰는 이유

      1. 특정값을 자주 사용해야 될때 (성능상의 이점)

          --자바스크립트로 하여금 한번 찾은 내용을 또 찾지 않고 재사용해야 할때

      2. 반복적인 구문의 값 등이 여러코드에 걸쳐서 많이 쓰일때 (편의상의 이점)

 

   변수 선언방식

      var (ES5)

      let, const (ES6)

 

      ECMA Script

      ES5 <  2015 < ES6 (2015년 기준으로 드라마 틱하게 바뀜)

 

    ES6

    let : 변경 될 수 있는 값을 저장할 때  (재할당 허용)

            기존의 var 선언방식과는 다르게 호이스팅을 막아
    const : 변경되지 않는 값을 저장할 때 

                방식은 재할당 불가능하고 배열이나 객체같은 참조형 값의 변경은 가능

 

    var 변수명 = 대입값;

 

    let num ; //변수 선언 ( 값이 저장될 메모리 공간을 생성)

    num = 3; //변수에 값 할당, 대입 ( 변수 공간에 값을 저장)

    let num1 = 5; //변수 초기화 ( 변수를 선언하자마자 값을 할당)

 

   변수명 작성시 유의할점
    1. 숫자로 시작불가
    2. 특수문자 삽입불가 ( _, $는 가능)

    3. - 사용불가 (뺄셈) 
    4. 대소문자 구문 (apple, Apple 해당 두개의 변수는 다른 변수명)
    5. 예약어 불가 (let, fonst, for, if, function)
    6. 한글 불가

//var num; //변수 선언
//num = 5; //변수에 값 할당, 대입
var num = 5; //변수 초기화
console.log(num);

 

5. 연산자

   : 특정 값을 도출하기 위한 연산을 처리하는 식별자 산술연산자

 

    산술연산자 : 수학적인 연산 ( +, -, /, * , %, ++, --, **)

    대입연산자 : 특정값을 대입하기 위한 연산 ( =, +=, -=, *=)

    비교연산자 : 복수개의 값을 서로 비교하기 위한 연산자 ( ==, >=, <=, <, >, ===, boolean값을 반환 true,false )

            ==, != 값이 같은지 비교

            ===, !== 값과 자료형이 같은지 비교

 

    전위연산자 : 변수초기값에서 연산을 먼저 진행하고 그 뒤에 연산된 값을 활용

    var result = 2 + 3; //5
    var result1 = 3 - 2; //1
    var result3 = 5 / 2; //2 (나눈 몫 반환)
    var reulst4 = 5 % 2; //1 (나눈 나머지 반환)
    var result5 = 2 * 3; //6 
    var result8 = 3 ** 3; //9
    console.log(result8);

    //후위연산자 : 변수초기값을 먼저 사용한 다음 그 뒤에 연산 처리 
    //num++
    var num = 2;
    console.log(num);
    num = num + 1;
    
    //plut++
    let plus = 0;
    console.log(plus);
    plus = plus + 1; //plut++와 동일하다
    
    //전위연산자 : 변수초기값에서 연산을 먼저 진행하고 그 뒤에 연산된 값을 활용 
    //++num
    var num = 3;
    num = num + 1;
    console.log(num);

	//++plut2
    let plus2 = 0;
    plus2 = plus2 + 1; 
    console.log(plus2); //++plut2와 동일하다
    
    //비교연산자
    //var result = (2 == '2'); //값만 비교하기 때문에 결과값을 true
    var result = (2 === '2'); //자료형까지 비교하기 떄문에 결과값은 false
    console.log(result);

6. 자료형

    자료형(data type)

    원시형자료 (primitive type) : 특정값을 메모리에 바로 저장 (값만 저장)

         1. 문자열 (String)

         2. 숫자 (Number)

         3. 논리형 (Boolean : true, false)

         4. undefined : 변수를 만들고 값을 할당하지 않으면 undefined가 대신 저장됨 (에러상황)

 

    참조형자료 (reference type) : 값의 참조 주소 값만 메모리에 저장 (해당 값의 다양한 내장기능들도 같이 참조)

        5. null (Object) : 값이 비워져 있긴 한데 명시적으로 일부러 값을 비워둔 경우

                              (메모리는 만들어야 하는데 지금당장 값을 넣을수 없는 경우)

        6. 배열 (Array) : 여러개의 값을 그룹으로 묶어서 저장된 형태 (각 값들의 순서값으로 탐색 가능)

        7. 객체 (Obect) : 데이터를 key라는 인데싱을 통해 자료를 구조적으로 묶어 놓은 형태

         

     형변환 - 특정조건이 부합되면 자료형이 강제로 변환되는 형태

//형 변환
var num = '2'; //문자
console.log(typeof num);

var num1 = 2; //숫자
var num2 = '3'  //문자
var result = num1 + num2;
console.log(result); // '23' 문자

var num3 = 2;
var num4 = 5;
var num5 = '7';
var result1 = num3 + num4 + num5; //'77'
var result2 = num5 + num4 + num3; //'752'

console.log('resul1', result1);
console.log('result2', result2);

var isOk = true;
console.log(typeof isOk);

var err;
console.log(typeof err);

var nothing = null;
console.log(typeof nothing);

//배열
const colors = ['red', 'green', 'blue'];
console.log(colors[0])
console.log(colors[1]);
console.log(colors[2]);

console.log(colors.length);

colors[0] ="hotpink"; // red는 hotpink로 변경됨

//객체
var student1 = {
  name: 'David',
  age: 20,
  isFemale: false
}

console.log(student1.name);
console.log(student1['age']);

student1.age = "21"; //값이 변환됨

//자료형 검사
let text = "hello"; //string
let num = 1; //number
let boolean = true; //boolean
let blank;  //undefined
let nothing = null; // object
let colors = ['red', 'green', 'blue'];// object
let student1 = {
  name: '홍길동',
  age: 20,
  isFemale: false,
  address : "seoul"
}  // object

console.log(typeof text);