文章来源于网上收集和自己原创，若侵害到您的权利，请您及时联系并删除~~~

JavaScript 소개
변수, 상수, 데이터 유형, 연산자 등과 같은 기본 개념.
데이터 유형의 변환 및 4가지 산술 연산과 결합하여 프로그래밍하는 방법을 구현할 수 있습니다.

현실 세계의 사물과 컴퓨터의 관계를 이해합니다.
데이터가 무엇인지 이해하고 데이터의 분류를 알아보세요.
변수가 데이터를 저장하는 "컨테이너" 이해
일반 연산자의 사용법을 익히고 우선순위 관계를 이해하세요.
JavaScript 데이터 유형의 암시적 변환 특성을 이해합니다.

1. 소개

1.1 자바스크립트란 무엇인가?

JavaScript란
인간과 컴퓨터의 상호 작용을 달성하기 위해 클라이언트(브라우저)에서 실행되는 프로그래밍 언어입니다. (P4)

기능(무엇을 해야 할까요?)

웹 페이지 특수 효과(웹 페이지가 해당 피드백을 제공할 수 있도록 일부 사용자 행동을 모니터링) MIUI 13 시작·모든 것을 연결
양식 확인(양식 데이터의 적법성 판단) Baidu, 당신은 알게 될 것입니다 (baidu.com)
데이터 상호작용(백그라운드 데이터 획득 및 프런트엔드 렌더링) 1
서버 측 프로그래밍(node.js)

자바스크립트의 구성

여기에 이미지 설명을 삽입하세요.

ECMAScript: js 기본 구문에 대한 핵심 지식을 규정합니다. 예: 변수, 분기 문, 루프 문, 개체 등
웹 API:

페이지 요소 이동, 크기 조정, 추가 및 삭제 등과 같은 DOM 조작 문서

BOM은 페이지 팝업, 창 너비 감지, 브라우저에 데이터 저장 등의 브라우저를 작동합니다.

JavaScript 권위 있는 웹사이트: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

요약:

자바스크립트란 무엇입니까?

JavaScript는 클라이언트(브라우저)에서 실행되는 프로그래밍 언어입니다.
JavaScript의 구성은 무엇입니까?

ECMAScript(기본 구문), 웹 API(DOM, BOM)

경험:
전환 버튼을 클릭한 경우 - HTML+CSS+JS를 경험해 보면 대화형 효과를 얻을 수 있습니다.
여기에 이미지 설명을 삽입하세요.

1.2 도입방법

JavaScript의 도입 방법을 익히고 JavaScript의 역할을 초기에 이해합니다.
여기에 이미지 설명을 삽입하세요.

JavaScript 프로그램은 독립적으로 실행될 수 없으며 브라우저가 JavaScript 코드를 실행하려면 먼저 HTML에 포함되어야 합니다. 태그를 통해 scriptHTML에 JavaScript 코드를 삽입하는 방법에는 세 가지가 있습니다 .

1.2.1 내부 메소드(임베디드)

scriptJavaScript 코드를 태그로 감싸서
html 파일에 직접 작성하고 스크립트 태그로 감싸기
사양: 스크립트 태그는 맨 위에 작성
확장자: 경고('Hello, js') 페이지에 경고 대화 상자가 나타납니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨，欢迎来前端技术！')
  </script>
</body>
</html>

注意

<script>HTML 파일의 하단 근처에 배치하는 이유는 브라우저가 코드가 파일에 있는 순서대로 HTML을 로드하기 때문입니다 .
처음 로드된 JavaScript가 그 아래의 HTML을 수정하려고 하면 HTML이 아직 로드되지 않았기 때문에 실패할 수 있습니다.
따라서 일반적으로 HTML 페이지 하단에 JavaScript 코드를 배치하는 것이 가장 좋은 전략입니다.

1.2.2 외부양식(외부링크형)

일반적으로 JavaScript 코드는 .js로 끝나는 별도의 파일에 작성된 후 script태그의 src속성을 통해 도입됩니다 .

// demo.js
document.write('嗨，欢迎来前端技术！')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

注意: 스크립트 태그가 src 속성을 사용하여 .js 파일을 도입하는 경우 태그의 코드는 무시됩니다! ! ! 다음 코드에 표시된 대로:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	alert(666);  
  </script>
</body>
</html>

1.2.3 인라인

코드는 태그 내부에 작성됩니다.
참고: 이는 단지 이해를 돕기 위한 것이지만 vue 프레임워크는 나중에 이 모드를 사용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
   
  <button onclick="alret('逗你玩儿')"></button>
</body>
</html>

요약

JavaScript의 세 가지 쓰기 위치?

내부

외부

업계 내부
지침:

문서의 끝부분 </body>과 앞쪽에 쓰도록 하세요.

외부 js 태그 중간에 코드를 작성하지 마십시오. 그렇지 않으면 무시됩니다.

연습 1

요구 사항: 외부 및 내부 JavaScript 작성 방법을 모두 사용하십시오. 페이지가 나타납니다.열심히 일하다
시간: 5분
外部：

새 js 파일 만들기 false --> 새 my.js 파일 만들기

alert('努力奋斗')

html 파일에서 참조됨

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
	<script src="../js/my.js"></script> 
</body>
</html>

内部：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
     alert("努力，奋斗")
  </script>
</body>
</html>

1.3 주석과 종료자

주석을 통해 코드 실행을 차단하거나 주석 정보를 추가할 수 있습니다. JavaScript는 두 가지 형태의 주석 구문을 지원합니다.

1.3.1 한 줄 주석

// 한 줄의 코드에 주석을 달 때 사용합니다 .

기능: // 오른쪽 줄의 코드는 무시됩니다.

단축키:ctrl + /

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    // 这种是单行注释的语法
    // 一次只能注释一行
    // 可以重复注释
    document.write('嗨，欢迎学习前端技术！');
  </script>
</body>
</html>

1.3.2 여러 줄 주석

/* */여러 줄의 코드에 주석을 달 때 사용

효과: /*와 */ 사이의 모든 내용이 무시됩니다.

단축키:shift + alt + A

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    /* 这种的是多行注释的语法 */
    /*
    	更常见的多行注释是这种写法
    	在些可以任意换行
    	多少行都可以
      */
    document.write('嗨，欢迎学习前端技术！')
  </script>
</body>
</html>

1.4 터미네이터

JavaScript에서는 ;코드의 끝을 의미하며, 대부분의 경우 생략하고 ;캐리지 리턴(Enter)으로 대체할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 结束符</title>
</head>
<body>
  
  <script> 
    alert(1);
    alert(2);
    alert(1)
    alert(2)
  </script>
</body>
</html>

실제 개발에서는 JavaScript 코드를 작성할 때 종결자를 생략하는 것을 옹호하는 사람들이 많습니다.;

합의사항 : 스타일 통일을 위해 엔딩기호는 문장마다 표기하거나 문장마다 표기하지 않아야 한다(팀 요구사항에 따름).

요약:

JavaScript에서 주석을 작성하는 두 가지 방법은 무엇입니까?

한 줄 주석 //

여러 줄 주석 /* */
JavaScript 종결자에 대한 참고 사항

종결자는 세미콜론입니다.

종결자를 생략할 수 있나요? 예

단, 통일된 문체를 위해 어미기호는 모든 문장에 표기하거나, 모든 문장에 표기하지 않아야 한다.

1.5 입력과 출력

출력과 입력은 인간과 컴퓨터의 상호작용으로도 이해할 수 있는데, 사용자는 키보드, 마우스 등을 통해 컴퓨터에 정보를 입력하고, 컴퓨터는 이를 처리하여 그 결과를 사용자에게 표시하는 입력과정이다. 그리고 출력.

예를 들어, 키보드의 화살표 키를 누르면 위쪽/아래쪽 키로 페이지를 스크롤할 수 있고, 위쪽/아래쪽 키를 누르는 동작을 입력이라고 하며, 페이지를 스크롤하는 것을 출력이라고 합니다.

1.5.1 출력

JavaScript는 사용자 입력을 받은 다음 입력 결과를 출력할 수 있습니다.

alert()、document.wirte()、console.log()

alert()숫자를 예로 들어, 또는 에 document.write()숫자를 입력하면 팝업창 형태로 사용자에게 표시(출력)됩니다.

1.5.2 입력

콘텐츠를 입력 하면 prompt()브라우저에 팝업 창으로 나타나며 일반적으로 사용자에게 일부 콘텐츠를 입력하라는 메시지를 표시합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 输入输出</title>
</head>
<body>
  
  <script> 
    // 1. 输入的任意数字，都会以弹窗形式展示
    document.write('要输出的内容')
    alert('要输出的内容');

    // 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
    prompt('请输入您的姓名:')
  </script>
</body>
</html>

운동 2

시간: 5분
요구사항:

브라우저에 다음과 같은 대화 상자가 나타납니다. Hello JS~ Alert()
페이지 출력 출력: Hello JS~ document.write()
페이지 콘솔 출력: Hello JS~ console.log()

 document.write("你好，js")
 alert("你好,js")
 console.log("你好，js")

JavaScript 코드 실행 순서:

HTML 문서 흐름 순서대로 JavaScript 코드 실행
alert()페이지 렌더링을 건너 prompt()뛰고 먼저 실행됩니다. (현재 이해를 돕기 위해 자세한 실행 과정은 나중에 설명하겠습니다.)

1.6 리터럴

목표: 리터럴이 무엇인지 알 수 있습니다.
컴퓨터 과학에서 리터럴은 컴퓨터의 내용을 설명합니다.
예:

우리의 급여는 1000입니다. 이때 1000은 숫자 그대로입니다.
'학생' 문자열 리터럴
다음에 배우게 될 [] 배열 리터럴 {}, 객체 리터럴 등도 있습니다.

요약하다:

자바스크립트란 무엇입니까?

JavaScript는 다양한 웹 페이지 상호 작용 효과를 얻을 수 있는 프로그래밍 언어입니다.
JavaScript는 어디에 작성하나요?

내부 자바스크립트

내부 JavaScript - 태그 위에 작성됨

외부 JavaScript - 그러나

2. 변수

변수는 컴퓨터에 데이터를 저장하는 '컨테이너'라는 점을 이해하고 변수 선언 방법을 숙지하세요.

여기에 이미지 설명을 삽입하세요.

변수는 컴퓨터에서 데이터를 저장하는 데 사용되는 "컨테이너"입니다. 컴퓨터가 기억을 갖게 해줍니다. 변수에 대한 대중적인 이해는 [특정 값](데이터)을 나타내는 데 [특정 기호]를 사용하는 것입니다.

여기에 이미지 설명을 삽입하세요.

참고: 변수는 데이터 자체가 아니라 값을 저장하기 위한 컨테이너일 뿐입니다. 물건을 담는 데 사용되는 판지 상자로 이해될 수 있습니다.

<script>
  // x 符号代表了 5 这个数值
  x = 5
  // y 符号代表了 6 这个数值
  y = 6
    
  //举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！

  // 将用户输入的内容保存在 num 这个变量（容器）中
  num = prompt('请输入一数字!')

  // 通过 num 变量（容器）将用户输入的内容输出出来
  alert(num)
  document.write(num)
</script>

2.1 진술

변수를 사용하려면 먼저 변수를 만들어야 합니다(변수 선언 또는 변수 정의라고도 함).
let 变量名

변수 선언은 선언 키워드와 변수 이름(식별)의 두 부분으로 구성됩니다.

let은 키워드입니다(let: 허용, 허가, 허용, 원함). 소위 키워드는 변수 선언(정의)을 위해 특별히 시스템에서 제공하는 단어입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // let 变量名
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
  </script>
</body>
</html>

let키워드는 자바스크립트에 내장된 영어 단어(단어 또는 약어)로, 변수 선언의 의미 등 특정 특정 의미를 나타냅니다. 를 보고 나면 let이 코드 줄이 다음과 같은 변수 선언을 의미한다고 생각할 수 있습니다.let age;

let와 둘 다 자바스크립트에서 변수를 선언하는 키워드입니다. 변수 선언에 var사용하는 것을 추천합니다 ! let! !

2.2 할당

변수를 선언(정의)하는 것은 빈 "컨테이너"를 만들고 할당을 통해 이 컨테이너에 데이터를 추가하는 것과 같습니다.
변수를 정의한 후 초기화(값 할당)할 수 있습니다. 변수 이름 뒤에 "="를 붙인 다음 값을 입력하세요.

여기에 이미지 설명을 삽입하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
    // 赋值，将 18 这个数据存入了 age 这个“容器”中
    age = 18
    // 这样 age 的值就成了 18
    document.write(age)
    
    // 也可以声明和赋值同时进行
    let str = 'hello world!'
    alert(str);
  </script>
</body>
</html>

요약

변수를 선언하는 데 어떤 키워드가 사용됩니까?let
변수에 값을 할당하는 데 어떤 기호가 사용됩니까? = 这个符号我们也称为赋值运算符
개발 과정에서 우리는 값을 직접 선언하고 동시에 할당하는 경우가 많습니다.let age = 18

연습 3

필요:

사용자가 구매한 아이템 개수(num)를 20개 저장하는 변수를 선언합니다.
사용자 이름(uname)을 'Zhang San'으로 저장하는 변수를 선언합니다.
콘솔은 두 개의 변수를 차례로 인쇄합니다.

 let num = 18
 let uname = '张三'
 console.log(num,uname)

2.3 변수 업데이트

여기에 이미지 설명을 삽입하세요.

2.4 여러 변수 선언

변수에 값이 할당된 후 간단히 다른 값을 지정하여 업데이트할 수도 있습니다.

let age = 18,uname = 'zhangsan'

let age = 18
let uname = 'zhangsan'

//为了更好的可读性，请一行只声明一个变量。

사례 1
요구 사항: 브라우저에 대화 상자가 나타납니다: 이름을 입력하십시오 페이지에 출력: 방금 입력한 이름
분석:

①: 입력: 사용자 입력 상자: 프롬프트()
②: 내부 처리: 데이터 저장
③: 출력: 페이지 인쇄, document.write()

  let a = "zhangsan"
  document.write("你输入的姓名为：",a)

사례 2
요구 사항:
두 가지 변수가 있습니다. num1에는 10이 포함되고 num2에는 20이 포함됩니다.

마지막으로 20을 포함하는 num1과 10을 포함하는 num2가 됩니다.

목적:

변수를 사용하는 연습
나중에 버블 정렬을 준비하세요.

여기에 이미지 설명을 삽입하세요.

  let num =20,num3=21
  let num2 = 21
  let temp 
  temp = num1
  num1 = num2
  num2 = temp
  console.log(num1,num2)

2.5 변수의 성격

메모리: 컴퓨터에서 데이터가 저장되는 장소로 공간에 해당합니다.
변수의 특성: 프로그램이 데이터를 저장하기 위해 메모리에 적용하는 작은 공간입니다.

여기에 이미지 설명을 삽입하세요.

2.6 키워드

letJavaScript는 변수를 선언(정의)하기 위해 특별한 키워드를 사용하며 var, 이를 사용할 때 몇 가지 세부 사항에 주의해야 합니다.

let다음은 사용할 때 명심해야 할 몇 가지 사항 입니다 .

선언과 할당을 동시에 허용
중복 선언은 허용되지 않습니다.
여러 변수를 동시에 선언하고 값을 할당할 수 있습니다.
JavaScript에 내장된 일부 키워드는 변수 이름으로 사용할 수 없습니다.

var다음은 사용할 때 명심해야 할 몇 가지 사항 입니다 .

선언과 할당을 동시에 허용
중복 선언 허용
여러 변수를 동시에 선언하고 값을 할당할 수 있습니다.

letusing 과 는 대부분의 경우 별 차이가 없으나 var, using보다 엄격 let하므로 var를 사용하는 것이 좋습니다 let. 둘의 차이점에 대해서는 나중에 자세히 소개하겠습니다.

2.7 변수 이름 명명 규칙

변수 이름(식별자)과 관련하여 따라야 할 일련의 규칙이 있습니다.

문자, 숫자, 밑줄, $만 사용할 수 있으며 숫자로 시작할 수 없습니다.
문자는 대소문자를 구분합니다. 예를 들어 Age와 age는 다른 변수입니다.
JavaScript 내부에 사용된 단어(키워드 또는 예약어)는 허용되지 않습니다.
변수에 특정 의미가 있는지 확인하고 단어를 보면 의미를 알 수 있습니다.

사양:

이름은 의미가 있어야 합니다.
작은 낙타 케이스 명명법을 따르십시오.

첫 번째 단어의 첫 글자는 소문자이고, 다음 단어의 첫 글자는 대문자입니다. 예: 사용자 이름

참고: 소위 키워드는 및 let와 같이 JavaScript에서 내부적으로 사용되는 단어를 나타내며 var, 예약어는 현재 JavaScript 내에서 사용되지 않지만 향후 사용될 수 있는 단어를 나타냅니다.

여기에 이미지 설명을 삽입하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 变量名命名规则</title>
</head>
<body>
  
  <script> 
    let age = 18 // 正确
    let age1 = 18 // 正确
    let _age = 18 // 正确

    // let 1age = 18; // 错误，不可以数字开头
    let $age = 18 // 正确
    let Age = 24 // 正确，它与小写的 age 是不同的变量
    // let let = 18; // 错误，let 是关键字
    let int = 123 // 不推荐，int 是保留字
  </script>
</body>
</html>

연습 4

요구사항: 사용자가 이름, 나이, 성별을 입력한 후 웹페이지에 출력하도록 허용합니다
.

①: 팝업 입력 상자(프롬프트): 이름을 입력하세요(uname): 변수와 함께 저장합니다.
② : 팝업입력창(프롬프트) : 나이(나이)를 입력해주세요 : 변수로 저장합니다.
③ : 팝업 입력창(프롬프트) : 성별을 입력해주세요 : 변수로 저장하세요.
④: 페이지는 지금 막 세 개의 변수를 출력(document.write)합니다.

  let uname = prompt("请输入姓名")
  let age = prompt("请输入你的年龄")
  let gender = prompt("请输入你性别")
  document.write(uname,age,gender)

3. 상수

개념: const를 사용하여 선언된 변수를 "상수"라고 합니다.

사용 시나리오: 변수가 절대 변경되지 않는 경우 let 대신 const를 사용하여 선언할 수 있습니다.

명명 규칙: 변수와 일치

const PI = 3.14

참고: 상수는 재할당이 허용되지 않으며 선언 시 할당(초기화)되어야 합니다.

여기에 이미지 설명을 삽입하세요.

let — 이제 실제로 변수가 선언되는 방식을 개발합니다.

var — 이전의 변수 선언 방식에는 많은 문제가 있었습니다.

const — let과 유사하지만 변수 값을 수정할 수 없습니다.

4. 데이터 유형

컴퓨터 세계의 모든 것은 데이터입니다.

JS의 기본 데이터 유형은 무엇입니까?

기본 데이터 유형
참조 데이터 유형

여기에 이미지 설명을 삽입하세요.

컴퓨터 프로그램은 많은 양의 데이터를 처리할 수 있으며, 데이터 관리를 용이하게 하기 위해 데이터는 여러 유형으로 구분됩니다.

4.1 숫자형(Number)

즉, 우리가 수학에서 배우는 숫자는 정수, 소수, 양수, 음수가 될 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    let score = 100 // 正整数
    let price = 12.345 // 小数
    let temperature = -40 // 负数

    document.write(typeof score) // 结果为 number
    document.write(typeof price) // 结果为 number
    document.write(typeof temperature) // 结果为 number
  </script>
</body>
</html>

JavaScript의 숫자 유형은 수학의 숫자와 동일하며 양수, 음수, 소수 등으로 구분됩니다.

注意事项

JS는 약한 데이터 유형이므로 변수가 어떤 유형에 속하는지는 값을 할당한 후에만 확인할 수 있습니다.
Java에는 강력한 데이터 유형이 있습니다. 예를 들어 int a = 3은 정수여야 합니다.

숫자에는 곱셈 *, 나눗셈 /, 덧셈 +, 뺄셈 - 등 다양한 연산이 가능하므로 산술 연산자와 함께 사용되는 경우가 많습니다.

수학 연산자는 산술 연산자라고도 하며 주로 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지(모듈로)를 포함합니다.

+: 합계
-: 차이
*: 곱
/: 몫
%: 모듈러스(나머지): 숫자가 나누어지는지 여부를 나타내는 개발에서 자주 사용됩니다.

목표: JavaScript 산술 연산자 실행의 우선 순위를 알 수 있습니다.

동시에 여러 연산자를 사용하여 프로그램을 작성하면 특정 순서에 따라 실행되며 이를 우선 순위라고 합니다.

자바스크립트에서는 우선순위가 높을수록 먼저 실행되고, 우선순위가 같으면 왼쪽에서 오른쪽으로 실행됩니다.

곱셈, 나눗셈, 나머지의 우선순위는 동일합니다.
덧셈과 뺄셈의 우선순위는 동일합니다
곱셈, 나눗셈, 나머지가 덧셈과 뺄셈보다 우선순위가 높습니다.
()를 사용하여 우선순위를 높입니다.
요약: 먼저 곱하고 나누고 그다음 더하고 빼고 괄호가 있으면 먼저 계산하세요~~~

연습 5

요구 사항: 대화 상자에 원의 반경을 입력하고 원의 면적을 계산하여 페이지에 표시합니다
.

①: 면적의 수학식: π*r²
②: JavaScript 작성으로 변환: 변수 * r * r

const PI = 3.14
let r = +prompt('请输入半径：')
let s = PI * r * r
document.write("圆的面积是",s)
console.log(PI)

NaN은 계산 오류를 나타냅니다. 부정확하거나 정의되지 않은 수학 연산의 결과입니다.

NaN은 끈적합니다. NaN에 대한 모든 작업은 NaN을 반환합니다.

console.log('老师' - 2) // NaN
console.log(NaN + 2) // NaN

4.2 문자열 유형(문자열)

작은따옴표( ''), 큰따옴표( "") 또는 역따옴표로 묶인 데이터를 모두 문자열이라고 합니다. 작은따옴표와 큰따옴표 사이에는 본질적인 차이가 없습니다. 작은따옴표를 사용하는 것이 좋습니다.

지침:

작은따옴표 또는 큰따옴표를 쌍으로 사용해야 하는지 여부
작은따옴표/큰따옴표는 서로 중첩될 수 있지만 자체 안에는 중첩될 수 없습니다.
작은따옴표나 큰따옴표를 출력하는 데 필요한 경우 이스케이프 문자를 사용할 수 있습니다 \.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    let user_name = '小明' // 使用单引号
    let gender = "男" // 使用双引号
    let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了
    let str1 = '' // 这种情况叫空字符串
		
    documeent.write(typeof user_name) // 结果为 string
    documeent.write(typeof gender) // 结果为 string
    documeent.write(typeof str) // 结果为 string
  </script>
</body>
</html>

문자열 연결:

시나리오: + 연산자는 문자열을 연결할 수 있습니다.

공식:数字相加，字符相连

let uanme = '薛之谦'
let song = '认真的雪'
documeent.write(uname + song)  // 薛之谦认真的雪

4.3 템플릿 문자열

문자열과 변수 연결

이전에는 변수를 연결하는 것이 번거로웠지만

documeent.write('大家好，我叫'+ uname + '练习' + age + '年')

문법

``(백틱)
영문입력모드에서 키보드의 탭키 위의 키(1의 왼쪽에 있는 키)를 누릅니다.
콘텐츠를 변수로 연결할 때 ${ }를 사용하여 변수를 래핑합니다.

documeent.write(`大家好，我叫${
      
      uname}练习${
      
      age}年`)

연습 6

요구 사항: 페이지에 대화 상자가 나타나고 이름과 나이를 입력하면 페이지에 다음이 표시됩니다. 안녕하세요 여러분. 제 이름은 xxx이고 올해 나이는 xx입니다.

let name = prompt('请输入您的名字')
let age =  prompt('请输入您的年龄')
documeent.write(`大家好，我叫${
      
      name}，今年${
      
      age}岁了`)

4.4 부울 유형(부울)

true긍정이나 부정을 표현할 때 컴퓨터는 부울(Boolean) 형태의 데이터에 해당하는데, 이는 와 두 개의 고정된 값을 가지며 false, 이는 긍정적인 데이터를 표현 true하고 부정적인 데이터를 표현하는데 사용된다 false.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    //  pink老师帅不帅？回答 是 或 否
    let isCool = true // 是的，摔死了！
    isCool = false // 不，套马杆的汉子！

    document.write(typeof isCool) // 结果为 boolean
  </script>
</body>
</html>

4.5 정의되지 않은 유형(정의되지 않음)

Undefound는 특수한 타입으로 undefed 값이 하나만 있고 변수만 선언합니다. 값이 지정되지 않은 경우 변수의 기본값은 undefine입니다. 일반적으로 변수에 unundefined를 [직접] 지정하는 경우는 거의 없습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 只声明了变量，并末赋值
    let tmp;
    document.write(typeof tmp) // 结果为 undefined
  </script>
</body>
</html>

참고: JavaScript의 변수 값은 변수의 데이터 유형을 결정합니다.

작업 사용 시나리오:

우리는 개발 과정에서 변수를 선언하고 데이터가 전송될 때까지 기다리는 경우가 많습니다.
데이터 전달 여부를 알 수 없는 경우 변수가 정의되지 않았는지 확인하여 사용자가 데이터를 전달했는지 여부를 확인할 수 있습니다.

4.6 빈 유형(null)

JavaScript에서 Null은 "없음", "비어 있음" 또는 "알 수 없는 값"을 나타내는 특수 값일 뿐입니다.

let obj = null
console.log(obj) // null

null과 정의되지 않은 것의 차이점은 다음과 같습니다.

정의되지 않음은 할당이 없음을 의미합니다.
null은 값이 할당되었지만 내용이 비어 있음을 의미합니다.

null 개발 중 사용 시나리오:

공식 설명: null을 아직 생성되지 않은 객체로 처리합니다.
Vernacular: 앞으로는 객체를 저장하는 변수가 있을 텐데 아직 객체가 생성되지 않은 상태입니다.

5. 유형 변환

약한 유형의 언어의 특성을 이해하고 명시적 유형 변환 방법을 숙지합니다.

자바스크립트에서는 데이터를 숫자값, 문자열, 부울값, 정의되지 않음 등의 여러 유형으로 구분하며, 실제 프로그래밍 과정에서 다양한 데이터 유형 간에 변환 관계가 존재합니다.

유형 변환이 필요한 이유
JavaScript는 약한 데이터 유형입니다. JavaScript는 변수가 어떤 데이터 유형에 속하는지 알지 못하며 할당 후에만 명확합니다.

함정: 폼과 프롬프트를 사용하여 얻은 데이터는 기본적으로 문자열 형식이므로 이 때 간단한 추가 작업을 직접 수행할 수 없습니다.

注: typeof 키워드를 통해 데이터 유형을 감지합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 检测 1 是什么类型数据，结果为 number
    document.write(typeof 1)
  </script>
</body>
</html>

5.1 암시적 변환

특정 연산자가 실행되면 시스템은 자동으로 내부적으로 데이터 유형을 변환하는데, 이러한 변환을 암시적 변환이라고 합니다.
규칙:

+숫자의 양면 중 하나가 문자열이면 다른 하나는 문자열로 변환됩니다.
- * / 등과 같은 + 이외의 산술 연산자는 데이터를 숫자 유형으로 변환합니다.

결점:

전환 유형이 명확하지 않으며 경험을 통해서만 결론을 내릴 수 있습니다.

팁:

+ 기호는 양수 기호로 구문 분석될 때 숫자 유형으로 변환될 수 있습니다.
문자열에 데이터를 추가한 결과는 문자열입니다.

여기에 이미지 설명을 삽입하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script> 
    let num = 13 // 数值
    let num2 = '2' // 字符串

    // 结果为 132
    // 原因是将数值 num 转换成了字符串，相当于 '13'
    // 然后 + 将两个字符串拼接到了一起
    console.log(num + num2)

    // 结果为 11
    // 原因是将字符串 num2 转换成了数值，相当于 2
    // 然后数值 13 减去 数值 2
    console.log(num - num2)

    let a = prompt('请输入一个数字')
    let b = prompt('请再输入一个数字')

    alert(a + b);
  </script>
</body>
</html>

注: 데이터 유형의 암시적 변환은 JavaScript의 기능이며 후속 연구에서 접하게 될 것입니다. 지금은 암시적 변환이 무엇인지 이해해야 합니다.

5.2 명시적 변환

프로그램을 작성할 때 시스템 내부의 암시적 변환에 너무 많이 의존하는 것은 엄격하게 금지되지 않습니다. 왜냐하면 암시적 변환의 법칙은 명확하지 않고 대부분 경험에 의해 요약된 법칙에 기초하기 때문입니다. 암시적 변환으로 인해 발생하는 문제를 방지하기 위해 루트 논리에서는 일반적으로 데이터의 명시적 변환이 필요합니다.

5.2.1 번호

명시적 으로 Number숫자 유형으로 변환하면 변환이 실패할 때 결과는 NaN(숫자가 아님), 즉 숫자가 아닙니다.

숫자형으로 변환
문자열 내용에 숫자가 아닌 값이 있는 경우 변환이 실패하면 결과는 NaN(숫자가 아님)이 됩니다. 이는 숫자가 아님을 의미합니다.
NaN은 숫자가 아닌 데이터를 나타내는 숫자 유형의 데이터이기도 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script>
    let t = '12'
    let f = 8

    // 显式将字符串 12 转换成数值 12
    t = Number(t)

    // 检测转换后的类型
    // console.log(typeof t);
    console.log(t + f) // 结果为 20

    // 并不是所有的值都可以被转成数值类型
    let str = 'hello'
    // 将 hello 转成数值是不现实的，当无法转换成
    // 数值时，得到的结果为 NaN （Not a Number）
    console.log(Number(str))
  </script>
</body>
</html>

5.2.2 파싱인트(데이터)

정수만 유지

5.2.3 파싱플로트(데이터)

소수점 유지 가능

5.2.4 문자형으로 변환

문자열(데이터베이스)
변수.toString(기본)

연습 7

2개의 숫자를 입력하고 두 숫자의 합을 계산하여 페이지에 인쇄합니다.

여기에 이미지 설명을 삽입하세요.

  let num1 = +prompt('请输入第一个数')
  let num2 =  +prompt('请输入第二个数')
  // num1 = Number(num1)
  // num2 = Number(num2)
  let sum = num1 + num2
  console.log(sum)

요약하다

유형 변환의 개념은
하나의 데이터 유형을 다른 유형으로 변환하는 것입니다. JavaScript는 약한 데이터 유형입니다. 많은 경우 계산할 때 데이터 유형을 변환해야 합니다.
암시적 변환:
시스템이 자동으로 변환을 수행합니다.
명시적 변환:
변환할 유형을 시스템에 알려주는 코드를 직접 작성합니다. Number
문자열 내용에 숫자가 아닌 경우 NaN이 표시됩니다.String

6. 실제 사례 - 사용자 주문 정보 사례

요구사항: 사용자가 상품 가격, 상품 수량, 배송 주소를 입력하면 주문 정보가 자동으로 인쇄될 수 있다
.

①: 3개의 데이터를 입력해야 하므로 가격 번호 주소를 저장하려면 3개의 변수가 필요합니다.
②: 총 가격 합계를 계산해야 합니다.
③: 페이지를 인쇄하여 양식을 생성하고 데이터를 채웁니다.
④: 템플릿 문자열을 사용하는 것이 가장 좋습니다.

여기에 이미지 설명을 삽입하세요.

JavaScript-[1주차]

1. 소개

1.1 자바스크립트란 무엇인가?

1.2 도입방법

1.2.1 내부 메소드(임베디드)

1.2.2 외부양식(외부링크형)

1.2.3 인라인

연습 1

1.3 주석과 종료자

1.3.1 한 줄 주석

1.3.2 여러 줄 주석

1.4 터미네이터

1.5 입력과 출력

1.5.1 출력

1.5.2 입력

운동 2

1.6 리터럴

2. 변수

2.1 진술

2.2 할당

연습 3

2.3 변수 업데이트

2.4 여러 변수 선언

2.5 변수의 성격

2.6 키워드

2.7 변수 이름 명명 규칙

연습 4

3. 상수

4. 데이터 유형

4.1 숫자형(Number)

연습 5

4.2 문자열 유형(문자열)

4.3 템플릿 문자열

연습 6

4.4 부울 유형(부울)

4.5 정의되지 않은 유형(정의되지 않음)

4.6 빈 유형(null)

5. 유형 변환

5.1 암시적 변환

5.2 명시적 변환

5.2.1 번호

5.2.2 파싱인트(데이터)

5.2.3 파싱플로트(데이터)

5.2.4 문자형으로 변환

연습 7

6. 실제 사례 - 사용자 주문 정보 사례

추천