第11讲.JavaScript基础

作者: 祥祺 | 来源:发表于2020-03-18 08:34 被阅读0次

JavaScript讲义（第一天）

JavaScript简介

JS概述

简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风与Self及Scheme较为接近。为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

组成部分
JavaScript 的内容，包含以下三部分：

ECMAScript（核心）：JavaScript 语言基础(规定了 JavaScript 脚本的核心语法，如数据类型、关键字、保留字、运算符、对象和语句等，它不属于任何浏览器。)；

DOM（文档对象模型）：规定了访问HTML和XML的接口(提供了访问 HTML 文档（如body、form、div、textarea等）的途径以及操作方法)；Node:Document,Element,Attr,Text

BOM（浏览器对象模型）：提供了独立于内容而在浏览器窗口之间进行交互的对象和方法(提供了访问某些功能（如浏览器窗口大小、版本信息、浏览历史记录等）的途径以及操作方法)。

基本特点

是一种解释性脚本语言（代码不进行预编译）。

主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

日常用途

嵌入动态文本于HTML页面。

对浏览器事件做出响应。

读写HTML元素。

在数据被提交到服务器之前验证数据。

检测访客的浏览器信息。

控制cookies，包括创建和修改等。

JS代码存在的位置

方式一:js代码需要使用<script></script>标签包裹,可以存放在<html>标签中的任何位置,但是推荐写在<head></head>标签里面

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    // 在页面上弹出一个提示框
    alert("hello,js");
</script>
</head>

方式二: 单独编写一个文件(*.js)来存放javascript代码,然后在需要使用的html页面直接引入该js文件

index.js:
    alert("hello,js");
    
index.html:
    <script type="text/javascript" src="index.js"></script>

注意：script 标签是双标签, 不能弄成单标签

方式三:把js代码编写在a标签的href属性里,点击a标签的时候,就会执行里面的代码

<a href="javaScript:alert('hello,js');">点我</a>

<a href="javaScript:;" onclick="alert('hello,js')">点我</a>

注意：javaScript单词不区分大小写，但是后面的分号不能省略

ECMAScript

语法

基本语法

JavaScript中的标识符

变量，常量，函数，语句块也有名字，我们统统称之为标识符。标识符可以由任意顺序的大小写字母、数字、下划线(_)和美元符号($)组成，标识符不能以数字开头，不能是JavaScript中的保留字或关键字。

合法的标识符举例：indentifier、username、user_name、_userName、$username

非法的标识符举例：int、98.3、Hello World

JavaScript严格区分大小写

username和userName是两个完全不同的符号

JavaScript程序代码的格式

每条功能执行语句的最后必须用分号(;)结束，每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开 。

语句块使用{}来表示

JavaScript程序的注释

/*…*/中可以嵌套“//”注释，但不能嵌套“ /*…*/”。 
/**..文档注释.*/

和Java对比起来学习

关键字

关键字.png

保留字

保留字.png

变量

什么是变量，系统为之设置一个标识，程序可以用变量名来指向具体的对象内存，并通过变量名来获得对应的对象。

声明变量要使用var关键字

例如：var username;

声明变量的同时为其赋值

例如：var username = "hesj";

对已赋值的变量赋予一个其他类型的数据

例如：username =18;

不事先声明变量而直接使用

例如：x = 1234;

提示：javascript定义变量无需指定类型，任何类型都使用var声明,感觉var就有点l类似于java中的Object类型了

==================================================

打印对象:

方式1: alert(变量名);

方式2: console.log(变量名);

基本类型和常量

Number(数字类型)

1、整型常量(10进制\8进制\16进制)

十六进制以0x或0X开头，例如：0x8a。

八进制必须以0开头，例如：0123。

十进制的第一位不能是0（数字0除外），例如：123。

２、实型常量

 12.32、193.98、 5E7、4e5等。

特殊数值：NaN、Infinity(除数为零)，所对应的判断函数isNaN()、isFinite()

var n= 1/'d';
console.log(n);
var m = 1/0;
console.log(m);

Boolean(布尔值) true和false。

String字符串(注意js中没有char类型，所有'a'也是一个字符串)

 “a book of JavaScript”、‘a’、 “a”、“”。

字符串中的特殊字符，需要以反斜杠（\）后跟一个普通字符来表示。

null常量

undefined常量 (未定义,定义未赋值)

typeof运算符:typeof:判断变量的数据类型

var msg='hesj'; 

console.log(typeof msg );

msg=18;

console.log(typeof msg );

运算符

比较运算符

= 和 == 以及 === 之间的区别

= 赋值运算符,用于把一个常量/变量的值赋值给另外一个变量

== 比较运算符,用于比较两个数据的值是否相等,不会去判断类型     
    console.log("18" == 18 );

=== 比较运算符,先判断数据类型是否相等,然后在去判断值是否相等 
    console.log("18" === 18);

逻辑运算符

在逻辑运算中 0,"",false,NaN,undefined,null 表示为false,其他所有的数据都表示true

a && b  将 a, b先转换为Boolean类型,在执行逻辑与,若a为false,则返回a,否则就返回b

a  ||  b  将 a, b先转换为Boolean类型,再执行逻辑或,若a为true,则返回a,否则就返回b

&& 和 || 运算符的区别(开关)

&& 操作:从左往右依次判断,返回第一个为false的值,否则返回最后一个值

||  操作:从左往右依次判断,返回第一个为true的值,否则返回最后一个值

案例:

console.log(true && true);

console.log(1 && true);

console.log(1 && 2);

console.log("A" && 2);

console.log("" && 2);

console.log(null && "B");

console.log("A" && "B");

console.log(1 && 2 && 3);

console.log(1 && null && 3);

console.log("" && null && 0);

流程控制

和java中的语法都一样。不再赘述。

函数

函数的作用

将脚本编写为函数,避免页面载入时就执行该脚本

写在函数里面的js代码,只需要定义一次,就可以多次调用,提高代码的复用性

函数的定义和调用

通过关键字 function来定义一个函数

普通函数的语法格式:


function 函数名([参数名称1,参数名称2,...,参数名称N]){

     //程序代码
     [return 返回值;]// 可有可无
}

定义无参数无返回的函数：

// 函数的定义
function fun1(){
    console.log("我是无参数无返回值的函数")
}
// 函数的调用
fun1();

定义有参数无返回的函数

// 函数的定义
function fun2(a){
    console.log("我是有参数无返回值的函数" + a);
}

// 函数调用
fun2("哈哈");
var result = fun2("hehe");// undefined

注意：如果函数没有返回值,就默认返回undefined

定义有参数有返回的函数

//函数的定义
function fun3(a,b,c){
     return a + b;
}

// 函数调用
console.log(fun3(3,5));// 实际参数个数比形式参数少，有可能会报错
console.log(fun3(3,5,2));
console.log(fun3(3,5,3,4));// 实际参数个数比形式参数多，不会报错

定义匿名函数

语法：

var 函数变量= 函数名([参数名称1,参数名称2,...,参数名称N]){

     //程序代码
     [return 返回值;]// 可有可无
}

调用：


// 没有返回值的情况
 函数变量([参数名称1,参数名称2,...,参数名称N]);
// 有返回值的情况
var result = 函数变量([参数名称1,参数名称2,...,参数名称N]);

例子：

 // 定义add函数
var add = function(x, y) {
    return x + y;
}
// 执行add方法并，把执行的返回值赋值给result变量
var result = add(4,5);
console.log("result---",result)

// 将add函数赋给sum
var sum = add;
// 执行sum函数
console.log("sum---",sum(2, 3));

一般定义一个函数时,我们会给函数其一个固定的名称,我们称之为函数名

匿名函数是指没有固定的函数名称,通常情况是定义一个变量接受该匿名函数

实际开发中用的非常之多,可以把匿名函数看成一个普通的值来理解

函数定义一次,可以多次调用

全局变量和局部变量

全局变量:function外部定义的变量就是全局变量

局部变量:function内部定义的变量就是局部变量

访问变量的原则:就近原则,谁离我最近,我就访问谁

<script type="text/javascript">
   var msg = "全局变量";
    function show()
    {
         msg = "局部变量";
     }
    show();
    alert(msg);// 局部变量
</script>

全局函数

参见与:W3C javascript.chm ---> JavaScrixpt 全局对象参考手册

encodeURI及encodeURIComponent方法。

返回对一个URI字符串编码后的结果。

console.log(encodeURI("http://baidu.com?name=张三"))

decodeURI及decodeURIComponent()方法。

将一个已编码的URI字符串解码成最初始的字符串并返回。

console.log(decodeURI("http://baidu.com?name=%E5%BC%A0%E4%B8%89"))

parseInt方法

将一个字符串转换成number类型，转换原则是尽可能的转换

console.log(parseInt("12.4"));

console.log(parseInt("12c4.4"));

parseFloat方法

将一个字符串转换成对应的小数。 

console.log(parseFloat("12.34"));

console.log(parseFloat("124.5t6"));

eval 方法

将参数字符串作为一个JavaScript表达式执行。

var str = "alert(12)";

eval(str);

面向对象

JS中面向对象设计

对象中所包含的变量就是对象的属性,对象中所包含对属性操作的函数就是对象的方法,对象的属性和方法统一称为对象的成员.

类是对某一类事务的描述,是抽象的概念,而对象实例是某一类的具体个例

能够被用来创建对象实例的函数就叫对象的构造函数,使用new关键字和对象的构造函数就可以创建一个对象实例,具体语法格式:

var objInstance=new ObjName([实际参数列表]);

JS中自定义类

JS中创建一个类,只需要定义一个类的构造函数(方法)

this关键字:

在构造函数中,this指新创建的对象

在普通的方法中谁调用this所在的函数/方法,this就指向谁

//定义一个类

function User(){};

//创建一个对象

var user=new User();

//给对象添加属性

user.name="hesj";

//打印对象信息

console.log(user)

//打印对象相关属性

console.log(user.name);
 
//给对象添加一个方法

user.say=function(){

    alert("师姐,你好!");

}

//调用对象的方法
user.say();

构造函数和this

this关键字:

在构造函数中:this指新创建的对象

在函数/方法中:谁调用this所在的函数/方法,this就是谁.

function Person(account ,pwd){
    this.username=account;
    this.pwd = pwd;
    this.say = function(){
        console.log(this.username + "---" + this.pwd);
    }
}
var p = new Person("admin","admin123");
console.log(p);
p.say();
console.log("------------------");
var p1 = new Person("root","root123");
console.log(p1);
p1.say();

参数的值传递方式

基本类型传递的是值的拷贝,引用类型传递的是内存地址值的拷贝

将基本数据类型的变量作为函数参数传递的情况：


<script language="javascript">
    function changeValue(x){
        x = 5;
    }
    var x = 3;
    changeValue(x);
    alert(x);
</script>

将对象类型的变量作为函数参数传递的情况：

 <script language="javascript">
 
    function Person(name,age){
        this.age = age;
        this.name = name;
        this.say = sayFunc; 
     }
    function sayFunc(){
            alert(this.name + ":" + this.age);
    }

    function change(p1){
        p1.name = "李四";
    } 
    var person1 = new Person("张三",18);
    change(person1);
    person1.say();

</script>

内置对象

参见与:W3C javascript.chm ---> ECMAScript 对象类型.

Object:所有对象的根类

创建对象,并设置属性和方法

var obj = new Object();

obj.name = "hesj";

obj.age = 18;

obj.sayHello = function() {

};

对象的构造函数

alert(obj.constructor);

是否有指定的属性

console.log(obj.hasOwnProperty("name1"));

迭代对象所有的属性+方法:for...in

for in 循环类似Java中的foreach循环
主要作用:
    变量对象中的属性和属性值
    变量数组中的索引和对应的值

for (attr in obj) {
    alert(attr)//属性名
    alert(obj[attr])//属性值
}

Date:

打印当前系统时间:

var d = new Date();

var day = d.getDate();

day = day<10?"0"+day:day;

var time = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + day + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

Math:


var num = Math.random();
console.log(num);

String:

// 随机生成A到Z之间的字母:65+26

var num = parseInt(Math.random() * 26);
num = num + 65;
alert(String.fromCharCode(num));

数组

js中的数组,类似于Java中的ArrayList

数组的定义

方式一:

var arr1=new Array();

arr1[0]="西游记";

arr1[1]="水浒传";

arr1[2]="三国演义";

arr1[3]="红楼梦";

arr1[10]="唐诗三百首"

方式二:类似数组中的静态初始化

var arr2=new Array("西施","王昭君","貂蝉","杨贵妃");

// 表示创建一个数组里面有1，2，3，4 元素
var arr2=new Array(1,2,3,4); 
// 表示创建一个长度为2的数组
var arr2=new Array(2);

方式三:类似数组的动态初始化

var arr3 = new  Array(4);

方式四:推荐

var arr4=["西施","王昭君","貂蝉","杨贵妃"]

注意：对于js中的数组不会出现数组越界的异常

数组的属性和方法

length－获得数组的长度；

concat－连接数组；

join－把数组转换成字符串；

pop－删除并弹出一个元素；

shift－移出第一个元素；

push－放入一个元素；

unshift－在前面追加元素；

reverse－颠倒数据中的元素顺序；

slice－截取数组;

sort－排序数组;

splice 从数组中添加/删除/替换元素,若是删除操作,则返回被删除的元素。

练习：

var arr = new Array("水浒传","红楼梦","三国演义","西游记");
var arr1 = new Array("郭富城","刘德华","张学友","黎明");
//length－获得数组的长度；
console.log(arr.length);
//concat－连接数组；
console.log(arr.concat(arr1));
//join－把数组转换成字符串；
console.log(arr.join());//默认连接符号是逗号
console.log(arr.join("#"));// 连接符号可以修改
//pop－删除并弹出一个元素；
console.log(arr.pop());//删除最后一个元素，并返回该元素
console.log(arr);
//shift－移出第一个元素；
console.log(arr.shift());// 删除第一个元素，并返回该元素
console.log(arr);
//push－放入一个元素；
console.log(arr.push("tony"));// 在数组后面添加元素，并返回该数组的长度
console.log(arr);
//unshift－在前面追加元素；
console.log(arr.unshift("lili","lucy"));// 在数组前面添加元素，并返回该数组的长度
console.log(arr);
//reverse－颠倒数据中的元素顺序；
console.log(arr.reverse());
//slice－截取数组;
// 第一个参数：开始索引，第二个参数：结束索引 ；前闭后开原则
console.log(arr.slice(1,3));
//sort－排序数组;
console.log(arr.sort());
//splice 从数组中添加/删除/替换元素,若是删除操作,则返回被删除的元素。

/**
 * arrayObject.splice(index,howmany,item1,.....,itemX)
 * index:必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
 * howmany:必需。要删除的项目数量。如果设置为 0，则是添加。
 * item1:可选。向数组添加的新项目。
 */
console.log("----------------");
// 添加
console.log("添加前：",arr);
arr.splice(1,0,"嘿嘿");
console.log("添加后：",arr);
console.log("----------------");
// 删除
console.log("删除前：",arr);
arr.splice(1,2);
console.log("删除后：",arr);
console.log("----------------");
//修改
console.log("修改前：",arr);
arr.splice(1,1,"hello");
console.log("修改后：",arr);

数据的高级操作

forEach(function(item,index,arr){}) 循环遍历数组的元素

var arr = new Array("水浒传","红楼梦","三国演义","西游记");
arr.forEach(function(item,index,a){
    console.log(item + "--" + index + "--" + a);
});

// 把上面的函数进行拆解
function fn(item,index,a){
    console.log(item+"--" + index+"--" + a);
}

for(var i =0;i<arr.length;i++){
    fn(arr[i],i,arr);
}

map(function(item,index,arr){}) 遍历数组元素,并且返回一个对应的数组

var arr = new Array("水浒传","红楼梦","三国演义","西游记");
var aa = arr.map(function(item,index,a){
    console.log(item + "--" + index + "--" + a);
    return item+"-update";
});
console.log(aa);

for in循环

for in 是对对象进行迭代,迭代出的是所有的属性和方法

语法：


for(变量 in 集合/对象){
    执行语句块
}

例子：

var arr = new Array("a","b","c");
// 遍历数组：i 表示索引位置
for(var i in arr){
     console.log(arr[i]);
}

function User(username,pwd){
    this.username = username;
    this.pwd = pwd;
}
var u = new User("张三","123");
// 遍历对象：i 表示对象属性或者方法
for(var i in u){
    console.log(u[i]);  
}

prototype

prototype 属性使您有能力向对象添加属性和方法

object.prototype.name=value

用于给类设计和定义方法

需求：给数组添加一个set(index,newEle)方法,用于修改某个位置的值

 //给数组添加一个set(index,newEle)方法,用于修改某个位置的值
Array.prototype.set=function(index,newEle){
    this.splice(index,1,newEle);
}

var  arr1=[1,2,3,4];
// 修改索引位置为3的数据，修改为9（索引从0开始）
arr1.set(3,9); 
console.log(arr1);

var arr2=["A","B","C","D"];
// 如果数组中没有该索引位置，则在数组后面新增一个元素
arr2.set(8,13);
console.log(arr2);