Web前端 JavaScript入门

JavaScript和html的结合方式

第一种方式

在head标签中，或者在body标签中，使用script标签来书写JavaScript代码

<script  type="text/javascript">  JS代码  </script>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    	// alter是js语言提供的一个警告函数，可以接受任意类型的参数，该参数为警告框中的提示信息。
        alert("Hellow JavaScript");
    </script>
</head>
<body>
</body>
</html>

第二种方式

单独的创建JS文件，通过script标签引入

<script  type="text/javascript"  src="JS文件路径"> </script>

用script标签引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript" src="1.js"></script>
        <script type="text/javascript">
        alert("hellow js");
    </script>
</body>
</html>

注：script标签可以用来引入JS文件也可以用来定义JS代码，二者只可选一，
如果想要二者均实现必须重新定义一个script标签。

变量

变量类型

数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function

变量中的特殊值

undefined：未定义，所有JS变量未赋予初始值时默认值均为undefined
null：空值
NaN：非数字，因为运算不能执行而导致，如数值和字符串运算，属于number类型

定义变量的格式

var 变量名；
var 变量名 = 值；

补充

(1) typeof()是JS语言提供的一个函数，它可以返回参数的类型
(2) JS语言中的注释写法与java一致 – //

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var i;
        alert(i); //undefined
        i = 22;
        alert(i); //22
        alert(typeof(i)); //number
        i = "abc"; //弱类型，可以随意更改类型
        alert(typeof(i)); //string
        var a = 22;  var b = "Handsome";
        alert(a * b); //NaN
        alert(typeof(a * b)); //number
    </script>
</body>

关系运算

1. 等于，符号：==，简单的做字面值的比较
2. 全等于，符号：===，除了做字面值的比较之外，还会比较两个变量的数据类型是否一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a = "12";
        var b = 12;
        alert( a == b ); //true
        alert( a === b ); //false
    </script>
</head>
<body>
</body>
</html>

逻辑运算

&&：且运算

第一种情况：表达式全为真，返回最后一个表达式的值
第二种情况：表达式有一个为假，返回第一个为假的表达式的值(不是返回第一个表达式的值)

||：或运算

第一种情况：表达式全为假，返回最后一个表达式的值
第二种情况：表达式有一个为真，返回第一个为真的表达式的值(不是返回第一个表达式的值)

!：取反运算

注意：
&&与||采取短路的策略，即确定了结果后，后面的表达式不再进行判断
在JS语言中所有的变量都可以作为一个boolean类型使用，且0、null、undefined、
””(空串)都认为是false

数组

数组的定义方式：
var 数组名 = []；//空数组
var 数组名 = [1,’abc’,true]；//定义数组的同时赋值，元素可多种类型

注意：

1.通过数组下标赋值，会根据最大下标值给数组自动扩容，默认值为undefined
2.读取数组中已定义元素范围之外的元素，值为undefined，且读取不会自动扩容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var arr = [true, 1];
        alert(arr.length); //2
        arr[0] = 12;
        arr[4] = "abc";
        alert(arr.length); //5
        alert(arr[6]); //undefined
        alert(arr.length); //5
        //数组的遍历
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i]);
        }
    </script>
</body>
</html>