(자바스크립트)

  • 줄을 서서
    • HTML 태그에서 직접 정의하는 기능.
    • 응용 프로그램 우선 순위가 가장 높습니다.
    • 코드 중복성이 높고 복잡한 코드는 작성하기 어렵고 구조와 동작이 결합되어 있습니다.
    • 통사론)
<!-- inline.html -->

<!DOCTYPE html>
<html>
<head>
	<meta charset=UTF-8>
	<title>inline 방식</title>
	<link rel="stylesheet" type="text/css" href="http://day27.m/main.css">
</head>
<body>
	<!-- inline은 복잡한 코드를 정의하기 어렵다  -->
	<input type="button" value="click" onclick="alert('inline 방식')" class="btnBorder"/>
	<input type="button" value="click2" class="btnBorder" onclick="var name="기이린"; for(var i=0; i<10; i++){ alert(name+' '+i+'번 안녕') }" />
</body>
</html>

  • 임베디드
    • 의 용도를 정의하는 방법
<!-- embed.html -->

<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8>
    <title>embed 방식</title>
    <link rel="stylesheet" type="text/css" href="http://day27.m/main.css">
    <script type="text/javascript">
        // embed 방식: HTML 코드와 J/S 코드를 분리하여 만들 수 있다. 
        var name = "기이린";
        for (var i = 0; i < 5; i++) {
            alert(name + i + "번 안녕하세요?");
        }
    </script>
</head>
<body>
	오늘은 월요일 입니다. 
</body>
</html>

  • 외부 파일 방법
    • 확장자가 .js인 파일을 만들고 필수 HTML에서 사용하는 방법.
    • 중복이 가장 적은 유형의 코드입니다.
    • JavaScript 라이브러리가 개발되고 배포되는 방법.
    • js 파일의 인코딩과 HTML 파일의 인코딩이 동일해야 합니다.
    • 통사론)
<!-- external.html --> 

<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8>
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="http://day27.m/main.css">
    <!-- 외부파일방식으로  -->
    <script type="text/javascript" src="external.js"> </script>
</head>
<body>
	<input type="button" value="클릭" class="btnBorder" onclick="test()"/>
</body>
</html>
// external.js

function test() {
	var name = "기이린";
	for (var i = 0; i < 5; i++) {
		alert(name + i + "번 안녕하세요?");
	}
}

  • 누르다
    • 경고 창 출력(디버그용) alert( value );
    • HTML 본문 출력 window.document.write(value); // 창 생략 가능 | 문서.쓰기(값)
    • 개발자 도구 콘솔 출력(F12) console.log(value);
    • 즉각적인 var variablename=prompt("메시지"","기본값");
      - 웹 브라우저에서 제공하는 입력값을 받을 수 있는 객체
      - 입력 값은 문자열로 반환됩니다.
      - 입력폼을 생성하지 않고 동적으로 값을 얻기 위해 사용합니다.

<!-- print.html -->

<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8>
    <title>print</title>
    <link rel="stylesheet" type="text/css" href="http://day27.m/main.css">
    <script type="text/javascript">
        var name = "기이린";

        // alert방식 | body보다 먼저 읽힘
        alert(name + " 안녕하세요?"); 

        // document.write | HTML body로 출력 (window는 생략가능 (== java의 object)
        window.document.write(name + " 안녕 JavaScript<br>");	
        document.write(name + "안녕 JavaScript<br>");

        // console.log | 개발자도구에 출력
        console.log(name + " 안녕 자바스크립트<br>")
        
        // prompt 
        var name = prompt("당신의 이름을 입력", "기이린");
    </script>
</head>
<body>
	오늘은 월요일 입니다.
</body>
</html>


경보

document.write() 및 consolelog 창(f12 사용)

즉각적인

  • 논평
    • 스크립트 내에서 사용
    • 코드 실행을 차단하거나 코드 강화를 설명할 때
    • // 한 줄 주석
    • /* 여러 줄 주석 */

  • 변수(변수)
    • 프로그램에 필요한 값을 임시로 저장하여 사용합니다.
    • 변수를 선언할 때 데이터 유형을 직접 지정할 수 없습니다. 데이터 유형은 변수에 값이 할당될 때 동적으로 결정됩니다(동적 할당).
    • 리프트: 하단 라인에 선언된 변수를 상단 라인에서 사용할 수 있습니다.
    • 지역 및 전역 변수를 제공합니다.
      • 지역 변수(함수 내에서만 사용할 수 있는 변수)
        • 첫 번째 선언) var 변수 이름; // 데이터 유형을 설정하지 않습니다.
          2. 값 할당) 변수 이름=값;
          3. 사용값) document.write(변수명); // 출력, 리매핑, 연산
      • 전역 변수(JavaScript의 모든 영역에서 사용할 수 있는 변수)
        • 1. 선언 및 값 할당) 변수명=값;
          2. 사용값) console.log(변수명);

  • ES6에서 지원하는 변수 유형.
    • const: 상수를 생성하는 데 사용됩니다.
      • 구문) 상수 상수 이름=값; // 값 할당은 선언으로만 가능합니다.
    • let :- 1. 리프팅을 방지하는 데 사용됩니다. (존재하지 않는 변수를 사용하는 상황을 방지하기 위함)
      - 2. 동일한 이름으로 여러 변수를 선언하지 않도록 합니다.
      • 구문) let 변수 이름=값;

  • 연산자: 작업을 위해 예약된 코드입니다.
    • 단항 ~, !, +, -, ++, -- 연산자 개체;
    • 산술 연산자 +, -, *, /, %
    • 시프트 연산자(비트 푸시 연산)<, >>, >>>
    • 비교 연산자 >, <, >=, <=, ==, ===, != , !==
      • 개발자가 데이터 유형을 선택하지 않은 언어는 값 비교가 느슨합니다.
        변수 번호=10; // 숫자
        변수 번호2="10"; // 끈

        num == num2 => true (데이터 타입이 달라도 값이 같으면 True)
        num === num2 => false (값은 같지만 데이터 타입이 다르기 때문에 false)

    • 논리 연산자 일반 논리: &&, || 비트 논리: &, |, ^
    • 삼항(조건부) 연산자 ? :
    • 할당 연산자 =, +=, -=, *=, /=, %=,<=, >>=, >>>=, &=, |=, ^=

  • 세금 신고
    • 프로그램의 순차적 흐름을 변경하기 위한 지침.
    • 조건문: if, switch~case = 모든 값을 비교할 수 있습니다.
      • if : 범위 비교가 가능하다.
        if~else: 두 코드 중 하나를 실행해야 하는 경우.
        else ~if (다중 if): 여러 관련 조건을 비교할 때.
      • switch~case: 일치하는 모든 값(문자열, 숫자, 부울)을 비교할 때.
        문법)
        switch(변수명){
        case 상수: 변수 값이 상수와 같으면 명령문을 실행합니다. 부서지다;
        기본값: 비교할 상수가 없으면 명령문을 실행합니다.
        }
    • 루프 문: for, while, do~while = 조건이 충족될 때까지 코드를 반복적으로 실행해야 하는 경우.
      • for: 시작과 끝을 알고 있을 때 사용합니다.
        for(초기값; 조건식; 증감식){
        반복할 문장... .
        }
      • while : 최소 0에서 최대까지 실행합니다.
        원래 값;
        동안(조건식){
        반복되는 진술...;
        증가, 감소 의식;
        }