Web前端开发（三）-- JavaScript

作者: 404er | 来源:发表于2017-10-22 09:16 被阅读0次

1.JavaScript概述

JavaScript是一种专为与网页交互而设计的脚本语言，由以下三个不同的部分组成：
- 核心(ECMAScript)：由ECMA-262定义，提供核心语言功能；
- 文档对象模型(DOM)：提供访问和操作网页内容的方法和接口；
- 浏览器对象模型(BOM)：提供与浏览器交互的方法和接口。
NetScape将LiveScript更名为JavaScript
JavaScript是一种编程语言，操作html中的节点以及CSS样式，进而达到网页的动态效果，增强网页与用户的交互度
JavaScript与Java没有任何关系
JavaScript被程序员简称为JS，运行在浏览器客户端当中；JavaServer Pages简称为JSP，是一种基于Java语言实现的服务器端页面，JSP属于Java语言，运行在Java虚拟机当中。

2.JavaScript语言特点

1.基于对象的编程语言

基于对象而不是面向对象，因为对象性的特征在JavaScript中并不像Java语言中那样纯正

2.弱类型语言

变量定义的时候不需要指定类型，具体赋值的时候，值决定变量的数据类型

3.解释执行的脚本语言

不需要编译生成目标程序，代码在执行时才被JavaScript解释器一行行动态翻译和执行

也会预编译，如变量定义，函数定义，但实际上大多数书上讲到这个问题时是不讲“预编译”的。这牵涉到一个概念叫做“提升（hoisting）”。“提升”指的是所有在函数作用域里的变量定义和函数定义都会被提升至作用域代码的最开始处

4.简单性

JavaScript基于Java的基本语法和语句流程

5.动态性

JavaScript是基于事件驱动的，例如，鼠标单击按钮，页面加载完毕等等这些都是

6.平台无关性

只要有支持JavaScript的浏览器，无论在什么平台上

7.安全性

其不允许访问本地硬盘，也不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失和破坏

3.HTML中嵌入JavaScript脚本

1.内联引用

<input type="button" value="hello" onclick="window.alert("Hello World!");" />
<!--
    1.JS中有一个内置对象window（必须全部小写），window内置对象代表的是当前浏览器窗口，属于BOM范围
    2.JS语句也要以";"结尾，但这不是必须的
    3.JS中的字符串可以用单引号或者双引号括起来
-->

2.内部引用

<head>
    <script type="application/javascript">
        alert("---->");
    </script>
</head>

3.外部引用

文件名：my.js

alert("Hello World!");

文件名：html.js

<script type="application/javascript sr="my.js"></script>
<!--如果想写其他JS语句，需要另外写一对script标签-->

4.JavaScript基础

1.注释

1.JavaScript

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

2.CSS

/**/

3.HTML

 <!-- -->

2.JavaScript标识符、关键字、字面值

var x=1;
/*
    1.标识符命名规则：
        - 必须由数字，字母，下划线，美元符号组成
        - 不能以数字开始
        - 严格区分大小写
        - 关键字不能作为标识符
    2.标识符命名规范：
        - 类名每个首字母大写
        - 函数名、变量名首字母小写，后面每个单词首字母大写
    3.关键字：
        function,var,if,else,for,while,do,true,false...
    4.字面值：
        数值型字面值，字符串型字面值，布尔型字面值...
*/

3.JavaScript变量

1.

//声明变量
var i;
alert("i = " + i); //undefined
//赋值
i = 10;
alert("i = " + i); //10
//重新赋值
i = "abc";
alert("i = " + i); //abc
//再次赋值
i = false;
alert("i = " + i); //false
//一行上声明多个变量
var a,b,c = 300;
alert("a = " + a); //undefined
alert("b = " + b); //undefined
alert("c = " + c); //300

/*
    1.什么是变量？
        变量是内存中存储数据的基本的单元
    2.JavaScript中的所有变量声明时不需要指定数据类型，统一采用var关键字声明
    3.JavaScript的变量内存在浏览器缓存当中
    4.JavaScript中的变量也必须先声明再赋值才能使用，如果没有赋值，会默认赋值undefined
*/

2.

<html>
  <head>
    <title></title>
    <script type="application/javascript">
      //直接在脚本块中定义的变量是全局变量
      //全局变量的生命周期是从浏览器打开到最终浏览器关闭
      var username = "yyb";
      //声明函数
      function sayHello(){
        alert("Hello" + username); //username是全局变量
        //继续访问全局变量username
        username = "yybzzz";
      }
      //调用函数
      sayHello();
      //访问全局变量
      alert("username = " + username); //
      var v; //undefined
      //一个变量没有声明直接访问，会报错
      //alert(age); //异常：引用错误，age未定义
      //声明函数
      function testFun(){
        //局部变量
        var i = 100; //内存空间只在函数体中有效
      }
      //调用函数
      testFun();
      //访问变量i
      //alert(i); //异常，变量不存在
      //声明函数
      function myFun(){
        //变量声明的时候没有使用var关键字，不管这个变量是声明在什么位置的，该变量都是全局变量
        usercode = "666";
      }
      //调用函数
      myFun();
      //访问usercode
      alert("usercode = " + usercode);
    </script>
  </head>
  <body>
  </body>
</html>

4.JavaScript函数

/*
    1.什么是函数？
        完成某个特定的功能，类似Java的方法
    2.JavaScript中的函数不需要指定返回值类型，因为可以返回任何数据类型的值
    3.函数名只要是合法的标识符就行
    4.JavaScript中的函数执行结束的时候可以编写return语句返回值，也可以不编写return语句返回值
    5.JavaScript函数调用的时候会在栈内存中分配空间，发生压栈动作，函数执行结束之后，会发生弹栈动作，
    局部变量的内存释放
    6.JavaScript中的函数没有重载overload这种机制，因为它是一种弱类型的编程语言
    7.JavaScript中所有的函数名不能重名，如果重名最后加载的函数有效
    8.函数不调用是不会执行的
*/
<html>
  <head>
    <title></title>
    <script type="application/javascript">
      function sum(a,b){
        return a + b;
    }
    var result1 = sum(10,20);
    alert(result1); //30
    var result2 = sum("10",20);
    alert(result2); //1020
    var result3 = sum(false,"abc");
    alert(result3); //"falseabc"
    function divide(a,b){
    
    }
    var ok = divide();
    alert(ok); //undefined
    </script>
  </head>
  <body>
  </body>
</html>

5.typeof运算符

##### 1.typeof运算符的作用：

运行阶段动态判断变量的数据类型

2.typeof运算符的语法规则：

typeof 变量名

3.typeof运算符的运算结果是以下6种结果之一，都是字符串：

“undefined”：说明变量的数据类型是Undefined
"number"：说明变量的数据类型是Number
“string”：说明变量的数据类型是String
“boolean”：说明变量的数据类型是Boolean
“object”：说明变量的数据类型是Object
“function”：说明变量名指向的不是一个数据，而是一个函数

6.JavaScript数据类型

JavaScript中的数据类型：

原始数据类型：Undefined、Number、String、Boolean
引用数据类型：Object以及子类型

1.Undefined类型

Undefined数据类型只有一个值：undefined
什么时候变量的值是undefined？
- 变量只声明没有赋值，系统默认赋值undefined
- 手动赋值undefined

var usercode = "undefined";//属于String类型，不是Undefined类型

2.Number类型

Number数据类型被称为数值型，整数型和浮点型都属于Number类型
Number类型包括的值：

0、-1、1、3.1、NaN、Infinity等
- NaN表示Not a Number,表示不是一个数字，但是属于Number类型
- 应当返回数字，但是最终返回的不是一个数字的时候返回NaN
- Infinity属于Number类型中的一个值，表示无穷大，只有当除数为0的时候，结果是Infinity

var a = 10;
var b = 3;
alert(a / b); //3.33333333

var a = "中国";
var b = 3;
alert(a / b); //NaN

var a = 10;
var b = 0;
alert(a / b); //Infinity

//isNaN()函数,判断是否是一个非数字
alert(isNaN(20 / 10)); //false

//Number()函数，将非数字转换成数字
alert(Number("10") + 1); //11
alert(Number("中国") + 1); //NaN
alert(Number("a") + 1); //NaN
alert(Number(false) + 1); //1,false被转换成0
alert(Number(true) + 1); //2,true被转换成1
alert(Number(undefined) + 1); //NaN

//以下两行程序存在自动转换，会自动调用Number函数完成转换
alert(false + 10); //10
alert(true + 10); //11

alert("2" + 10); //210,这里不自动调用Number函数，而是进行字符串连接运算
alert(Number("2") + 10); //12

//parseInt()函数，将“数字字符串”直接转换成“整数型数字”
var v = "3.14";
v = parseInt(v);
alert(v); //3

//parseFloat()函数
var x = "3.14";
x = parseFloat(x);
alert(x + 1); //4.14

3.Boolean类型

布尔类型在JavaScript中只有两个值：true和false，没有0和1

//Boolean()函数,将非布尔类型转换成布尔类型
alert(Boolean("")); //false
alert(Boolean(undefined)); //false
alert(Boolean(NaN)); //false
alert(Boolean(0)); //false
alert(Boolean(null)); //false
alert(Boolean("abc")); //true
alert(Boolean(1)); //true

//if(必须是true或者false，如果不是将自动调用Boolean函数进行类型转换)语句

4.String类型

在JS中字符串String类型被当作基本数据类型，typeof运算符运算结果是“string”
String()函数，将非字符串转换成字符串类型

5.Object类型

Object类型不属于“原始类型/基本数据类型”，属于引用数据类型
JS中的Object和Java中的Object类似，也是所有类的超类
Object类型的“引用”中也是保存了对象的内存地址，该“引用”指向了内存中的对象
JS中也有this关键词，this代表的也是当前对象
Object类型所有的值
- new Object() Object是内置支持类，类名是“Object”，可以直接拿来使用
  - new Student()Student是自定义的类，类名是“Student”，默认父类是“Object”
- null null属于“Object”类型

//创建对象，采用new运算符
var obj = new Object();

//重点：
//Object类以及所有Object子类都有prototype属性
//该属性的作用是给类动态扩展属性或函数的

//第一种方式
function User(a,b){ //可以看作普通函数，可以看作构造函数，可以看作是一个类的定义
  this.uesrname = a;
  this.password = b;
  this.doSome = function(){
    alert(this.username + " do something!");
  }
  this.shopping = function(){
    alert(this.username + " is shopping");
  }
}
//这种调用方式，只是将User当作了一个普通的函数来使用（只有压栈动作，不创建对象）
User();
//这种方式将User当作一个类，当作一个构造函数来使用，底层会在堆内存中创建对象
u = new User();
alert(u.username); //undefined
alert(u.password); //undefined
//给User类动态扩展一个login()函数
User.prototype.login = function(){
    return (this.username == "admin" && this.password = "123");
}
//所有的User类型的对象都有login函数

//第二种方式
Employee = function(empno,ename,sal){
  this.empno = empno;
  this.ename = ename;
  this.sal = sal;
  
  this.work = function(){
    alert(this.ename + " is working!");
  }
}
//创建对象
var e = new Employee(1111,'SMITH');
//调用方法
e.work();
//扩展函数
Employee.prototype.eat = function(){
    alert(this.ename + "吃饭！");
}

7.String类

1.内置支持类，类名String，父类名Object，也可以new，也可以直接使用

2.JS中提供了两个String，一个String是基本数据类型，一个String是内置支持类

3.基本数据类型String和引用数据类型String共享所有的属性和方法

4.

   var s1 = "yyb"; //基本数据类型
   alert(typeof s1); //String
   alert(s1.length); //3

   var s2 = new String("yyb"); //引用数据类型
   alert(typeof s2); //Object
   alert(s2.length); //3

   /*String内置支持类的常用函数
    - charAt()
       - indexOf()
         - replace()
         - split()
         - substr()
         - substring()
         - toUpperCase()
   */

8.=、==、===的区别

= 表示赋值运算
== 表示比较两个变量的值是否相等
=== 表示比较两个变量的值是否相等，同时也会比较两个变量的数据类型是否相同

  var v1 = 1;
  var v2 = true;
  alert(v1 == v2); //true

9.null、undefined、NaN的区别

1.null是Object类型，undefined是Undefined类型，NaN是Number类型

2.null和undefined是等价的，值相等

3.NaN和NaN的值不相等

10.void运算符

不返回任何值

<a href="javascript:void(0);" onclick="alert("Hello world!");"></a>
<!-- 保留超链接样式，点击执行一段JS代码，并且禁止页面跳转 -->

11.JS控制语句

if
switch
while
do...while...
for

for...in

for (变量 in 对象)
{
 在此执行代码
}

break,continue
with

12.Array类

1.内置支持类，表示一个数组类

2.创建数组

静态初始化

var arr = [元素1,元素2,元素3...];
//元素类型可以不统一

动态初始化

var arr = new Array(3); //动态创建三个长度的数组，3个元素默认值都是undefined
var arr = new Array(1,2,3); //动态创建一个3个长度的数组，这3个元素分别是1，2，3

//JS数组没有下标越界异常，因为数组可以自动扩容，JS数组的长度是可变的
arr[10] = 100;
alert(arr.length); //11

3.二维数组定义和初始化

//1.直接定义并初始化，数量少时可以用
var var1 = [["yyb","1"],["yz","2"],["yyf","3"]];

//2.
var arr = new array(new array(1,2),new array("a","b"));
alert(arr[1][0]);

//3.
var arr = new array();         //先声明一维
for(var i=0;i<5;i++){          //一维长度为5
  arr[i]=new array();    //在声明二维
  for(var j=0;j<5;j++){      //二维长度为5
    arr[i][j]=1;
  }
}