前端|web学习笔记之JavaScript（一）前端|学习|javascript

前言当刚开始学习JavaScript时，还以为它与Java有什么密不可分的关系，其实JavaScript 与 Java 是两种完全不同的语言，借用老师的一句话就是：它们两个就相当于雷锋和雷峰塔。
学习web，JavaScript是必不可少的一门语言，javascript 是基于对象模型和事件驱动的脚本语言，可以嵌入到 html 中。

文章图片

在学习过程中，刷题是一个很不错的巩固方法，学完即实践，屡试不爽！

牛客网
https://www.nowcoder.com/exam/oj?page=1&tab=HTML/CSS&topicId=260&fromPut=pc_csdncpt_wlxfd_qianduan

简单介绍 JS特点
(1) 交互性：能够包含更多活跃的元素
(2) 安全性：js 不能访问本地磁盘
(3) 跨平台性：所有的浏览器都内置 js 解析器
JS 的作用
(1) js 可以动态的修改（增删）html 及 CSS 的代码
(2) js 可以动态的校验数据
JS 的组成
ECMAScript（核心） BOM(浏览器对象模型)和 DOM(文档对象模型）
JS的引入方式
1：内嵌脚本

2：内部脚本

Insert title here - 锐客网 ="text/javascript"> document.getElementById("btn").onclick = function(){ alert("xxx"); };

需要注意的是< script > 和 < /script > 之间的代码行包含了 JavaScript，JS的代码写哪里都可以，但是在不影响 html的情况下，越晚加载越好。

3：外部脚本
当我们希望在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。可以将 JavaScript 写入一个外部文件之中，然后以 .js 为后缀保存这个文件。
外部脚本先创建一个.js 文件，将 js 代码写在其中，在 html 中使用< script>标签进行引入

="text/javascript" src="https://www.it610.com/article/my.js">

其中： src：引入的 js 的路径
type=“text/javascript”：告知浏览器解析文件的时候使用 js 解析器解析
注意:外部的 js 文件中不能包含< script>标签。在导入外部 js 文件的< script>标签中不能在写 javascript 代码。

比如，我们要写一个js程序，它的html 部分为：

html 内容 - 锐客网 ="text/javascript" src="https://www.it610.com/article/js内容.js">

JS内容为：

window.onload = function() { document.getElementById("btn").onclick = function() { alert("xxx"); }; };

document.getElementById(“”) 返回对拥有指定id的第一个对象的引用。
JS中的alert，作用是在浏览器中弹出一个警告框。

JS的基本语法 1. 变量
javascript 中的变量与我们在 java 中的变量一样,在 javascript 中使用用 var 运算符（variable 缩写）加变量名定义的：

JavaScript 变量名称的规则：
变量对大小写敏感（y 和 Y 是两个不同的变量）
变量必须以字母或下划线或者”$”开始
变量名长度不能超过255个字符。
变量名中不允许使用空格，首个字不能为数字。
不用使用脚本语言中保留的关键字及保留符号作为变量名。

2.原始类型
原始类型，可以理解成是一个值类型。简单说，就是一个字面值，它是不可变的，例如:
number：数字类型
string：字符串类型
boolean：布尔类型
undefined：未定义,该类型只有一个值 undefined.表示的是未初始化的变量
null：空类型,该类型只有一个值 null,表示尚未存在的对象

注意：值 undefined 实际上是从值 null 派生出来的。因此 null==undefined 得到的结果是 true

对变量或值调用 typeof 运算符将返回下列值之一：

变量或值	返回值
Undefined	undefined
Boolean	boolean
Number	number
String	string
Null	object

为什么 typeof 运算符对于 Null 值会返回 “object”? 这实际上是 JavaScript
最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

3：类型转换

类型的转换： number 和 boolean 转成 string toString(); string 转成 number parseInt(); parseFloat();

注意：原始类型都是伪对象所以是可以调用方法的

4.强制转换
测试强制转换成Boolean 类型

var b1 = Boolean(""); //空字符串返回 false var b2 = Boolean("worde")//非空字符串返回 true var b3 = Boolean("10")//非零数字返回true var b3 = Boolean("0")//零数字返回 false var b4 = Boolean("null")//null 返回 false var b5 =Boolean(new object())//对象返回true

测试强制转换成数字类型

操作	返回值
Number（false）	0
Number（true）	1
Number（undefined）	NaN
Number（null)	0
Number(“1.2”)	1.2
Number(“12”)	12
Number(“1.2.3”)	NaN
Number(new objet())	NaN
Number(12)	12

对于强制转换成数字类型：
如果是纯数字的字符串的话，则直接转换成数字
如果字符串中含有非数字的内容的话，会转换成NaN
如果字符串是一个空串，或者都是空格的话，会转换成 0

测试强制转换成字符串

toString() 方法可把数组转换为字符串，并返回结果。
语法 arrayObject.toString()

var s1 = String(null); //返回 null var sNull = null; var s2 = sNull.toString(); //引发错误

5.引用类型
引用类型通常叫做类(class),也就是说，遇到引用值，所处理的就是对象。从传统意义上来说，ECMAScript 并不真正具有类。ECMAScript 定义了“对象定义”，逻辑上等价于其他程序设计语言中的类。对象是由 new 运算符加上要实例化的对象的名字创建的

java： Object obj = new Object();
js: var obj = new Object();

6.运算符
(1) 赋值运算符 var x = 5;
(2) 判断运算符 >、<、>=、<=、!=(也可写成<>)、==(全等代表值与类型都一致)
(3) 算数运算符 +、-、×、/、%

如果一个加数是字符串的话就进行字符串连接
如果是字符串数字在进行类似减法的运算的时候
先把字符串转换成数字然后在运算

(4) 逻辑运算符：&& || ！
(5) void 运算符： < a href=“javascript:void(0); ” >dianji< /a>
(6) 类型运算符：
typeof：判断数据类型
instanceof：预测数据类型
(7)三元运算符：三元运算符和 Java 差不多,例如
var max=(num1 > num2)? num1:num2;
总结以上就是该文章给大家带来的笔记分享，后续会有更多学习js的学习笔记，希望能和大家共同学习交流！
实践方能固真知，点击进入刷题叭~