JS创建简单的脚本

最新推荐文章于 2024-05-28 13:45:55 发布

烟霞Z

最新推荐文章于 2024-05-28 13:45:55 发布

阅读量1k

点赞数 19

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2302_76586717/article/details/138208793

版权

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=123456;

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

5.1number类型

number类型代表整数和浮点数

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

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

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

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

alert（1/0）；

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

alert（infinity）；

NaN代表一个计算错误。他是一个不正确的或者未定义的数学操作所得到的结果，另外NaN是粘性的，任何对于NaN的操作都会返回NaN（但有一个例外：alert（a**0），任何数的零次方都为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=12345678945623156974894891564891564894n;

但是目前 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的基础）

烟霞Z

关注

19
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
JS创建简单的脚本

第一种方法是将JavaScript直接包含在HTML文件中第二种方法是把JavaScript语句单独保存到单独的文件，然后利用src属性调用如果js文件与调用脚本不在通过一个文件夹，我们就需要绝对路径或相对路径以上两种方法，可以写在body标签中，也可以在head标签。
复制链接

扫一扫