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>

JavaWeb第三天--JavaScript的更多相关文章

  1. Front End Developer Questions 前端开发人员问题（三）JavaScript部分

    问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 三.javascript1.介绍JavaScript的基本数据类型. ...

  2. 三款Javascript SPAs框架资料整理和总结

    一.框架介绍 RequireJS 资料:http://www.requirejs.cn/RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可 ...

  3. 第三章 JavaScript操作BOM对象

    第三章   JavaScript操作BOM对象 一.window对象 浏览器对象模型(BOM)是javascript的组成之一,它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HT ...

  4. 前端开发【第三篇: JavaScript基础】

    JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...

  5. 一、JavaScript概述 二、JavaScript的语法 三、JavaScript的内置对象

    一.JavaScript的概述###<1>JavaScript的概念 又称ECMAScript,和java没有任何关系 嵌入在HTML元素中的 被浏览器解释运行的 一种脚本语言. ###& ...

  6. 前端面试题总结（三）JavaScript篇

    前端面试题总结(三)JavaScript篇 一.谈谈对this的理解? this是一个关键字. this总是指向函数的直接调用者(而非间接调用者). 如果有new关键字,this指向new出来的那个对 ...

  7. Javaweb学习笔记——（三）——————JavaScript基础&DOM基础

    day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...

  8. web前端基础知识-（三）JavaScript基本操作

    JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行. JavaScrip ...

  9. Eclipse/JavaWeb （三）三大框架之Spring框架 持续更新中...

    (一)发展历史 现在我们有三个层了,可是每层之间的调用是怎样的呢?比如显示层的struts需要调用一个业务类,就需要new一个业务类出来,然后使用:业务层需要调用持久层的类,也需要new一个持久层类出 ...

随机推荐

  1. VIJOS-P1282 佳佳的魔法照片

    洛谷 P1583 魔法照片 洛谷传送门 JDOJ 1396: VIJOS-P1282 佳佳的魔法照片 JDOJ传送门 Description 一共有n个人(以1--n编号)向佳佳要照片,而佳佳只能把照 ...

  2. LeetCode 1213. Intersection of Three Sorted Arrays

    原题链接在这里:https://leetcode.com/problems/intersection-of-three-sorted-arrays/ 题目: Given three integer a ...

  3. Pandas | 21 日期功能

    日期功能扩展了时间序列,在财务数据分析中起主要作用.在处理日期数据的同时,我们经常会遇到以下情况 - 生成日期序列 将日期序列转换为不同的频率 创建一个日期范围 通过指定周期和频率,使用date.ra ...

  4. jQuery的核心对象、原型对象、静态方法、动态方法

    什么叫jQuery的核心对象? $ $===jQuery 什么叫jQuery的原型对象? $.fn $.fn===$.prototype 什么叫静态方法? 在构造函树上定义的方法,静态方法通过构造函数 ...

  5. selenium--单选框和复选框的操作

    单选框操作 from selenium import webdriver import unittest class Test_radio(unittest.TestCase): def test_S ...

  6. 网络协议 10 - Socket 编程（上）

    前面一直在说各种协议,偏理论方面的知识,这次咱们就来认识下基于 TCP 和 UDP 协议这些理论知识的 Socket 编程.     说 TCP 和 UDP 的时候,我们是分成客户端和服务端来认识的, ...

  7. 二分类问题F-score评判指标（转载）

    分类模型的评价指标Fscore 小书匠深度学习 分类方法常用的评估模型好坏的方法. 0.预设问题 假设我现在有一个二分类任务,是分析100封邮件是否是垃圾邮件,其中不是垃圾邮件有65封,是垃圾邮件有3 ...

  8. 详细讲解redis数据结构（内存模型）以及常用命令

    Redis数据类型 与Memcached仅支持简单的key-value结构的数据记录不同,Redis支持的数据类型要丰富得多,常用的数据类型主要有五种:String.List.Hash.Set和Sor ...

  9. webpack的一些坑

    最近自己着手做一个小的Demo需要webpack,目前版本号是4.41.2,想使用的版本是3.6.0,因3x版本和4x版本很多地方不同,所以在安装过程中也是很多坎坷,下面是遇到的一些坑,和一些解决办法 ...

  10. 使用nodejs编写cli工具

    1.创建一个文件夹(my-cli); 2.在当前文件夹打开命令行输入 npm init,创建一个package.json,并配置bin字段,配置后才可以在控制台使用你的命令 "bin&quo ...