JavaWeb第三天--JavaScript

JavaScript

1. JavaScript概述

1.1 JavaScript是什么？有什么作用？

HTML：就是用来写网页的。（人的身体）

CSS：就是用来美化页面的。（人的衣服）

JavaScript：前端大脑、灵魂。（人的大脑、灵魂）

JavaScript是WEB上强大的脚本语言。

脚本语言无法独立运行，必须嵌入到其他语言中，结合使用。

作用： 控制页面特效显示。

例如：

JS可以对HTML元素进行动态的控制。

JS可以对表单项进行校验。

JS可以控制CSS样式。

1.2 JavaScript入门案例

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script>
                //声明变量a，并赋值
                var a = 10;
                //声明变量b，并赋值
                var b = 20;
                //弹框变量a + 变量b的值
                alert(a + b);
            </script>
        </head>
        <body>
        </body>
    </html>

1.3 JavaScript的语言特征即编程注意事项

特征：

JavaScript无需编译，直接被浏览器解释执行。

JavaScript 无法单独运行，必须嵌入到HTML代码中运行。

JavaScript的执行过程由上到下一次执行。

注意：

JavaScript没有访问系统文件的权限。

由于JavaScript无需编译，是由上到下依次解释执行，所以在保证可读性的情况下，允许使用链式编程。

JavaScript和Java没有任何关系。

1.4 JavaScript的组成

ECMAScript（核心）：规定了JS的语法和基本对象。

DOM文档对象模型：处理网页内容的方法和接口。

BOM浏览器对象模型：与浏览器交互的方法和接口。

2. JavaScript的引入方式

2.1 内部脚本

在当前网页内部写<script></script>标签，script内部即可书写JavaScript代码。

格式：

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script type="text/javascript">
                /*JavaScript代码*/
            </script>
        </head>
        <body>
        </body>
    <html>

注：script标签理论上可以书写在HTML文件的任意位置。

2.2 外部引用

在HTML文档中，通过<script src=""></script>标签引入.js文件。

格式：

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

示例：

<script type="text/javascript" src="demo.js"></script>

注：外部引用时script标签内容体不能有script代码，即使写了也不会执行。

2.3 script标签的放置位置

开发规范规定，script标签的放置位置为：</body>结束标签前。
如图所示：

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>
            <h1>Hello</h1>
            <script>alert("Hello World
            ")</script>
        </body>
    </html>

优点：

保证HTML展示内容优先加载，最后加载脚本，增强用户体验性。

3. JavaScript语法及规则

3.1 注释

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

示例：

    <script type="text/javascript">
        //单行注释
        /*多行注释*/
    </script>

3.2 变量

变量：标示内存中的一块空间，用于存储数据，且数据是可变的。

变量的声明：

var 变量名;//变量赋予默认值，默认值为undefined。

变量的声明和赋值：

var 变量名 = 值; //变量赋予对应的值。

在声明JavaScript变量时，需要遵循以下命名规范：

必须以字母或下划线开头，中间可以是数字、字符或下划线。

变量名不能包含空格等字符。

不能使用JavaScript关键字作为变量名。如：function。

JavaScript严格区分大小写。

3.3 基本数据类型

类似于Java中的基本数据类型。

string 字符串类型。"" 和''都是字符串。JavaScript中没有单个字符。

boolean 布尔类型。固定值为true和false。

number 数字类型。任意数字。

null 空。一个占位符。

undefined 未定义类型。该类型只有一个固定值，及undefined，便是变量声明却未定义具体的值。

注：因为undefined是从null中派生出来的，所以undefined == null。

JavaScript区别于Java，是弱类型语言，变量的使用不用严格遵循规范，所以一个变量声明好之后，是可以赋予任意类型的值。

    <script type="text/javascript">
        var a ;
        a = 10;
        a = "10";
        a = true;
        alert(a);
    </script>

通过typeof运算符可以分辨变量值输入哪种基本数据类型。

    <script type="text/javascript">
        var a ;
        a = 10;
        a = "10";
        a = true;
        alert(typeof(a));
    </script>

注:null属于基本数据类型，typeof(null)->obj。

3.4 引用数据类型

引用数据类型通常叫做类（class），但在JavaScript中，因为不存在编译过程，所以没有类的概念，所处理的引用数据类型都是对象。

标准创建方式：

var str = new String(); //和Java相同

var str=new String;//JS独有的方式

4. 运算符

4.1 比较运算符

运算符	描述	例子
==	等于	5 == 8为 false
===	全等（值和类型）	5 === 5 为 true； 5 === "5" 为 false
!=	不等于	5 != 8 为 true
>	大于	5 > 8 为 false
<	小于	5 < 8 为 true
>=	大于或等于	5 >= 8 为 false
<=	小于或等于	5 <= 8 为 true

== 逻辑等，仅仅比对值。

=== 全等。比对值并且比对类型，如果值和类型都相同则为true，否则为false。

4.2 逻辑运算符

运算符	描述	例子
&&	and	(5 >1 && 5 < 8)为 true
\|\|	or	(5 < 1 \|\| 5 > 8)> 为 false
!	not	!(5 == 8) 为 true

注：JavaScript逻辑运算符中没有单个&、单个|。

5. 正则对象

5.1 RegExp对象的创建方式

var reg = new RegExp("表达式"); (开发中基本不用)

var reg=/^表达式$/; 直接量（开发中常用）

注：直接量存在边界，即^代表开始，$代表结束。

5.2 test方法

正则对象.test(string)。

用来校验字符串是否匹配正则。

全部字符匹配返回true;有字符不匹配返回false。

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script>
                var reg = /^\s*$/;// 0~多个空格
                var flag = reg.test("  a  ");
                alert(falg);
            </script>
        </head>
        <body>
        </body>
    </html>

5.3 正则对象使用注意事项

/^表达式$/ 只要有无法成立正则的字符存在，即为false。全部符合为true。（检查严格，适用于表单验证）。

/表达式/ 只要有成立正则的字符存在，即为true。全部不符合为false。（检查不严格，适用于查找，替换）。

6. JS数组对象

6.1 JS数组的特性

JS数组可以看作Java中的ArrayList集合。

数组中的每一个成员没有类型限制，即可以存放任意类型。

数组的长度可以自动修改。

6.2 JS数组的四种创建方式

var arr=[1,2,3,"a",true];

//常用的JS数组。长度5.

var arr = new Array();

创建一个数组对象，数组长度默认为0。

var arr = new Array(4);

数组长度是4，相当于开辟了长度为4的空间，每个元素是undefined。（仅在显示数组时进行处理，undefined为了方便显示变成了空字符串的形式，其值本质仍然是undefined。）

var arr = new Array(1,2);

数组元素是1，2。

6.3 JS数组的常用属性/方法


length	设置或返回数组中元素的数目
join()	把数组的所有元素放入一个字符串中，元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script type="text/javascript">
                var arr = ['a','b','c','d'];
                var result = arr.join("+");
                alert(result);//a+b+c+d
                alert(arr.length);//长度4;
                var arr2 = arr.reverse();

                alert(arr2);//d,c,b,a

                var temp = arr.pop();

                alert(temp);//结果：a;

                var len = arr.push('e','f','g');//追加多个元素。
                alert(len);//长度：6。
            </script>
        </head>
        <body>
        </body>
    </html>

posted @ 2019-11-14 22:01 单眼皮的大眼睛阅读(226) 评论(0) 收藏举报

刷新页面返回顶部

单眼皮的大眼睛