JavaScript之基础篇

Posted 2020-12-12 北冥煮鲲

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript之基础篇相关的知识，希望对你有一定的参考价值。

javascript 介绍

JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。js是Netscape网景公司的产品，最早取名为LiveScript，为了吸引更多Java程序员。更名为JavaScript（js是弱类型、 java是强类型）。

特点：

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释js的浏览器都可以执行，和平台无关）

JavaScript 和 html 代码的结合方式

　　第一种方式：只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript和html代码的结合方式一</title>
</head>
<body>
<script type="text/javascript">
    //alert是JavaScript语言提供的一个警告框函数
    //它可以接收任意类型的参数，这个参数就是警告框的提示信息
    alert("hello javaScript!");
</script>
</body>
</html>

　　第二种方式：使用script标签引入单独的JavaScript代码文件。　

示例代码：

/*
 * hello.js文件中的内容
 */
alert("hello.js");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript和html代码的结合方式二</title>
</head>
<body>
<!-- 现在需要使用script引入外部的js文件来执行，src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径） 
　　script标签可以用来定义js代码，也可以用来引入js文件，但是两个功能二选一使用，不能同时使用两个功能。 -->
<script type="text/javascript" src="hello.js"></script>
<script type="text/javascript">
   alert("hello.html");
</script>
</body>
</html>

变量

什么是变量？变量是可以存放某些值的内存的命名。

　　JavaScript的变量类型：

　　　　数值类型：number

　　　　字符串类型：string

　　　　对象类型：object

　　　　布尔类型：boolean

　　　　函数类型：function

　　JavaScript的特殊值：

　　　　undefined：未定义，所有js变量未赋于初始值的时候，默认值都是undefined。

　　　　null：空值

　　　　NaN：全称是 Not a Number，非数字、非数值。

　　Js中定义变量的三种方式：

　　　　const：定义的变量不可以修改，而且必须初始化。

　　　　var：定义的变量可以修改，如果不初始化会输出undefined，不会报错。

　　　　let：块级作用域，函数内部使用let定义后，对函数外部无影响。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
</head>
<body>
<script type="text/javascript">

    var i;
    alert(i); //undefined
    
    i = 12;
    //typeof()是JavaScript语言提供的一个函数。
    alert(typeof(i)); //number

    i = "abc";
    //它可以取变量的数据类型返回
    alert(typeof(i)); //String

    var a = 12;
    var b = "abc";
    alert(a * b); //NaN是非数字，非数值。

</script>
</body>
</html>

关系（比较）运算

　　分类：

　　　　等于（==）：等于是简单的做字面值的比较。

　　　　全等于（===）：除了做字面值的比较之外，还会比较两个变量的数据类型。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系（比较）运算</title>
</head>
<body>
<script type="text/javascript">
    var a = "12";
    var b = 12;
    alert(a==b);//true
    alert(a===b);//false
</script>
</body>
</html>

逻辑运算

　　分类：

　　　　且运算：&&

　　　　或运算：||

　　　　取反运算：!

提示：

在JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用（0、null、undefined、""(空串)都认为是false）。

　　&& 且运算：

　　　　第一种：当表达式全为真的时候，返回最后一个表达式的值。

　　　　第二种：当表达式中，有一个为假的时候，返回第一个为假的表达式的值。

　　|| 或运算：

　　　　第一种情况：当表达式全为假时，返回最后一个表达式的值。

　　　　第二种情况：只要有一个表达式为真。就会返回第一个为真的表达式的值。

提示：

（ && 与运算）和（ || 或运算）有短路。短路就是说，当这个 && 或 || 运算有结果了之后，后面的表达式不再执行。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算</title>
</head>
<body>
<script type="text/javascript">

    /*
     * 在JavaScript语言中，所有的变量都可以做为一个boolean类型的变量去使用。 0、null、undefined、””(空串)都认为是false。
     */

    var a = 0;
    if (a){
        alert("零为真")
    }else {
        alert("零为假");
    }

    var b = null;
    if (b){
        alert("null为真");
    }else {
        alert("null为假");
    }

    var c = undefined;
    if (c){
        alert("undefined 为真");
    }else {
        alert("undefined 为假");
    }

    var d = "";
    if (d){
        alert("空串为真");
    }else {
        alert("空串为假");
    }

    /*
     * && 且运算
     * 第一种：当表达式全为真的时候，返回最后一个表达式的值。
     * 第二种：当表达式中，有一个为假的时候，返回第一个为假的表达式的值。
     */

    var a = "abc";
    var b = true;
    var d = false;
    var c = null;

    alert( a && b );//true
    alert( b && a );//true
    alert( a && d ); // false
    alert( a && c ); // null

    /*
     * || 或运算
     * 第一种情况：当表达式全为假时，返回最后一个表达式的值。
     * 第二种情况：只要有一个表达式为真，就会把回第一个为真的表达式的值。
     */
    alert( d || c ); // null
    alert( c|| d ); //false
    alert( a || c ); //abc
    alert( b || c ); //true

</script>
</body>
</html>

数组

　　js中数组的定义方式：

　　　　var 数组名 = []; //空数组

　　　　var 数组名 = [1 , \'abc\' , true]; //定义数组同时赋值元素

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<body>
<script type="text/javascript">

    var arr = []; //定义一个空数组

    alert(arr.length); //0
    
    arr[0] = 12;

    alert(arr[0]); //12

    alert(arr.length); //0
    
    //javaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。

    arr[2] = "abc";

    alert(arr.length); //3

    alert(arr[1]);//undefined

    //数组的遍历
    for (var i = 0; i < arr.length; i++){
        alert(arr[i]);
    }

</script>
</body>
</html>

函数

　　函数的两种定义方式：

　　　　第一种：可以使用function关键字来定义函数。

　　　　　　function 函数名(形参列表){

　　　　　　　　函数体

　　　　　　}

　　　　在JavaScript语言中，如何定义带有返回值的函数？只需要在函数体内直接使用return语句返回值即可！

示例代码：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function函数</title>
</head>
<body>
<script type="text/javascript">

    //定义一个无参函数
    function fun() {
        alert("无参函数fun()被调用了...");
    }
    fun();

    //定义一个有参函数
    function fun2(a,b) {
        alert("有参函数fun2()被调用了==>a="+a +";b="+b);
    }
    fun2(12,"abc");

    //定义带有返回值的函数
    function sum(num1, num2) {
        var result = num1 + num2;
        return result;
    }
    alert(sum(100,50));

</script>
</body>
</html>

　第二种：

　　　　　var 函数名 = function(形参列表) {

　　　　　　　函数体

　　　　　}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function函数</title>
</head>
<body>
<script type="text/javascript">

    var fun = function () {
        alert("无参函数");
    }
    fun();

    var fun2 = function (a, b) {
        alert("有参函数==>a="+a+";b="JavaScript系列之基础篇
 译ECMAScript 2016, 2017, 2018 新特性之必读篇
 JavaScript基础篇分享之二
 JavaScript系列之基础篇
 前端开发之JavaScript基础篇一
 javascript之Array基础篇