- 줄을 서서
- 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>
- 논평
- 스크립트 내에서 사용
- 코드 실행을 차단하거나 코드 강화를 설명할 때
- // 한 줄 주석
- /* 여러 줄 주석 */
- 변수(변수)
- 프로그램에 필요한 값을 임시로 저장하여 사용합니다.
- 변수를 선언할 때 데이터 유형을 직접 지정할 수 없습니다. 데이터 유형은 변수에 값이 할당될 때 동적으로 결정됩니다(동적 할당).
- 리프트: 하단 라인에 선언된 변수를 상단 라인에서 사용할 수 있습니다.
- 지역 및 전역 변수를 제공합니다.
- 지역 변수(함수 내에서만 사용할 수 있는 변수)
- 첫 번째 선언) var 변수 이름; // 데이터 유형을 설정하지 않습니다.
2. 값 할당) 변수 이름=값;
3. 사용값) document.write(변수명); // 출력, 리매핑, 연산
- 첫 번째 선언) var 변수 이름; // 데이터 유형을 설정하지 않습니다.
- 전역 변수(JavaScript의 모든 영역에서 사용할 수 있는 변수)
- 1. 선언 및 값 할당) 변수명=값;
2. 사용값) console.log(변수명);
- 1. 선언 및 값 할당) 변수명=값;
- 지역 변수(함수 내에서만 사용할 수 있는 변수)
- ES6에서 지원하는 변수 유형.
- const: 상수를 생성하는 데 사용됩니다.
- 구문) 상수 상수 이름=값; // 값 할당은 선언으로만 가능합니다.
- let :- 1. 리프팅을 방지하는 데 사용됩니다. (존재하지 않는 변수를 사용하는 상황을 방지하기 위함)
- 2. 동일한 이름으로 여러 변수를 선언하지 않도록 합니다.- 구문) let 변수 이름=값;
- const: 상수를 생성하는 데 사용됩니다.
- 연산자: 작업을 위해 예약된 코드입니다.
- 단항 ~, !, +, -, ++, -- 연산자 개체;
- 산술 연산자 +, -, *, /, %
- 시프트 연산자(비트 푸시 연산)<, >>, >>>
- 비교 연산자 >, <, >=, <=, ==, ===, != , !==
- 개발자가 데이터 유형을 선택하지 않은 언어는 값 비교가 느슨합니다.
변수 번호=10; // 숫자
변수 번호2="10"; // 끈num == num2 => true (데이터 타입이 달라도 값이 같으면 True)
num === num2 => false (값은 같지만 데이터 타입이 다르기 때문에 false)
- 개발자가 데이터 유형을 선택하지 않은 언어는 값 비교가 느슨합니다.
- 논리 연산자 일반 논리: &&, || 비트 논리: &, |, ^
- 삼항(조건부) 연산자 ? :
- 할당 연산자 =, +=, -=, *=, /=, %=,<=, >>=, >>>=, &=, |=, ^=
- 세금 신고
- 프로그램의 순차적 흐름을 변경하기 위한 지침.
- 조건문: if, switch~case = 모든 값을 비교할 수 있습니다.
- if : 범위 비교가 가능하다.
if~else: 두 코드 중 하나를 실행해야 하는 경우.
else ~if (다중 if): 여러 관련 조건을 비교할 때. - switch~case: 일치하는 모든 값(문자열, 숫자, 부울)을 비교할 때.
문법)
switch(변수명){
case 상수: 변수 값이 상수와 같으면 명령문을 실행합니다. 부서지다;
기본값: 비교할 상수가 없으면 명령문을 실행합니다.
}
- if : 범위 비교가 가능하다.
- 루프 문: for, while, do~while = 조건이 충족될 때까지 코드를 반복적으로 실행해야 하는 경우.
- for: 시작과 끝을 알고 있을 때 사용합니다.
for(초기값; 조건식; 증감식){
반복할 문장... .
} - while : 최소 0에서 최대까지 실행합니다.
원래 값;
동안(조건식){
반복되는 진술...;
증가, 감소 의식;
}
- for: 시작과 끝을 알고 있을 때 사용합니다.