简述JavaScript（一）

最新推荐文章于 2023-03-03 19:47:37 发布

灰灰渣

最新推荐文章于 2023-03-03 19:47:37 发布

阅读量517

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43138206/article/details/100132488

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本人小白一枚，欢迎大家一起讨论学习，如有错误，还望大家指教。

简述：

发展历史：

1992年，Nombase公司，开发出第一个客户端脚本语言，专门用于表单的校验。命名为：C - -，后来更名为：ScriptEase。
1995年，Netscape（网景）公司开发了一门客户端脚本语言LiveScript。后来请来了SUM公司的专家修改LiveScript，命名为JavaScript。
1996年，微软抄袭JavaScript开发出了JScript语言。
1997年，ECMA（欧洲计算机制造者协会）制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

下面我们要学习JavaScript，通过上面的发展历史得知，JavaScript = ECMAScript + JavaScript自己特有的东西（BOM+DOM），我们通过这两部分进行分步学习。
JavaScript是一门客户端脚本语言（不需要编译，直接就可以被浏览器解析执行）是运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎。

ECMAScript：客户端脚本语言的标准。

我们先来阐述一下JavaScript与html的关系，JavaScript可以用来增强用户html页面的交互过程，让页面有一些的效果，增强用户的体验。
基本语法：
1、与html结合方式：

内部JS：定义<JavaScript>标签，便签内容定义js代码。
外部JS：定义<JavaScript>标签，通过src属性引入外部的js文件。
注意：js代码可以定义在html页面的任何位置，但定义的位置会影响执行顺序。

2、注释：

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

3、数据类型（分两大类，共六种）

原始数据类型（基本数据类型）
- number：数字类型，整数、小数、NaN（not a number，一个不是数字的数字类型，具体含义我们会在下面解释)
- string：字符串类型，“abc”、'abc’单引号和双引号都可以，但要注意最外面用来双引号，那么里面就不能在用双引号了
- boolean：布尔类型，true和false。
- null：一个对象为空的占位符。
- undefined：如果一个变量没有给初始化值，则会默认赋值为undefined。
引用数据类型：对象object。

<script>
        var str1 = "abc";
        var str2 = 'abc';
        var num1 = 123;
        var boolean1 = true;
        var obj1 = null;
        var obj2 = undefined;
        var obj3;
        document.write("str1----" + typeof(str1) + "<br/>" );
        document.write("str2----" + typeof(str2) + "<br/>" );
        document.write("num1----" + typeof(num1) + "<br/>" );
        document.write("boolean1----" + typeof(boolean1) + "<br/>");
        // 注意：当变量类型为null时，打印出来的object
        document.write("obj1----" + typeof(obj1) + "<br/>" );
        document.write("obj2----" + typeof(obj2) + "<br/>");
        document.write("obj3----" + typeof(obj3) + "<br/>");
    </script>

在这里插入图片描述
4、变量

变量：一小块存储数据的内存空间。
Java语言是强类型语言，而JavaScript是弱类型语言。
- 强类型：在开辟变量存储空间时，定义了空间将来存储数据的数据类型，只能存储固定类型的数据。
- 弱类型：在开辟变量存储空间时，不定义空间将来存储数据的数据类型，可以存放任意类型的数据。
语法：
- var 变量名 = 初始化值;
typeof 运算符：获取变量的数据类型，注：null运算后得到的是object。

5、运算符

一元运算符：只有一个运算数的运算符。
- ++：自增一，符号在前先自增，在运算，符号在后先运算，在自增。
- - -：自减一，符号在前先自减，在运算，符号在后先运算，在自减。
- +（-）：正负号，注意：在JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动的将运算数进行类型转换。String转换成number：按照字面值进行转换，如果字面值不是数字，则转成NaN（即不是数字的数字）。boolean转number，true转换成1，false转换成0；

<script>
        var str1 = "123";
        // 进行字符串拼接
        document.write( str1 + 1 + "<br/>");
        // 使用单目运算符+，类型会变成number
        document.write( + str1 + 1 + "<br/>");
        // 当从string类型转换到number时，如果含有字母或者其他特殊字符无法转换成number时，此时就会出现NaN类型
        document.write(+ (str1 + "abc") + "<br/>");
        var boolean1 = + true;
        var boolean2 = + false;
        document.write(boolean1  + "<br/>");
        document.write(boolean2);
    </script>

在这里插入图片描述

算数运算符
- +、- 、* 、/ 、%、 …
赋值运算符
- = 、+= 、-= …
比较运算符
- >、<、>=、<=、 ===（全等于，在比较之前，先判断类型，如果类型不一样，则直接返回false）
逻辑运算符
- &&：与（短路）
- ||：或（短路）
- !：非
- 其他类型转布尔类型如下：
- number：0或NaN为假，其他为真。
- String：除了空字符串（""），其他都是true。
- null和undefined：都是false.
- 对象：所有对象都为true。

<script>
        document.write("0代表布尔值：" + !!0 + "<br/>");
        document.write("NaN代表布尔值：" + !!NaN + "<br/>");
        document.write("空串代表布尔值：" + !!"" + "<br/>");
        document.write("字符串代表布尔值：" + !!"abc" + "<br/>");
        document.write("null代表布尔值：" + !!null + "<br/>");
        document.write("undefined代表布尔值：" + !!undefined + "<br/>");
        var obj = new Date();
        document.write("对象代表布尔值：" + !!obj + "<br/>");
    </script>

在这里插入图片描述
在我们写Java时，我们防止空指针时，通常会这样判断

// 防止空指针异常
if(obj != null && obj.length > 0) {
            alert(123);
        }

通过上面的学习，我们在JS中为了防止空指针时，可以这样写

// Js中可以这样定义，简化书写。
if(obj) {
            alert(123);
        }

6、流程控制语句

if…else…
switch
- 在java中，switch语句可以接收的数据类型：byte、int、shot、char、枚举（1.5）、String（1.7）
- 在JS中，switch语句可以接收任意的原始数据类型。
while 循环
do…while 循环
for 循环

7、JS特殊语法

语句以：结尾，如果一行只有一条语句则；可以省略（不建议）
变量的定义使用var 关键字，也可以不用，注：用var定义的变量是局部变量，不用var定义的是全局变量（不建议）。

练习案例：打印九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            border: 1px solid;
        }
    </style>
</head>
<body>
    <script>
        document.write("<table align = 'center'>")
        for(var i = 1;i <= 9;i++) {
            document.write("<tr>")
            for(var j = 1;j <= i;j++) {
                document.write("<td>");
                document.write(i + "*" + j + "=" + i * j);
                document.write("</td>")
            }
            document.write("</tr>")
        }
        document.write("</table>");
    </script>
</body>
</html>

打印结果：
在这里插入图片描述
基本对象：（在这里我们就简单介绍几个）
Function：函数对象，可以用来声明函数（下面我们介绍下其用法及创建函数的另外两种方式）。
创建：

var fun = new Function(形参列表，方法体);
例：var myFunction = new Function("number", "alert(number + 10);"); // 调用函数 myFunction1(100);
function 方法名称(形参列表) { 方法体 }
var 方法名 = function(形参列表) { 方法体 }

方法：

toString()、valueOf()：Function对象与所有对象共享的这两个方法，都是返回的都是函数的源代码。

属性：

length：代表着函数的个数。

特点：

方法的定义是，形参类型不用写，返回值类型也不用写。
方法是一个对象，如果定义名称相同的方法，会覆盖。
在JS中，方法的调用只与方法的名称有关，和参数列表无关。
在方法声明中有一个隐藏的内置对象（数组），arguments封装所有的实际参数。

<script>
        var fun1 = new Function("num1", "num2", "document.write(num1 + num2);document.write('<br/>');");
        document.write("fun1函数参数的个数：" + fun1.length + '<br/>');
        // 根据参数列表的个数和顺序进行参数传递，多余的参数不会影响函数的调用。
        fun1(1, 2, 3, 4);
        // 如果传入的参数少于参数列表，将会赋值为undefined
        fun1();
        fun1(1);
        // 定义同名的函数，函数会进行覆盖
        var fun1 = function() {
            document.write("覆盖fun1函数" + "<br/>");
        }
        document.write("覆盖fun1函数参数的个数：" + fun1.length + '<br/>');
        fun1();
        fun1(5, 6, 7, 8);
    </script>

在这里插入图片描述
Array：数组对象
创建：

var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表];

方法：

join(参数)：将数组中的元素按照指定的分隔符拼接为字符串。
push(参数)：向数组的末尾添加一个或更多元素，并返回新的长度。

属性：

length：数组的长度。

特点：

JS中，数组元素的类型是可变的。
JS中，数组的长度是可变的。

<script>
        // 如果参数列表的个数大于1，将会对这些数据认为是数组的各个元素。
        var arr1 = new Array(1, 2, 3, 4, 5);
        // 如果参数列表的个数等于1，将会认为是数组的长度。
        var arr2 = new Array(10);
        var arr3 = [6, 7, 8, 9];
        var arr1;
        // 直接打印数组名，会直接打印数组元素列表
        document.write("数组arr1的内容：" + arr1 + '<br/>');
        document.write("数组arr1的长度：" + arr1.length + '<br/>');
        // 数组中的元素没有并赋值，只会打印去元素分隔符，即，
        document.write("数组arr2的内容：" + arr2 + '<br/>');
        document.write("数组arr2的长度：" + arr2.length + '<br/>');
        document.write("数组arr3的长度：" + arr3.length + '<br/>');
        // 出现同名数组时，如果进行赋值操作，会进行覆盖，如果只是声明了同名变量，不会对数组的元素有影响。
        document.write("同名数组名arr1：" + arr1 + '<br/>');
        // 向数组末尾添加一个元素或者多个元素，可以添加任意类型
        arr1.push("灰灰渣", 12);
        // 调用join方法，使用-分隔符
        document.write("调用方法join方法：" + arr1.join('-'));
    </script>

在这里插入图片描述
Date：日期对象。
创建：

var date = new Date();

方法：

toLocaleString()：返回当前date对象对应的时间本地字符串格式
getTime()：获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

Math：数学对象。
创建：

Math对象不用创建，可以直接使用，使用方法：Math.方法名();

方法：

random()：返回0~1之间的随机数，[0, 1)
ceil(x)：对参数进行上舍入。
floor(x)：对参数进行下舍入。
round(x)：对参数四五入为最接近的整数。

属性：

PI：圆周率。

取1~100之间的随机整数：document.write(Math.floor(Math.random() * 100 + 1) + "<br/>");
Global：全局对象，这个Global中封装的方法不需要对象就可以直接调用。
方法：

encodeURI()：url编码
decodeURI()：url解码
encodeURIComponent()：url编码,编码的字符更多
decodeURIComponent()：url解码
parseInt()：将字符串转为数字（逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number）。
isNaN()：判断一个值是否是NaN（NaN六亲不认，连自己都不认。NaN参与的 == 和 === 比较为false）。
eval()：将JavaScript 字符串，并把它作为脚本代码来执行。

<script>
       document.write((NaN == NaN) + '<br>');
       document.write((NaN === NaN) + '<br/>');
       document.write((isNaN(NaN)) + '<br/>');
       document.write(parseInt("abc12c4") + '<br/>');
       document.write(parseInt("123bs4") + '<br/>');
</script>

在这里插入图片描述

我们会在下一篇里简述JavaScript中的BOM对象和DOM对象。

灰灰渣

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
简述JavaScript（一）

简述：发展历史：1992年，Nombase公司，开发出第一个客户端脚本语言，专门用于表单的校验。命名为：C - -，后来更名为：ScriptEase。1995年，Netscape（网景）公司开发了一门客户端脚本语言LiveScript。后来请来了SUM公司的专家修改LiveScript，命名为JavaScript。1996年，微软抄袭JavaScript开发出了JScript语言。19...
复制链接

扫一扫