기사 디렉토리

1. 기본 소개 및 개발
2. JS 작성 및 실행 방법
3. 이용자에게 정보를 제공하는 방법
4. 데이터 유형 및 탐지 방법
5. 변수의 개념과 활용
7. 연산자
여덟 번째, 프로그래밍 습관
9. 연습
10. 확장

1. 기본 소개 및 개발

웹페이지 구성:
- html: 하이퍼텍스트 마크업 언어, 웹 페이지의 구조
- CSS: 웹페이지를 장식하는 CSS(Cascading Style Sheet)
- javascript: 스크립팅 언어이며 웹페이지의 동작입니다.
  - 애니메이션이 포함된 페이지: 예
  - 이동은 반드시 애니메이션, 동적 페이지의 예를 참조하는 것은 아닙니다.
자바스크립트의 역사
JavaScript의 구성: ECMAScript, BOM, DOM
- ECMAScript는 표준 . 구문, 유형, 명령문, 키워드, 예약된 하위, 연산자, 개체를 지정합니다. (법률과 동일)
- BOM(Browser Object Model) : 브라우저 창의 브라우저 개체 모델에 접근하여 브라우저 창에서 작업할 수 있습니다.
- DOM(Document Object Type) : DOM은 전체 페이지를 다층 노드 구조로 매핑합니다. HTML 페이지는 특정 유형의 노드로 구성되며 이러한 노드에는 다양한 유형의 데이터가 포함됩니다.
Javascript와 HTML5의 관계
HTML5는 새로운 기술로, 현재 우리가 알고 있는 HTML5는 전부 태그 몇 개뿐이지만, JS를 사용하면 이러한 태그의 심층 확장 기능을 구현할 수 있습니다.
예를 들어 video 태그는 단순한 태그로 이해되지만 실제로 video 태그에는 더 깊은 확장 기능이 있습니다.

2. JS 작성 및 실행 방법

JS는 html의 실행에도 의존해야 하는 스크립팅 언어로 인라인(inline), 내부, 외부의 세 가지 작성 방법이 있습니다.

인라인: html 태그의 속성으로 존재합니다.
```
<button onclick="alert('hello')"></button>
或
<button onclick="fn()"></button>
<script>
	function fn(){
        
        
		alert("world")
	}
</script>
```
- 더 이상 사용되지 않으며 구조와 스타일을 분리해야 합니다.
- 동작 트리거가 필요하며 자동으로 실행할 수 없습니다.
- 여러 기능 모듈을 재사용하고 유지하는 것이 불편함
내부: html 파일의 스크립트 태그에 작성됨
```
<script>
	document.querySelector(".box").onclick = function(){
        
        
		alert("js1");
	}
	// 或
	alert('js2')
</script>
```
- 동작에 의해 트리거될 수 없으며 자동으로 실행됩니다.
- 구조와 동작이 완전히 분리되지 않아 여러 페이지 모듈 간의 기능 재사용 및 유지 관리가 불편합니다.
외부: js 파일에 작성한 후 html 파일에 있는 스크립트의 src를 사용하여 가져옵니다.
```
// js文件
alert("hello world");
```
```
<script src="index.js"></script>
```
- 동작에 의해 트리거될 수 없으며 자동으로 실행됩니다.
- 구조와 동작의 분리로 기능의 재사용 및 유지 관리가 용이합니다.
- 권장 용도
src 속성은 JavaScript 파일에 연결되며 파일 확장자는 index.js와 같이 .js입니다.
잘못된 방법 : 내부 및 외부, 스크립트 태그 사용, 허용되지 않음! ! !
```
<script src="路径">
	//在script标签内写js脚本
</script>
```
실행 방법 및 실행 순서:
1. 인라인은 동작에 의해서만 트리거될 수 있으며 트리거되지 않으면 실행되지 않습니다.
2. 내부 및 외부, 쓰기 먼저 실행 먼저
3. 스크립트 태그는 어디에나 위치할 수 있지만 일반적으로 body의 끝이나 종료 태그 뒤에 위치하며, head의 끝 부분에도 위치할 수 있습니다.

3. 이용자에게 정보를 제공하는 방법

페이지에 콘텐츠를 인쇄합니다.
```
document.write("这是一些文本内容");
```
태그를 직접 구문 분석할 수 있습니다.
```
document.write("<strong>加粗的内容</strong>");
```
이스케이프 문자:
```
// &lt;  ====  <
// &gt;  ====  >
document.write("&lt;strong&gt;这是一些加粗的内容</strong>");
```
document.write인쇄할 내용을 강제로 문자로 변환하므로 일부 데이터 유형에서는 내용(객체, 함수 등)을 직접 볼 수 없으며
document.write실행 타이밍에 큰 주의를 기울이게 됩니다. 페이지가 완전히 로드되기 전에 실행하면 페이지의 내용을 인쇄하는 것이 일반적입니다. 페이지가 로드된 후에 실행하면 전체 문서를 덮어씁니다.
브라우저 콘솔에 정보 인쇄
```
console.log("hello world")
```
console브라우저 객체이며 그 외에도 log정보를 인쇄하는 방법이 많이 있습니다.
console인쇄 시 원본 데이터 형식을 유지하며 데이터를 강제로 변환하지 않습니다.
console여러 인쇄 데이터를 수신하여 사용할 수 있습니다. ,분리는
console가능합니다 . 이는 데이터의 참조 주소를 기준으로 하며, 향후 비동기 데이터를 보려면 프로그램 프로세스에 대한 이해가 필요하며, 그렇지 않으면 현재 데이터가 현재 데이터인지 판단하지 못할 수도 있습니다. 인쇄
console위치는 DOM 범위 내에 있지 않은 브라우저의 콘솔이므로 DOM에 영향을 주지 않고 태그를 구문 분석할 수 없습니다.
팝업 상자에 정보가 표시됩니다.
```
alert("hello")
```
alert브라우저의 팝업 상자에 정보가 표시되고
alert인쇄할 내용이 강제로 문자로 변환되므로 일부 데이터 형식에서는 내용(예: 개체, 함수)을 직접 볼 수 없으며 인쇄가 중지됩니다
alert. 코드 로드 중
브라우저 분석 브라우저 분석 코드 순서(위에서 아래로, 왼쪽에서 오른쪽으로)

4. 데이터 유형 및 탐지 방법

데이터 유형: 컴퓨터에서 처리해야 하는 모든 정보를 데이터라고 할 수 있으며, 데이터는 컴퓨터의 메모리에 저장됩니다. 컴퓨터는 0과 1만 인식할 수 있으므로 다양한 유형의 데이터를 이스케이프해야 합니다. 결과적으로 필요한 공간이 다릅니다.컴퓨터가 데이터를 저장하기 쉽도록 JS는 다양한 데이터 유형으로 나뉩니다.
- 문자 유형(문자열): 모든 데이터는 따옴표로 묶어야 합니다(single ', double ", reverse`). 메타데이터의 일종인 데이터의 가장 독창적인 형식을 나타냅니다.
- 숫자 유형(숫자): 다음을 포함한 숫자를 나타냅니다 0，1，2，3，4，5，6，7，8，9，NaN.
- 부울(boolean): 다음을 포함하여 참 또는 거짓을 의미 합니다 true.false
- 객체 유형(object): 데이터의 패키징, 여러 데이터의 집합을 나타냅니다.
  - []순서가 지정된 데이터 컬렉션은 다음과 같은 배열 객체를 나타내기 위해 대괄호 로 묶입니다 .[值1,值2,值3]
  - 순서가 지정되지 않은 데이터 컬렉션은 {}다음과 같이 객체 객체를 나타내기 위해 중괄호로 묶입니다.{键1:值1,键2:值2}
- 함수 유형(function): 특정 기능을 구현하는 코드 세그먼트의 패키징을 나타냅니다. 일반적으로 function(){}나타내기 위해 사용됩니다.
- 정의되지 않음(undefine): 변수가 선언되었지만 값이 할당되지 않은 특수 유형은 입니다 undefined.
- null(object): null을 가리키고 포인터가 하나만 있지만 데이터를 가리키지 않고 typeof로 개체가 감지됩니다.
- 기호(symbol): 사전의 상태를 나타내는 데 사용되는 문자형 데이터, ES6의 새로운 데이터 유형 *
데이터 유형 감지 - 키워드:typeof
- typeof 要检测的数据또는typeof(要检测的数据)
  - 실행 결과는 해당 데이터 종류의 워드마크이며, 마크 자체가 문자 데이터로 표시됩니다.
  - typeof테스트할 때 나오는 것은 null이므로 구별할 수 없습니다 *objecttypeofnull

5. 변수의 개념과 활용

변수: 데이터를 저장하는 데 사용되는 컨테이너입니다. 다양한 변수는 다양한 데이터를 저장합니다. 변수는 저장된 데이터 유형에 따라 유형이 다릅니다.
변수 만들기 - 키워드:var
- 문법:var a
변수 할당
- 할당 연산자:=
- 대입 연산자의 왼쪽은 변수이고, 대입 연산자의 오른쪽은 데이터 또는 기타 변수입니다.
- 할당 연산자는 오른쪽의 데이터나 변수를 왼쪽의 변수 이름에 저장하는 데 사용됩니다.
- 문법:a = "hello"
사용 편의성을 위해 변수 선언을 다음과 같이 축약할 수도 있습니다.
- 선언 시 즉시 할당됨:var abc = 123;
- 여러 변수를 선언하고 값을 할당합니다.var abc, qwe=10, asd=20, zxc;
변수 이름 명명 규칙
- 문자나 밑줄 또는 $로 시작해야 하며 , , , 와
  같은 변수에는 특수 문자가 허용되지 않습니다._abc$123abc123msg
- 키워드는 허용되지 않습니다. 예약어(아래 표 참조)
  : ~~var~~, ~~typeof~~,
- 다음과 같이 최대한 의미를 갖도록 노력하세요 age.sexname
- , ,
  와 같이 데이터 유형의 첫 글자를 접두사로 사용해 보십시오.aChildoImgsTitle
- 단어 조합, 낙타 표기 사용
  - 큰 낙타 표기: , ,
    등 첫 단어의 첫 글자를 대문자로 표기합니다.CarFactoryCreateTableAddEvent
  - 소문자 카멜 표기: , ,
    등 두 번째 단어의 첫 글자를 대문자로 표기합니다.productDetailListbannerImgNamemenuTitle
- 팁: 개인화된 접두사를 사용하여 다음
  과 같은 민감한 키워드 및 예약어를 피하세요 .yslTypeof_var$this
변수의 원리: 컴퓨터 프로그램은 메모리에서 실행되며 var키워드를 사용하여 변수를 선언하면 컴퓨터는 메모리에서 공간을 나누어 다양한 유형의 데이터를 저장할 준비를 합니다.
- 메모리의 저장 형태에 따르면:
키워드 및 예약어
키워드:


부서지다	하다	대신에	유형	사례	또 다른
새로운	~였다	잡다	마지막으로	반품	무효의
계속하다	~을 위한	스위치	~하는 동안	디버거*	기능
이것	~와 함께	기본	만약에	던지다	삭제
~에	노력하다

예약어(향후 키워드로 존재할 수 있음):


추상적인	열거형	정수	짧은	부울	내보내다
상호 작용	공전	바이트	연장하다	긴	감독자
숯	결정적인	토종의	동기화됨	수업	뜨다
패키지	던진다	const	이동	사적인	과도 현상
디버거	구현하다	보호됨	휘발성 물질	더블	수입
공공의	맨 위	맨 아래	왼쪽	오른쪽

팁: 공식적으로 정의된 함수(비키워드 또는 예약어)가 있는 메서드나 함수의 경우 이를 가리거나 다시 작성하려는 의도가 아니라면 경고, 콘솔, 정렬, 반복 등 변수 이름으로 직접 사용하지 마세요.
버튼처럼 의미가 너무 많은 단어는 직접 사용하는 것을 권장하지 않으며,
myButton, backButton, _button 등과 같이 접두사를 추가한 후 사용할 수 있습니다.

7. 연산자

JS의 일반적인 연산자에는 산술, 할당, 관계, 논리, 자체 증가 및 자체 감소 등이 포함됩니다.

산술 연산자: +, -, *, /,%
```
var a = 1, b = 2;
console.log(a + b);		// 3
console.log(a - b);		// -1
console.log(a * b);		// 2
console.log(a / b);		// 0.5
console.log(a % b);		// 1

// + 两边只要有一边是字符，运算过程就是字符串的拼接，结果必然是字符型数据
// - * / % 会将两边的数据，先隐式转成数值，再进行运算（能转则转，不能转得到NaN）

var a = "1", b = "2";
console.log(a * b);		// 2
console.log(a / b);		// 0.5
console.log(a - b);		// -1
console.log(a + b);		// "12"	  *****
```
+, js에는 두 가지 기능 계층이 있습니다.
1. 산술 간의 덧셈;
2. 문자열 연결;
  js 실행 중 +기호가 발견되면 실행 프로세스 중에 먼저 더하기 기호 양쪽의 데이터 유형을 감지하고, 문자 유형이 발견되면 문자 연결입니다 .
js에는 우리 개념의 연산자와 다른 연산자가 많이 있습니다.
예를 들어, = == ===
서로 다른 데이터 유형 간의 연산 결과가 우리가 기대한 것과 다를 수 있습니다.
우리가 주목해야 할 것은 이러한 서로 다른 부분입니다.

관계 연산자: <, <=, >, >=, !=, ==, !==,===

var num1 = 108;
var num2 = 36;
console.log(num1 > num2);		// true
console.log(num1 >= num2);		// true
console.log(num1 < num2);		// false
console.log(num1 <= num2);		// false

var num1 = "108";
var num2 = 36;
console.log(num1 > num2);		// true
console.log(num1 >= num2);		// true
console.log(num1 < num2);		// false
console.log(num1 <= num2);		// false

// 两边只要有一边是数值，另一边也会转成数值，再进行运算

var num1 = "108";
var num2 = "36";
console.log(num1 > num2);		// false
console.log(num1 >= num2);		// false
console.log(num1 < num2);		// true
console.log(num1 <= num2);		// true

var num1 = "a";
var num2 = "A";
console.log(num1 > num2);		// true
console.log(num1 >= num2);		// true
console.log(num1 < num2);		// false
console.log(num1 <= num2);		// false

// 两边都是字符，按照字符的比较规则：逐位按照ASCII码进行比较
	// a~z：97~122
	// A~Z：65~90

var num1 = "108";
var num2 = 108;
console.log(num1 == num2);		// true
console.log(num1 != num2);		// false
// 两边只要有一边是数值，另一边也会转成数值，再进行运算

console.log(num1 === num2);		// false
console.log(num1 !== num2);		// true
// 没有数据类型转换，不仅比较数据，还比较类型

>, >=, <, <=, ==, !=: 두 변 중 하나가 값이면 다른 쪽도 값으로 변환된 후 연산이 수행됩니다.

===, !==: 데이터 유형 변환 없음, 데이터 비교뿐만 아니라 유형 비교도 수행

양면에 문자가 있고, 문자의 비교규칙은 문자코드(ASCII)에 따라 비트 단위로 비교하는 것입니다.

작업 결과는 부울 값입니다.

논리 연산자: &&, ||,!

// ||：或的两边只要有一个值为true，结果就是true；
console.log(true || false);		// true
console.log(false || true);		// true
console.log(true || true);		// true
console.log(false || false);	// false

// &&：且的两边只要有一个值为false，结果就是false；
console.log(true && false);		// false
console.log(false && true);		// false
console.log(true && true);		// true
console.log(false && false);	// false

// !：非，取反
console.log(!true);				// false
console.log(!false);			// true

||: 또는 양쪽에 값이 있으면 true결과는 입니다 true.

&&: 및 의 양쪽에 값이 있는 한 false결과는 입니다 false.

!: 아니, 부정하다

일반적으로 Boolean 연산에 사용되며 결과는 일반적으로 Boolean 입니다.

할당 연산자: =, +=, -=, *=, /=,%=

var num1 = 10;
num1 += 3;
console.log(num1);		// 13

var num2 = 10;
num2 -= 3;
console.log(num2);		// 7

var num3 = 10;
num3 *= 3;
console.log(num3);		// 30

var num4 = 10;
num4 /= 3;
console.log(num4);		// 3.333333...

var num5 = 10;
num5 %= 3;
console.log(num5);		// 1

=
=숫자 오른쪽에 있는 데이터나 변수를 왼쪽 변수에 저장

+=, -=, *=, /=, %=
규칙: 산술 연산자 참조

자기 증가 및 자기 감소 연산: ++,--
- ++: 변수의 원래 값에 1을 더함을 나타냅니다.
- --: 변수의 원래 값이 1만큼 감소함을 나타냅니다.
```
// 后自增或后自减：先使用原数据，再进行自增或自减计算
var a = 1;
console.log(a++);		// 1
console.log(a);			// 2

var b = 1;
console.log(b--);		// 1
console.log(b);			// 0

// 前自增或前自减：先进行自增或自减，再使用计算之后的数据
var a = 1;
console.log(++a);		// 2
console.log(a);			// 2

var b = 1;
console.log(--b);		// 0
console.log(b);			// 0
```
사전 증가와 사후 증가 사이에는 본질적인 차이가 있습니다. 둘 다 자신에게 1을 더합니다. 차이점은 다음과 같습니다.
1. 사전 증가: (+1)을 먼저 계산하고 계산된 값을 사용합니다.
2. 사후 증분: 먼저 값을 사용한 다음 (+1)을 계산합니다.
사전 감소 및 사후 감소에 대해 위와 동일

연산자 우선순위: 算术> 比较> 逻辑>赋值

// 已知一个年份2010，判断是否是闰年
// 闰年：1. 能被4整除，不能被100整除；2. 能直接被400整除
var year = 2012;

var flag = year % 4 === 0 && year % 100 !==0 || year % 400 === 0;

console.log(flag);

여덟 번째, 프로그래밍 습관

구문 끝에 세미콜론을 추가합니다. 세미콜론을 추가하지 않아도 JS 구문에는 문제가 없지만 세미콜론을 생략하지 않는 것이 좋습니다. 세미콜론을 추가한 후 소프트웨어 압축을 사용할 수 있습니다.
좋은 프로그래밍 습관입니다(JavaScript에 대한 최종 가이드)

9. 연습

위의 모든 지식 포인트에 대한 숙련도
홍수에 저항하기 위해 군인들은 89시간 동안 계속해서 싸웠는데, 며칠, 몇 시간을 계산하도록 프로그램되어 있나요?
Xiao Ming은 미국으로 여행을 갈 예정인데 그곳의 기온은 화씨로 기록되어 있습니다.
화씨(80도)를 섭씨로 변환하고 해당 온도를 화씨와 섭씨로 별도로 표시하는 프로그램이 필요합니다.
팁: 섭씨와 화씨의 변환 공식은 다음과 같습니다: 섭씨 = 5/9.0*(화씨-32)
k=10이었고;
var 합계 = k++ + ++k +k +k++;
console.log(k);
console.log(k);
반지름이 80cm인 원의 면적을 계산합니다. 페이지로 인쇄합니다. 공식: π * r * r. 가정: π = 3.1415
원의 둘레를 계산합니다. 공식: 2 * π * r
각도를 라디안으로, 공식: arc = π / 180 * deg

10. 확장

확장 1: 부동 소수점 숫자에 관하여:
컴퓨터는 계산 과정에서 올바른 이진 부동 소수점 숫자로 계산을 수행하지만 우리가 십진수를 입력하면 두 숫자가 항상 정확하게 변환되는 것은 아니며 때로는 올바른 값이 얻어지는 경우도 있습니다. 결과, 하지만 때로는 운이 좋지 않을 때도 있습니다.

console.log(0.6+0.2);		// 0.8
console.log(0.7+0.1);		// 0.7999999999999999

확장 읽기: 컴퓨터에서 부동 소수점 숫자의 정밀 계산에 대해

확장 2: NaN의 개념 및 응용
NaN: 특수한 유형의 숫자로 잘못된 수치 연산 결과 또는 예상치 못한 변환 숫자를 나타냅니다. NaN은 어떤 데이터와도 동일하지 않습니다. 자아는 그 자체와 같지 않습니다.

console.log(NaN == NaN);	// false

var a = 0;
var b;
var c = a + b;
console.log(c);				// NaN

NaN을 판단하는 방법은
괄호 안의 값이 NaN인지 판단하여 NaN이면 true를 반환하고, 그렇지 않으면 false를 반환하는 isNaN() 함수를 사용할 수 있습니다.

var a = 0;
var b;
var c = a + b;
console.log(c);				// NaN
console.log(isNaN(c));		// true

// 注意：isNaN内会发生隐式类型转换
// 当数据能够被严格转成数值时，isNaN的结果为false，表示不是NaN（见下章：数据类型的转换）
console.log(isNaN( "hello" ));	// true
console.log(isNaN( "123a" ));	// true
console.log(isNaN( "123" ));	// false

1. 자바스크립트의 기본 문법