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. 《Exception团队》第三次作业：团队项目的原型设计

    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 学习原型设计过程以及工具的使用 二.原型设计细 ...

  2. MongoDB基础知识与常用命令

    SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数据库 table collection 数据库表/集合 row document 数据记录行/文档 col ...

  3. Java Map常用操作

    Java之map常用操作 package basic; import java.util.HashMap; import java.util.Map; /** *Map常用操作方法 */ public ...

  4. flask ORM创建

    安装SQLAlchemy pip3 install sqlalchemy Flask需要使用 flask-sqlalchemy 支持包 pip3 install flask-sqlalchemy 创建 ...

  5. ABP 往前端返回详细的错误信息

    在这个类:MyABP.Web.Startup.MyABPWebMvcModule 中 的 PreInitialize 方法 添加一句: Configuration.Modules.AbpWebComm ...

  6. Django 1.11 网站分页设计

    参考网址:https://www.cnblogs.com/kongzhagen/p/6640975.html

  7. [RN]react-native-scrollable-tab-view和FlatList手势冲突解决

    问题描述: react-native-scrollable-tab-view叠加react-native-scrollable-tab-view再加上FlatList FlatList向下拉时,会造成 ...

  8. 讲课专用——线段树——BSS

    题目链接:http://codevs.cn/problem/3981/ 题解: 线段树求GSS模板题 一.一段长的区间的 GSS 有三种情况:>1 完全在左子区间>2 完全在右子区间> ...

  9. Guava 源码分析之Cache的实现原理

    Guava 源码分析之Cache的实现原理 前言 Google 出的 Guava 是 Java 核心增强的库,应用非常广泛. 我平时用的也挺频繁,这次就借助日常使用的 Cache 组件来看看 Goog ...

  10. Gamma阶段第八次scrum meeting

    每日任务内容 队员 昨日完成任务 明日要完成的任务 张圆宁 #91 用户体验与优化https://github.com/rRetr0Git/rateMyCourse/issues/91(持续完成) # ...