Document

JavaScript

2023-08-15
dfer
337
javascript CSDN

计算机编程基础

编程语言 vs 标记语言

编程语言：有很强的逻辑、行为能力。是主动的。如 PHP、JS、Go 等
标记语言：不用于向计算机发出指令，常用于格式化和链接，其存在是用来被读取的。是被动的。如 HTML 等

计算机基础

硬件

分为输入设备、输出设备、CPU、硬盘 / 外存、内存 5大部分
1.硬盘和内存负责存储数据，硬盘永久存储，内存暂时存储
2.所有程序都放在硬盘存储
3.内存比外存速度快的原因：内存-电，硬盘-机械

初识 JavaScript

JavaScript：运行在客户端的脚本语言（Script-脚本）
1.脚本语言：不需要编译，运行过程中由 js解释器 / js引擎逐行进行解释并执行
2.不仅仅做前端，也可以做服务端（Node.js 服务端编程）
JS 作用：
表单动态校验 / 密码强度检测（JS 产生最初的目的）、网页特效、服务端开发（Node.js）、桌面程序（Electron）、App（Cordova）、控制硬件-物联网（Ruff）、游戏开发（cocos2d-js）
浏览器执行 JS 简介
1.浏览器两部分：渲染引擎、JS 引擎
①渲染引擎 / 内核：用来解析 HTML、CSS，如 chrome 浏览器的 blink，老版本的 webkit
②JS 引擎 / JS 解释器，用来读取网页中的 JS 代码，对其处理后运行，如 chrome 浏览器的 V8（最快的 JS引擎）
2.浏览器本身不会执行 JS 代码，而是通过内置 JS引擎逐行执行代码
JS 组成：ECMAScript、DOM、BOM
1.ECMAScript：JS语法
①ECMAScript = JavaScript（网景公司） + JScript（微软公司）
②ECMAScript 规定了 JS 的编程语法和核心知识，是所有浏览器厂商共同遵守的一套 JS 语法工业标准
2.DOM：页面文档对象模型
①W3C 组织推荐的处理可扩展标记语言的标准编程接口
②通过 DOM 提供的接口可以对页面上的各种元素进行操作，如大小、位置、颜色等
3.BOM：浏览器对象模型
①提供独立于内容的，可以与浏览器窗口进行互动的对象结构
②通过 BOM 可以操作浏览器窗口，如弹出框、控制浏览器跳转、获取分辨率等

JS 三种书写位置：行内、内嵌、外部

行内：
1.代码写在HTML标签的事件属性中（以 on 开头的属性）
2.HTML中用双引号，JS中用单引号
3.尽量避免使用

<!DOCTYPE html>
<html>
	<body>
		<input type="button" name="" id="" value="唐伯虎" onclick="alert('秋香姐')" />
	</body>
</html>

内嵌式
最常用

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			alert('沙漠骆驼');
		</script>
	</head>
</html>

外部式
引用外部 JS 文件的 script 标签中间不可以写代码

// 01.html
<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/01.js">
			// 此处不允许写代码
		</script>
	</head>
</html>

// 01.js
alert('如果我是DJ，你还爱我吗？');

JS 注释

单行注释：//
多行注释：/* */

JS 输入输出语句

prompt(info);
alert(msg);
浏览器弹出警示框

console.log(msg);
浏览器控制台打印输出信息

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			prompt('请输入您的年龄');
			alert('计算的结果是');
			console.log('我是程序员能看到的');
		</script>
	</head>
</html>

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			var uNmae = prompt('请输入您的姓名');
			alert(uNmae);
		</script>
	</head>
</html>

变量

变量概念

程序在内存中申请的一块用来存放数据的空间

变量的使用

声明变量
var age;
赋值
var age = 10;
变量的初始化：声明 + 赋值
var myName = 10;
同时声明多个变量
var myName = '旗木卡卡西', address = '火影村', age = 30, email = 'kakaxi@itcast.cn', wage = 2000;
声明变量的特殊情况
1.只声明，不赋值就使用。undefined
2.不声明，不赋值就使用。报错
3.不声明，只赋值就使用。允许，但会变成全局变量

变量命名规范

由字母（严格区分大小写）、数字（不能以数字开头）、下划线、美元符号组成
遵守驼峰命名法
尽量避免用 name 作为变量名

数据类型

数据类型简介

变量的数据类型
1.JS是一种弱类型 / 动态语言，不用提前声明变量的类型。在程序运行过程中，类型由 JS引擎 根据 = 右边值的数据类型判断
2.JS拥有动态类型，即相同的变量可用作不同的类型
数据类型的分类
1.简单数据类型（数字型 Number、字符串型 String、布尔型 Boolean、Undefined、Null）
2.复杂数据类型（Object）

简单数据类型

数字型 Number
1.八进制：以0开头；十六进制：以0x开头
2.范围：
Number.MAX_VALUE：1.7976931348623157e+308
Number.MIN_VALUE：5e-324
3.三个特殊值
Infinity、-Infinity、NaN（Not a Number 非数值）
4.isNaN()
用来判断一个变量是否为非数字的类型
```
<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			console.log(isNaN(21))  // false
			console.log(isNaN('a'))  // true
		</script>
	</head>
</html>
```
字符串型 String
1.单引号（推荐） / 双引号【因为 HTML 标签里的属性使用的双引号，故JS中推荐使用单引号】
2.引号嵌套：外双内单 / 外单内双
3.转义符：\n 换行符、\\ 斜杠\、\' 单引号、\" 双引号、\t tab缩进、\b 空格
4.长度：length
```
<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			var str = 'lulu'
			alert(str.length)
		</script>
	</head>
</html>
```
5.字符串拼接
字符串 + 任何类型 = 新字符串【拼接前会把与字符串相加的任何类型转成字符串】

布尔型 Boolean
1.布尔型和数字型相加时，true的值为1，false的值为0

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			console.log(true + 1);  // 2
			console.log(false + 1);  // 1
		</script>
	</head>
</html>

Undefined 和 Null
1.一个只声明，未赋值的变量默认值为 undefined

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			var variable;
			console.log(variable);  // undefined
			console.log('你好' + variable);  //你好undefined
			console.log(11 + variable);  // NaN
			console.log(true + variable);  //NaN
		</script>
	</head>
</html>

2.一个声明变量给 null 值，里面存的值为空

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			var variable = null;
			console.log(variable);  // null
			console.log('你好' + variable);  //你好null
			console.log(11 + variable);  // 11
			console.log(true + variable);  //1
		</script>
	</head>
</html>

获取变量数据类型

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			var num = 10;
			console.log(typeof num);  // number
			var str = 'lulu';
			console.log(typeof str);  //string
			var flag = true;
			console.log(typeof flag);  //boolean
			var vari;
			console.log(typeof vari);  //undefined
			var timer = null;
			console.log(typeof timer);  // object
			var age = prompt('请输入您的年龄');
			console.log(typeof age);  // string
		</script>
	</head>
</html>

数据类型转换

什么是数据类型转换
使用表单、prompt 获取的数据默认是 string 类型，若需进行加法运算，则需进行数据类型转换
常用三种方式的转换
1.转换为 string 类型
2.转换为 number 类型
3.转换为 boolean 类型

上一篇： HTML 面试问题及

下一篇：为什么人们不喜欢 P