JS创建简单的脚本_IT分享知识网

大家好，欢迎来到IT知识分享网。

1.在web页面中添加JavaScript

第一种方法是将JavaScript直接包含在HTML文件中

<script> javascript语句 </script>

第二种方法是把JavaScript语句单独保存到单独的文件，然后利用src属性调用

<script src='a.js'></script> //双引号单引号都可以

如果js文件与调用脚本不在通过一个文件夹，我们就需要绝对路径或相对路径

以上两种方法，可以写在body标签中，也可以在head标签

2.JavaScript语句

第一种书写方式：语句一

语句二

第二种：语句一；语句二

为了增加代码的可读性通常结合书上述两种方法的优点

语句一；

语句二；

代码注释

行注释：//

块注释：/*……*/

在大部分的编译器中行注释的快捷键是ctrl+/，块注释的快捷键是ctrl+shift+/

3.变量

变量可以看作一种被命名的分类容器，用于保存特定的数据。数据可以是整数或小数、字符串或其他数据类型

变量的命名规则可以是字母、数字、美元符号和下划线但是开头不允许使用数字，而且JavaScript对于大小写是敏感的，所以变量y和Y是不一样的

和其他编程语言不同的是在给变量赋值之前JavaScript不需要进行声明，但是声明变量是一个好习惯。

声明变量的命令是var

例如：

var a; a='avd';//可以是单引号也可以是双引号 //也可以在声明的同时进行赋值 var b='avsd';

目前来说var是一种较老派的声明方法，在最新的JavaScript使用的声明是let，详细的介绍请转到let的使用

4.操作符

4.1算术操作符

JavaScript可以使用标准的算术操作符进行加减乘除

以下仅以加号举例：

1.var a=4+3; 2.var a=4; var b=3; var c=a+b;

JavaScript同样也有取余运算“%”和自增（++）、自减（–）以及混合赋值运算符的使用例如

+=、/=、%=

操作符优先级：首先进行自增（减）运算，然后乘除以及取余，之后是加减，最后是混合赋值运算符

如果变量保存的是字符串，那么只有操作符加号具有意义。JS把他用于多个字符串的连接，如果一个字符串和数值运算，则把数值转变为字符型，进行连接

5.数据类型

在JavaScript中具有八种基本的数据类型（七种原始类型和一种引用类型）。

我们可以将任何类型的值存入变量。可以是字符串，也可以是数字

let message="Hello"; message=;

允许这种操作的编程语言，被称为”动态类型“的编程语言，意思是虽然编程语言中有不同的数据类型，但是你定义的变量并不会在定义后，被限制为某一数据类型

5.1number类型

number类型代表整数和浮点数

数字可以有很多操作，比如，加减乘除等

除了常规的数字，还包括所谓的特殊数值也属于这种类型：Infinity、NaN

infinity代表数学概念中无穷大。是一个比任何数字都大的数字

1.我们可以通过任何数字除0来表示

alert（1/0）；

2.或者在代码中直接使用它

alert（infinity）；

NaN代表一个计算错误。他是一个不正确的或者未定义的数学操作所得到的结果，另外NaN是粘性的，任何对于NaN的操作都会返回NaN（但有一个例外：alert（a0），任何数的零次方都为1）

alert("asdg"/1); alert(NaN+1); alert(NaN*1);

在JavaScript中进行数学运算永远都是安全的，不会因为数学运算而出现致命的错误，最多会出现NaN的结果

5.2BigInt类型

在JavaScript中，number类型没有办法表示大于2^53-1和小于-(2^53-1)的整数，更准的说是number类型超出这个范围会出现精度问题，因为并非所有的数字都适合固定的64位存储。因此，可能存储的是近似值

在大多数情况下，number类型的范围就足够了，但有时候我们需要整个范围非常大的整数，用于密码学或者微妙精度的时间问题

BigInt被用于表示任意长度的整数。

可以通过将n附加到证书字段的末尾来创建BigInt值

let a=64894n;

但是目前 Firefox/Chrome/Edge/Safari 已经支持 BigInt 了，但 IE 还没有。

5.3String类型

JavaScript中的字符串必须被括在引号里，在JavaScript中有三种包含字符串的方式

1.let name='a'; //英文单引号 2.let name="n"; //英文双引号 3.let name=`slajf ${3+2}`; /*反引号（esc键下面的~符号键）是功能扩展引号，允许我们通过变量 变量和表达式包装在${……}，里面的表达式会被计算，计算机结果会成 为字符串的一部分，也可以是变量名或者算数表达式。需要注意的是仅 仅在反引号中有效*/

5.4Boolean类型

仅包含两个值true和false

布尔值可以作为比较的结果

let a=4>2; alert (a); //结果是true

5.5null值

它构成了一个独立的类型，只包含null值

相比于其他编程语言，JavaScript中的null值不是一个”对不存在的引用“或者”null指针“仅仅是一个代表空值的特殊值

5.6undefined值

和null一样自成类型

它的含义是”未被赋值“

如果一个变量仅仅被声明，并没有声明，那么它的值就是undefined；当然也可以将undefined赋值给变量

let a; alert(a); //弹出underfined

let a = undefined;

并不建议将undefined赋值给变量。通常，使用Null将一个空值赋值给变量，而undefined则保留作为默认初始值

5.7typeof运算符

用于返回参数的类型，格式为typeof x

typeof null 的结果是”object“。这是官方承认的错误，来自于JavaScript语言早期阶段，为了兼容性而留下来的。但是null绝不是object类型，它有自己的null类型

typrof alert的结果是”function“，它的意思是指函数。

还有一种写法是typeof(x)。它与typeof x是相同的

从语法上讲typeof和括号之间允许不适用空格，有些人喜欢这样的风格

6.捕获鼠标事件

6.1onClick事件处理器

onclick事件处理器几乎可以用于页面上任何可见的HTML元素。

onClick=“JavaScript语句”

<!DOCTYOE html>
<html>
<head>
    <titile></title>
</head>
<body>
<input type="button"onclick="alert('1+2=3')"
value="1+2"/>
</body>
</html>

运行结果

6.2onMouseOver和onMouseOut事件处理器

当鼠标进入页面上某个元素占据的区域时，会触发onMouseOver事件，当离开这一事件时则会触发onMouseOut事件

<!DOCTYOE html>
<html>
<head>
    <titile></title>
</head>
<body>
<img src="js/1.png" onmouseover="this.src='js/3.png' "onmouseout="this.src='js/22.png'" />
</body>
</html>

这里新增了一个新的语句，关键字this，是指HTML元素的本身。本例就是指当前的图像，上面的代码实现了关于鼠标的图片切换（需要HTMl的基础）

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/111029.html

JS创建简单的脚本