您的位置：首页 > Web前端 > JavaScript

Java笔记--Web前端知识汇总之三 JavaScript

2016-09-02 23:51 555 查看
JavaScript



一.JavaScript概述

1.JS简介

JS是一门基于对象和事件驱动的脚本语言, 主要应用在客户端

基于对象
事件驱动
脚本语言

JS的特点:
解释运行，没有编译过程
基于对象
弱类型

JS的优点:
交互性
安全性
跨平台性

2.在html中引入js
(1) 直接在html中书写js代码
在<head>标签下的<script type="text/javascript">/script>标签的内部 可以书写js代码

(2) 通过引入的方式引入js
在<head>标签下的<script type="text/javascript" src="demo1.js"></script>标签来引入外部的js文件
注意: <script>标签不能自闭, 否则会引入失败!!!


二.JS的语法

1.JS的注释

单行注释: //注释内容

多行注释: /* 注释内容 */

2.数据类型
(1) 基本数据类型
数值类型(number) 字符串类型(string) 布尔类型(boolean) undefined null
(a)数值类型 -- number
在js中 所有的数值在底层都是浮点型, 但是在处理和显示的时候, js会自动的在整型和浮点型之间进行转换
1, 3, 5, 100, .....
Infinity 正无穷大
-Infinity 负无穷大
NaN (not a number) 非数字 NaN和任何数值都不相等 包括它本身 NaN和任何数值做运算结果都是NaN. 如果想要判断一个数值是否是非数字 不能通过xx == NaN 去判断 可以通过一个方法 isNaN(xx) 来判断

在js中, 数值类型是一个基本数据类型, 但是在js中也为数值类型提供了对应的包装对象 -- Number, 并提供了一些重要的属性和方法
Number提供的属性：
Number.MAX_VALUE 可表示的最大数字
Number.MIN_VALUE 可表示的最小数字
Number.NaN 非数字值
Number.POSITIVE_INFINITY 正无穷大
Number.NEGATIVE_INFINITY 负无穷大
(2) 字符串类型 -- string
在js中, 字符串也是基本数据类型, 字符串常量必须用单引号或者是双引号引起来.
在js中也为字符串类型提供了对应的包装对象 -- String, 并提供了一些重要的属性和方法
length -- 字符串的长度

(3) boolean
在js中也为布尔类型提供过来对应的包装对象 -- Boolean, 并提供了一些重要的属性和方法

(4) undefined
undefined的类型的值只有一个,就是undefined, 表示变量未定义, 如果定义了一个变量但是没有为其初始化值, 那么该变量就是一个undefined

(5) null
null类型的值只有一个, 就null, 表示空值
作为函数的返回值,
4000
表示函数返回的是一个空的对象

(2) 复杂数据类型
对象 -- (普通对象 数组 函数)

**js中数据类型的转换




在js中数据类型在需要时会自动的进行类型的转换, 转换的规则如下:
数值类型:
转字符串, 直接转成对应值的字符串
转布尔, 0 和 NaN转成false, 其他值转成true
在需要时会自动的转成对应值的包装对象

字符串:
空字符串(""): 转数字为 0, 转布尔为 false
非空纯数字字符串("123"): 转数字为对应值的数值, 转布尔 true
非空非数字字符串("abc"): 转数字为NaN, 转布尔是true
在需要时会自动的转成对应值的包装对象

布尔类型:
true: 转数字为 1, 转字符串为"true"
false: 转数字为 0, 转字符串为"false"
在需要时会自动的转成对应值的包装对象

undefined:
转数字为 NaN, 转字符串为"undefined", 转布尔值为false, 转对象会抛出异常.
null
转数字为 0, 转字符串为"null", 转布尔值为false, 转对象会抛出异常.

3.变量的定义
在js中有数据类型, 但是变量是不区分数据类型的 所以称js一门弱类型的语言
通过var关键字类定义变量, 变量不区分类型, 可以指向任意类型的值

4.运算符
js中的运算符和java中的运算符大致相同
typeof -- 判断变量或表达式的数据类型
delete -- 删除数组中的元素 或者是 对象中的属性和方法

----------------------js中的运算符----------------------
js中运算符和Java中运算符大致相同

算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-+，*=，/=，%=
比较运算符: ==，!=，===，!==，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，||
前置逻辑运算符: ! (not)
三元运算符: ? :
其他运算符: typeOf, delete

js中比较运算符中的 ==(或!=) 和 ===(或!==)的区别:
(1)== 是相等运算符, 比较两个值是否相等,如果比较的两个值是同一类型, 直接进行比较;
如果比较的两个值不是同一类型, 会自动转换成同一类型再比较是否相等
(2)=== 是严格相等运算符, 比较的两个值必须是同一类型, 否则直接返回false.
例如:
1 == "1" //true  先转换成同一类型再比较是否相等
1 == true //true  先转换成同一类型再比较是否相等
1 == (4-3) //true

1 === "1" //false  不是同一类型, 直接返回false
1 === "true" //false  不是同一类型, 直接返回false
1 === (4-3)  //true  同一类型,并且值相等

typeOf运算符
typeOf是一个一元运算符, 放在一个运算数之前, 这个运算数可以是任意类型的.
它的返回值是一个字符串, 表示这个运算数的类型, 如:
var a = 100;    typeOf a; //"number"    (还包括任意数值和NaN)
var b = "abc";  typeOf b; //"string"    (包括任意字符串)
var c = true;   typeOf c; //"boolean"
var d = undefined;  typeOf d; //"undefined"
var d = null;   typeOf d; //"object"

typeOf后面可以跟上圆括号, 在求一个表达式的类型时,可以用圆括号括起来, 例如:
typeOf(1+"100");
这让typeOf看起来像一个函数, 注意它是一个运算符, 不是函数!

附:  typeof null // "object"
上面代码表示，查询null的类型，返回结果是object（对象）。
这并不是说null的数据类型就是对象，而是JavaScript早期部署中的一个约定俗成，其实不完全正确，
后来再想改已经太晚了，会破坏现存代码，所以一直保留至今.

delete运算符
delete是一个一元运算符, 它用来删除对象属性或者数组的元素. 返回值是布尔值, 表示是否删除成功. 如:
var a = [1,2,3];    //定义一个数组
delete a[2];    //删除最后一个元素
alert(a[3]);        // 最后一个元素在数组中已经不存在了

a.length;   // => 3 注意, 数组的长度并没有改变, 尽管元素已经删除, 但是删除操作留下了一个"洞",
并没有影响数组的长度, 因此数组长度仍然是3

5.语句
js中的语句和java中的大致相同
(1)if判断语句
判断条件可以不是布尔类型, 会自动进行类型的转换

(2)switch选择语句
变量的类型可以是字符串

(3)循环语句
while循环  do...while循环  for循环 for...in

6.函数 -- 就是一组整合在一起的具有功能的代码块 可以反复调用
(1) 通过function关键字来定义函数
function 函数名(形参列表){
函数体
...
}

函数名(实参列表);

function fn1(name, addr){
alert(name+"~"+addr);
}

(2) 通过函数表达式来定义函数
var fn = function(形参列表){
函数体
...
}

函数名(实参列表);

var fn8 = function (name,nickname){
alert(name+"~~"+nickname);
}

(3) 通过Function构造函数定义函数
var fn = new Function("参数1", "参数2",...., "函数体");

函数名(实参列表);

var fn9 = new Function("name", "age", "alert(name+'~~'+age)");
fn9("孙权", "35");

**JS中的参数问题:
在js中, 不传参数也可以调用函数
实参个数可以小于 等于 大于形参个数 当实参个数大于形参个数时, 多出来的参数 可以通过 arguments(所有实参组成的数组)数组来获取
注意: 该变量只能在函数内部使用

由于不传参数也可以调用函数, 但是可能会引发一些错误或者是一些意外的操作, 可以通过设置默认值或者判断 来避免这种情况!!

**JS中的函数可以赋值给其他的引用, 也可以作为参数传给其他的函数, 甚至可以作为函数的返回值
JS中的函数也是对象的一种
之所以具有这样的特性, 是因为js是一门解释执行的脚本语言, 没有编译的过程, 直接执行的就是源代码. 而js中的函数就是一组具有功能的代码块, 本质上就是一段字符串, 函数的执行其实就是这段字符串在执行!!!
7.数组 -- 用[]括起来的并用逗号分隔的一组内容, 本质上也是一段字符串
(1) 通过Array构造函数来创建数组
var arr = new Array(); //创建一个空数组
var arr = new Array(10); //创建一个指定长度的数组
var arr = new Array(10, "abc", true); //创建一个指定初始值的数组

(2) 通过数组直接量来创建数组
var arr = []; //创建一个空数组
var arr = [10, "abc", true]; //创建一个指定初始值的数组

**js中的数组的长度是可以被任意改变的 如果数组中某一个位置没有元素, 该处的值就是undefined
**js中的数组包含的元素可以是任意的类型
**在js中可以通过改变数组的长度来删除元素, 甚至可以清空数组
8.对象
(1) js中的内置对象
String对象
Array对象
Date对象
Math对象
Global对象
RegExp对象

(2) 自定义对象
方式一:
function Person(){}
var p = new Person();
p.name = "张三";
p.age = 23;
p.run = function(){
alert(this.name+"~"+this.age+"~running~~~");
}

方式二:
function Person(name, addr){
this.name = name;
this.addr = addr;
this.run = function(){
alert(this.name+"~"+this.addr+"~~running~~~");
}
}

var p = new Person("李四", "北京");

方式三:
var p = {
name: "王五",
nickname: "五五",
run: function(){
alert(this.name+"~"+this.nickname+"~~running~~~");
}
}

**可以为对象动态的添加属性或方法

(3) 对象的操作
**可以为对象动态的添加(或删除)属性或方法
//delete -- 删除数组中的元素或对象上的属性或方法

var p = {
name: "王五",
nickname: "五五",
run: function(){
alert(this.name+"~"+this.nickname+"~~running~~~");
}
}

alert(p.name);
delete p.name;
alert(p.name);

**对象属性或方法的其他访问方式
p.name
<==>
p["name"]

**with语句

**for...in语句
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航