[TOC]

JavaScript基础

今日内容

1、JavaScript概述
2、JavaScript数据类型
3、JavaScript运算符
4、JavaScript条件语句
5、JavaScript循环语句
6、JavaScript函数
7、Javascript事件
8、JavaScript字符串
9、JavaScript正则表达式

教学目标

1、了解JavaScript概述
2、掌握JavaScript数据类型
3、掌握JavaScript运算符
4、掌握JavaScript条件语句
5、掌握JavaScript循环语句
6、掌握JavaScript函数

第一节 JavaScript概述

1.1 JavaScript简介
JavaScript(LiveScript)一种解释性脚本语言,是一种动态类型、弱类型、基于原型继承的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

1.2 JavaScript发展史

它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型(DOM Document Object Model),浏览器对象模型(BOM Browser Object Model)。

Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似,是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势,微软推出了JScript来迎战JavaScript的脚本语言。为了互用性,Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言,而非作为给程序人员的脚本语言来推广和宣传,但是JavaScript具有非常丰富的特性。

发展初期,JavaScript的标准并未确定,同期有Netscape的JavaScript,微软的JScript和CEnvi的ScriptEase三足鼎立。1997年,在ECMA(欧洲计算机制造商协会)的协调下,由Netscape、Sun、微软、Borland组成的工作组确定统一标准:ECMA-262。

第二节 JavaScript基本语法

入门程序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>javascrit入门</title>
    </head>
    <body>
        <script type="text/javascript">
            //alert("hello world");//弹出窗口显示
            document.write("hello world");//页面中显示
        </script>
     </body>
</html>

2.1 变量声明

在JavaScript中,任何变量都用var关键字来声明,var是variable的缩写。

var num; //声明变量
num=10;//赋值

var s="zhangsan";//声明的同时赋值

var是声明关键字,a是变量名,语句以分号结尾,分号可以省略。

这里值得注意的是,JavaScript中的关键字,不可以作为变量名。就像在Java中你不可以写”int int=1;”一样。

JavaScript的关键字和保留字:

abstract、else、instanceof、super、boolean、enum、int、switch、break、export、interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、final、native、throws、char、finally、new、transient、class、float、null、true、const、for、package、try、continue、function、private、typeof、debugger、goto、protected、var、default、if、public、void、delete、implements、return、volatile、do、import、short、while、double、in、static、with。

之后的课程还会有文档对象相关的关键字等。

JavaScript中的注释有两种:

单行注释//
多行注释/* ... */

2.2 数据类型

2.2.1 基本(原始)类型

变量的基本类型有number、string、boolean、undefined、null五种。 u n n s b

你可以使用:

var a=1;

来声明一个数字Number类型。

你可以使用:

var a="1";

来声明一个字符串String类型。

你可以使用

var a=false;

来声明一个布尔Boolean类型。

在Java中,当一个变量未被初始化的时候,Java中是null或者基本数据类型的默认值。

在JavaScript中,当一个变量未被初始化的时候,它的值为undefined。

下面是演示undefined的情况:

var a;
document.write(a);

运行结果为:

image.png

最后,当一个引用不存在时,它为Null。这个现象我们在之后的引用类型时再详细探讨。

2.2.2 引用(对象)类型

在Java中需要类定义,然后在实例对象:

public class Student{
  public int id;
  public String name;
  public int age;
}
public class Test{
    public static void main(String [] args){
        Student student=new Student();
          student.id=1;
          student.name="张三";
          student.age=18;
    }
}

在JavaScript中对象创建

1 创建对象方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>javascript引用(对象)类型</title>
        <script type="text/javascript">
            //1创建(类)对象定义
            function Person(){
                //属性
                this.age;
                this.name;
                this.address;
                //函数(匿名函数)
                this.show=function(){
                    document.write(this.age+"...."+this.name+"....."+this.address);
                }
            }

            /*function Student(){

            }
            Student.prototype=new Person();*/
            //2创建对象
            var zhangsan=new Person();
            zhangsan.age=20;
            zhangsan.name="张三";
            zhangsan.address="北京";
            zhangsan.show();

            /*var lisi=new Student();
            lisi.age=30;
            lisi.name="李四";
            lisi.address="上海";
            lisi.show();*/




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

2 使用json对象直接写出来:

var student={id:1,name:"张三",age:18};
document.write(student.id);
document.write(student.name);
document.write(student.age);

运行结果:

image.png
事实上,student被赋值为了一个JSON,JSON就是我们在Java基础阶段学过的,全称是JavaScript Object Notation,叫做JavaScript对象标记,也就是说,在JavaScript中,JSON是用于标记一个对象的。

数组类型

数组就是和我们之前理解的数组概念一致,而在JavaScript中成为Array类型。

var cities=new Array(3);
document.write(cities.length);
//添加数据
cities[0]=10;
cities[1]=20;
cities[2]=30;
cities[3]=40;
cities[4]=50;
document.write("<br/>");
document.write(cities.length);

我们说JSON可以标记一个对象,那么它同样可以标记一个数组,就是Java基础时我们学过的JSONArray。

var a=[1,2,3,4];

上述代码,我们说a是一个数组,在a中角标为0的元素是1。可以说这很简单。

接下来我们来尝试把之前的JSON放入数组中:

    //我是注释
    /*我也是注释*/
    var students = [
    {id: 1,name: "张三",age: 18},
    {id: 2,name: "李四",age: 18},
    {id: 3,name: "王五",age: 19}
    ];
    document.write(students[0].id);
    document.write(students[0].name);
    document.write(students[0].age);
    document.write("<br>");//这个是html的换行的意思
    document.write(students[1].id);
    document.write(students[1].name);
    document.write(students[1].age);
    document.write("<br>");
    document.write(students[2].id);
    document.write(students[2].name);
    document.write(students[2].age);

运行结果:

image.png

我们看到,访问students这个数组,第0个,第1个,第2个元素,都可以。

2.2.3 JavaScript的三种使用方式

第一种方式:在