[JS] 1주차 스터디 내용

10 Jan 2024 • Self-study

웹페이지

  • HTML
  • CSS
  • JS: 웹 동작 구현

자바스크립트

  • 객체 기반 스크립트 언어
  • 동적 및 인터프리터 언어
  • 객체 지향형 + 함수형

자바스크립트의 동작

  • HTML의 내용 변경
  • HTML의 속성 변경
  • HTML의 스타일 변경

자바스크립트의 문법

  • 리터럴: 값
  • 식별자: 변수 혹은 함수의 이름
    1. camel case: firstVar
    2. Underscore case: my_first_javascript
  • 키워드: 어떠한 역할 수행을 위함, 식별자 사용 금지
  • 주석: c와 동일

자바스크립트의 적용

  1. 내부 자바스크립트 코드로 적용 <script> 태그로 HTML 문서 안 삽입 
    <head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script>
        function printDate() {
            document.getElementById("date").innerHTML = Date();
        }
    </script>
</head>

    <body>
    <p> 자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근 가능 </p>
    <button onclick="printDate()"> 현재 날짜와 시간 표시 </button>
    <p id="date"></p>
    <script>
        function printDate() {
            document.getElementById("date").innerHTML = Date();
        }
    </script>
</body>
  2. 외부 자바스크립트 코드로 적용 js 확장자 파일 생성 -> <script> 태그로 파일 포함시키기 
    <head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script src="/examples/media/example.js"></script>
</head>

    function printDate() {
    document.getElementById("date").innerHTML = Date();
}

자바스크립트 자료형 타입

  1. 원시 타입(primitive) 숫자: 매우 크거나 작은 수는 e 사용 
    var firstNum = 10;
var secondNum = 10e6; // 10000000

    문자열: 따옴표로 둘러싸인 문자의 집합

    var firstStr = "문자열";
var secondStr = "나는 '문자열'";

// 숫자와 문자열 합치기, 숫자가 문자열로 자동 변환
var num = 10;
var str = "JavaScript";
document.getElementById("result").innerHTML = (num + str); // 10JavaScript

    불리언(boolean)

    var firstNum = 10;
var secondNum = 11;
document.getElementById("result").innerHTML = (firstNum == secondNum); // false

    심볼: ECMAScript 6부터 제공 유일하며 변경할 수 없는 타입 -> 객체의 프로퍼티를 위한 식별자로 사용

    var sym = Symbol("javascript"); // symbol 타입
var symObj = Object(sym); // Object 타입

    undefined null: object 타입, 값이 정해지지 않은 것 undefined: ‘타입’이 정해지지 않음

    var num; // undefined
var str = null; // object의 null

    동등연산자(==)과 일치연산자(===) 구분

    null == undefined; // 같은 의미
null === undefined; // 타입 다름, 일치 X

  2. 객체 타입 객체: 여러 프로퍼티나 메소드를 같은 이름으로 묶어놓은 일종의 집합체

    *프로퍼티: 다른 값과 연관된 값

    const str = '문자수';
console.log(str.length);

    위 예시에서 문자열에 length라는 프로퍼티 존재, object의 특징

    *메소드: 객체가 가지고 있는 동작, 프로퍼티로 정의된 함수

 JavaScript  Study