day09_javaScript基础

今日内容

1.JavaScript历史由来

2. JavaScript语法(和java类似)

3. JavaScript常用对象(和java对象调用方法类似)

JavaScript

一. 概念: 一门客户端脚本语言

1. 运行在客户端浏览器中的, 每一个浏览器都有JavaScript的解析引擎

2. 脚本语言: 不需要编译, 直接就可以被浏览器解析执行了

注意事项: 不编译直接运行, (编译时期不报错, 需要认真写!)

二. 功能:

1. 可以用来增强用户和html页面的交互过程, 可以来控制html元素, 让页面有一些动态效果, 增强用户的体验

三. JavaScript发展史

1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为： C-- ，后来更名为：ScriptEase

2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript

3. 1996年，微软抄袭JavaScript开发出JScript语言

4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

* JavaScript =ECMAScript + JavaScript自己特有的东西(BOM+DOM)

BOM浏览器对象 DOM(html 文档对象)

四. ECMAScript: 客户端脚本语言的标准

1. 基本语法:

* 与HTML结合方式

1. 内部JS

* 定义<script>, 标签体内容就是js代码

* 例如:

<scripttype="text/javascript">

alert("你好")

</script>

2. 外部JS

* 定义<script>，通过src属性引入外部的js文件

* 例如:

<scriptsrc="路径"type="text/javascript" charset="utf-8"></script>

3. 注意事项:

* <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。

* 推荐定义在</body>前面

* <script>可以定义多个。

* 开发时推荐使用内部JS(好调试),部署时推荐使用外部JS(整理到一起好维护)

* 注释

1. 单行注释: //注释内容

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

* 数据类型

1. 原始数据类型(基本数据类型)

1. number: 数字 整数/ 小数/NaN(NOT a number 一个不是数字的数字类型)

2. string: 字符串 字符串 "aaa" "a"'aaa'

3. boolean: true/false

4. null: 一个对象为空的占位符

5. undefined: 未定义 如果一个变量没有给初始化值, 则会被默认赋值为undefined

2. 引用数据类型: 对象

* 变量

1. 变量: 一小块存储数据的内存空间

2. Java语言是强类型语言, 而JavaScript是弱类型语言

* 强类型: 在开辟变量存储空间时,定义了空间将来存储的数据的数据类型, 只能存储固定类型的数据

* 弱类型: 在开辟变量存储空间时,不定义空间将来存储的数据类型, 可以存放任意类型的数据

* var 变量名 = 初始化值;

*例如:

[Java] 纯文本查看 复制代码

<scripttype="text/javascript">
// 一个变量可以接受任意数据类型
// JS所有类型变量用var定义和接受
var a = 123;
document.write(a +'<br />');
a = NaN;
document.write(a +'<br />');
a = '你好';
document.write(a +"<br />");
a = true;
document.write(a +'<br />');
a = undefined;
document.write(a +'<br />');
var b;
document.write(b +'<br />'); // 未定义b, 显示undefined
</script>

* 总结:

1. JS所有类型变量用var定义和接收

2. JS的类型变量如果没有赋值, 默认undefined

* JS和java的区别

1. java是一门变成语言, 并且是强类型语言, 就是变量都有严格的类型规定

2. java语言, 先编译, 后运行, 依赖JVM虚拟机

3. JS是一门客户端脚本语言, 并且是弱类型语言, 就是变量都有var定义

4. JS语言可以直接运行(只要电脑上有浏览器即可)

*. 查看类型: typeos();

例如:

[Java] 纯文本查看 复制代码

<scripttype="text/javascript">
var c = null;
document.write(c +"是" + typeof(c) + "类型的" + "<br />");
var num = 123;
document.write(num+ "是" +typeof(num) + "类型的" + "<br/>");
var str = '你好';
document.write(str+ "是" +typeof(str) + "类型的" + "<br/>");
var booleanA =true;
document.write(booleanA+ "是" +typeof(booleanA) + "类型的" + "<br/>");
var a;
document.write(a +"是" + typeof(a) + "类型的" + "<br />");
</script>

运行结果:

null是object类型的

123是number类型的

你好是string类型的

true是boolean类型的

undefined是undefined类型的

·        undefined - 如果变量是 Undefined 类型的

·        boolean - 如果变量是 Boolean 类型的

·        number - 如果变量是 Number 类型的

·        string - 如果变量是 String 类型的

·        object - 如果变量是一种引用类型或 Null 类型的

注释：您也许会问，为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

* 运算符:

1. 一元运算符: 只有一个运算数的运算符

++ -- +/- (正号/负号)

* ++ / -- 自增 / 自减

++ / -- 在前: 先自增(自减), 再运算;

++ / -- 在后: 先运算, 再自增(自减);

* + / - (正 / 负号)

注意事项: 在JS中, 如果运算数不是运算符所要求的类型, 那么JS引擎会自动的将运算数进行类型转换

* 其他类型转换成number:

1. string转number: 按照字面值转换,如果字面值不是数字, 则转为NaN(不是数字的数字)

例如:

var str ="123";

var a = str + 1;//a是数字类型

var str ="abc";

var a = str + 1;//a是NaN类型

2. boolean转number: true转为1,false转为0

var flag = +true;//1

var flag = +false;//0

2. 算数运算符

+ - * / % . . .

3. 赋值运算符

= += -= . . .

4. 比较运算符

> < <=>= == ===(全等于)

* 比较方式:

1. 类型相同: 直接比较

* 字符串: 按照字典顺序比较, 按位逐一比较, 知道得出大小为止

"abc">"acb" // false

2. 类型不同, 先进行类型转换, 再比较

* ===: 全等于, 在比较值钱, 先判断类型, 如果类型不一样, 则直接返回false;

5. 逻辑运算符

&& || !

* 其他类型转boolean:

1. number: 0或NaN为假, 非0为真

2. string: 除了空字符串, 其他都是true;

3.null&undefined: 都是false;

4. 对象: 所有对象都是true;

注意事项:

1. 如果值为 null或者undefined,进行判断返回的boolean为false

2. 如果值为""空字符串, 进行判断返回boolean为false

3. 比较运算符 == 和 === 的区别

== : 进行条件判断时, 不考虑类型, 直接进行数值的比较

===: 进行条件判断时, 先比较类型, 然后再比较值

6. 三元运算符

条件?值1:值2;

* 流程控制语句

1. if . . . else .. .

2. switch:

* 在java中, switch语句可以接收的数据类型: byte, int, short, char, 枚举, String

switch(变量)

case 值:

执行语句;

break;

. . .

* 在JS中switch可以接收任意原始数据类型

3. while

4. do. . .while

5. for

* JS的特殊语法:

* 语句以 ; 结尾, 如果一行只有一条语句, 则 ; 可以省略(不建议)

* 变量的定义使用var关键字, 也可以不使用

1. 用 var 定义的变量是局部变量

2. 不用 var 定义的变量是全局变量(不建议)

解析:

1. 全局变量: 定义在方法外部的变量,是全局变量

2. 局部变量: 定义在方法内部的变量,是局部变量

* 练习 99乘法表

[Java] 纯文本查看 复制代码

<title>99乘法表</title>
<styletype="text/css">
td{
border: 1px solid;
}
</style>
<scripttype="text/javascript">
document.write("<tablewidth='50%' align='center'>");
for (var i = 1; i<=9; i++) {
document.write("<tr>")
for (var j = 1; j<= i;j++) {
document.write("<td>");
document.write(i +" * "+ j + " = " + (i*j));
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>

2. 基本对象:

* Function : 函数(方法)对象

1. 创建:

方式1: var fun = newfunction(形式参数列表, 方法体);(不使用,不符合逻辑)

方式2: function 方法名称(形式参数列表) {

方法体

}

方式3: var 方法名 = function(形式参数列表) {

方法体

}

2. 方法

3. 属性:

* length: 代表形参的个数

4. 特点:

* 方法定义时, 形式参数的类型不用写(因为都是var定义), 返回值类型也不用写

* 方法是一个对象, 如果定义名称相同的方法, 会覆盖前面的(不会报错!)

* 在JS中方法的调用只与方法的名称有关, 和参数列表无关

* 在方法声明中有一个隐藏的内置对象(数组), arguments, 封装了所有的实际参数

5. 调用:

方法名称(实际参数列表);

总结:

1. 原则: 先常见方法, 再调用

2. 常用的两种创建方式

[Java] 纯文本查看 复制代码

<script type="text/javascript">
function fun1(a,b){
a + b ;
}
var fun2 =function(a,b){
return a * b;
}
var a = fun1(1,2);
var b = fun2(2,3);
document.write(a);///undefined
//undefined 没有return 接收的返回值为undefined
document.write("<br/>");
document.write(b);// 6
var sum = 0;
function fun3(){
for (var i = 0; i< arguments.length; i++) {
sum +=arguments;
}
}
</script>

注意: 内置对象 arguments 不用创建, 直接使用, 同时也是数组对象

* Array: 数组对象

1. 创建: 三种方式

第一种: var arr= new Array(元素列表); var arr1 = new Array(1,2,3);

(注意是小括号)

第二种: var arr =new Array(默认长度); var arr2 = new Array(5);

第三种: var arr= [元素列表]; var arr3 = [1,2,3];

(注意是中括号)

第四种: var arr= new Array(); 空数组

2. 方法:

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
concat()	连接两个或更多的数组，并返回结果。	1	4
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。	1	4
pop()	删除并返回数组的最后一个元素	1	5.5
push()	向数组的末尾添加一个或更多元素，并返回新的长度。	1	5.5
reverse()	颠倒数组中元素的顺序。	1	4
shift()	删除并返回数组的第一个元素	1	5.5
slice()	从某个已有的数组返回选定的元素	1	4
sort()	对数组的元素进行排序	1	4
splice()	删除元素，并向数组添加新元素。	1	5.5
toSource()	返回该对象的源代码。	1	-
toString()	把数组转换为字符串，并返回结果。	1	4
toLocaleString()	把数组转换为本地数组，并返回结果。	1	4
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。	1	6
valueOf()	返回数组对象的原始值	1	4

3. 属性:

length: 数组的长度

4. 特点:

* JS中, 数组元素的类型是可变的, 可以是任意类型

* JS中, 数组的长度是可变的

* Boolean

* Date

1. 创建：

var date = newDate();

2. 方法：

toLocaleString()：返回当前date对象对应的时间本地字符串格式

getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

* Math: 数学对象

1. 创建:

* 特点: Math对象不用创建, 直接使用, Math.方法名()

2. 方法:

方法	描述	FF	IE
abs(x)	返回数的绝对值。	1	3
acos(x)	返回数的反余弦值。	1	3
asin(x)	返回数的反正弦值。	1	3
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。	1	3
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。	1	3
ceil(x)	对数进行上舍入。	1	3
cos(x)	返回数的余弦。	1	3
exp(x)	返回 e 的指数。	1	3
floor(x)	对数进行下舍入。	1	3
log(x)	返回数的自然对数（底为e）。	1	3
max(x,y)	返回 x 和 y 中的最高值。	1	3
min(x,y)	返回 x 和 y 中的最低值。	1	3
pow(x,y)	返回 x 的 y 次幂。	1	3
random()	返回 0 ~ 1 之间的随机数。(含0不含1)	1	3
round(x)	把数四舍五入为最接近的整数。	1	3
sin(x)	返回数的正弦。	1	3
sqrt(x)	返回数的平方根。	1	3
tan(x)	返回角的正切。	1	3
toSource()	返回该对象的源代码。	1	-
valueOf()	返回 Math 对象的原始值。	1	4

3. 属性:

PI 圆周率

总结:

1. 常见方法:

random() 随机数0~1, 包含0, 不包含1

ceil(): 向上取整

var a =Math.ceil(0.1) a = 1;

floor(): 向下取整

var b =Math.floor(9.999) b = 9;

* RegExp: 正则表达式对象

1. 正则表达式: 定义字符串的组成规则,

* 单个字符: [ ]

eg: [a] [ab][a-zA-Z0-9_]

* 特殊符号代表特殊含义的单个字符:

\d: 单个数字字符 [0-9]

\w: 单个单词字符 [a-zA-Z0-9]

* ;量词符号:

* : 出现0次或多次

? : 出现0次或1次

+ : 出现1次或多次

{m,n}: 表示 m<= 数量<=n

* m 如果缺省: {,n}: 表示最多n次

* n 如果缺省: {m,}: 表示最少m次

* 开始结束符号

^ 表示开始

$ 表示结束

2. 正则对象:

* 创建:

1. var reg = newRegExp("正则表达式");

注意事项: var reg= new RegExp("\\w{6,12}");

注意\的转译, 需要两个\\

2. var reg = /正则表达式/

* 方法:

test(参数): 验证指定的字符串是否符合定义的规范, 返回boolean值

eg: 手机号, 必须是数字, 长度是11位, 第一位是1, 第二位是 3,5,7,8,9

var reg =/^1[3|5|7|8|9]{1}[0-9]{9}$/;

* Global

1. 特点: 全局对象, 这个Global中封装的方法不需要对象就可以直接调用,

方法名();

2. 方法:

* encodeURI() :url编码

* decodeURI() :url解码

了解上面两个方法即可, 因为浏览器会自动对url参数进行url编码和解码

目的意义: 在开发中, 在后台服务器端使用rul编码和解码处理中文乱码问题, 因为只对中文编码和解码

*encodeURIComponent() : url编码

*decodeURIComponent() : url解码

* parseInt():将字符串转为数字

* 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number

* isNaN():判断一个值是否是NaN

* NaN六亲不认，连自己都不认。NaN参与的==比较全部问false

*eval():将JavaScript 字符串，并把它作为脚本代码来执行。

eg:

[Java] 纯文本查看 复制代码

<scripttype="text/javascript">
var str = "传智播客";
document.write(str+ "<br />"); //传智播客
var encode =encodeURI(str);
document.write(encode+ "<br />");
//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var str2 ="234abc";
var number = parseInt(str2);
document.write(number+ "<br />"); //234
var str3 ="a234abc";
var number3 =parseInt(str3);
document.write(number3+ "<br />"); //NaN
var str4 ="alert('你好!')";
eval(str4);
</script>

五. BOM

六. DOM

day10_javaScript高级

今日内容

JavaScript:

BOM

DOM

事件:

DOM简单学习: 为了满足案例需求

概述: 值得就是html文档(Document Object Model)

1. 功能: 控制html文档的内容

2. 获取页面标签(元素)对象：Element

*document.getElementById("id值"):通过元素的id获取元素对象

eg: var user =document.getElementById("user")

object代表一个完整的标签(元素), 操作标签里面的属性

3. 操作Element对象:

* 修改属性值:

1. 明确获取的对象是哪一个?

2. 查看API文档，找其中有哪些属性可以设置(假设user里面有name属性)

user.name ="jack";

* 修改标签体内容:

* 属性：innerHTML

1. 获取元素对象

2. 使用innerHTML属性修改标签体内容

* 获取属性的值

var value = 标签对象.标签属性;

var name =user.name;

事件简单学习

1. 功能: 某些组件被执行了某些操作后, 触发了某些代码的执行

2. 事件的概述: JavaScript基于对象和事件驱动的一门客户端语言

基于对象: JS里面有很多对象不用创建, 可以直接使用(内置对象)

事件驱动: html标签和事件绑定在一起, 通过事件驱动(调用)对应的方法

实现动态效果

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

HTML 事件触发浏览器中的行为

day09_javaScript基础

今日内容

1.JavaScript历史由来

2. JavaScript语法(和java类似)

3. JavaScript常用对象(和java对象调用方法类似)

JavaScript

一. 概念: 一门客户端脚本语言

1. 运行在客户端浏览器中的, 每一个浏览器都有JavaScript的解析引擎

2. 脚本语言: 不需要编译, 直接就可以被浏览器解析执行了

注意事项: 不编译直接运行, (编译时期不报错, 需要认真写!)

二. 功能:

1. 可以用来增强用户和html页面的交互过程, 可以来控制html元素, 让页面有一些动态效果, 增强用户的体验

三. JavaScript发展史

1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为： C-- ，后来更名为：ScriptEase

2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript

3. 1996年，微软抄袭JavaScript开发出JScript语言

4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

* JavaScript =ECMAScript + JavaScript自己特有的东西(BOM+DOM)

BOM浏览器对象 DOM(html 文档对象)

四. ECMAScript: 客户端脚本语言的标准

1. 基本语法:

* 与HTML结合方式

1. 内部JS

* 定义<script>, 标签体内容就是js代码

* 例如:

<scripttype="text/javascript">

alert("你好")

</script>

2. 外部JS

* 定义<script>，通过src属性引入外部的js文件

* 例如:

<scriptsrc="路径"type="text/javascript" charset="utf-8"></script>

3. 注意事项:

* <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。

* 推荐定义在</body>前面

* <script>可以定义多个。

* 开发时推荐使用内部JS(好调试),部署时推荐使用外部JS(整理到一起好维护)

* 注释

1. 单行注释: //注释内容

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

* 数据类型

1. 原始数据类型(基本数据类型)

1. number: 数字 整数/ 小数/NaN(NOT a number 一个不是数字的数字类型)

2. string: 字符串 字符串 "aaa" "a"'aaa'

3. boolean: true/false

4. null: 一个对象为空的占位符

5. undefined: 未定义 如果一个变量没有给初始化值, 则会被默认赋值为undefined

2. 引用数据类型: 对象

* 变量

1. 变量: 一小块存储数据的内存空间

2. Java语言是强类型语言, 而JavaScript是弱类型语言

* 强类型: 在开辟变量存储空间时,定义了空间将来存储的数据的数据类型, 只能存储固定类型的数据

* 弱类型: 在开辟变量存储空间时,不定义空间将来存储的数据类型, 可以存放任意类型的数据

* var 变量名 = 初始化值;

*例如:

[Java] 纯文本查看 复制代码

<scripttype="text/javascript">
// 一个变量可以接受任意数据类型
// JS所有类型变量用var定义和接受
var a = 123;
document.write(a +'<br />');
a = NaN;
document.write(a +'<br />');
a = '你好';
document.write(a +"<br />");
a = true;
document.write(a +'<br />');
a = undefined;
document.write(a +'<br />');
var b;
document.write(b +'<br />'); // 未定义b, 显示undefined
</script>

* 总结:

1. JS所有类型变量用var定义和接收

2. JS的类型变量如果没有赋值, 默认undefined

* JS和java的区别

1. java是一门变成语言, 并且是强类型语言, 就是变量都有严格的类型规定

2. java语言, 先编译, 后运行, 依赖JVM虚拟机

3. JS是一门客户端脚本语言, 并且是弱类型语言, 就是变量都有var定义

4. JS语言可以直接运行(只要电脑上有浏览器即可)

*. 查看类型: typeos();

例如:

[Java] 纯文本查看 复制代码

<scripttype="text/javascript">
var c = null;
document.write(c +"是" + typeof(c) + "类型的" + "<br />");
var num = 123;
document.write(num+ "是" +typeof(num) + "类型的" + "<br/>");
var str = '你好';
document.write(str+ "是" +typeof(str) + "类型的" + "<br/>");
var booleanA =true;
document.write(booleanA+ "是" +typeof(booleanA) + "类型的" + "<br/>");
var a;
document.write(a +"是" + typeof(a) + "类型的" + "<br />");
</script>

运行结果:

null是object类型的

123是number类型的

你好是string类型的

true是boolean类型的

undefined是undefined类型的

·        undefined - 如果变量是 Undefined 类型的

·        boolean - 如果变量是 Boolean 类型的

·        number - 如果变量是 Number 类型的

·        string - 如果变量是 String 类型的

·        object - 如果变量是一种引用类型或 Null 类型的

注释：您也许会问，为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

* 运算符:

1. 一元运算符: 只有一个运算数的运算符

++ -- +/- (正号/负号)

* ++ / -- 自增 / 自减

++ / -- 在前: 先自增(自减), 再运算;

++ / -- 在后: 先运算, 再自增(自减);

* + / - (正 / 负号)

注意事项: 在JS中, 如果运算数不是运算符所要求的类型, 那么JS引擎会自动的将运算数进行类型转换

* 其他类型转换成number:

1. string转number: 按照字面值转换,如果字面值不是数字, 则转为NaN(不是数字的数字)

例如:

var str ="123";

var a = str + 1;//a是数字类型

var str ="abc";

var a = str + 1;//a是NaN类型

2. boolean转number: true转为1,false转为0

var flag = +true;//1

var flag = +false;//0

2. 算数运算符

+ - * / % . . .

3. 赋值运算符

= += -= . . .

4. 比较运算符

> < <=>= == ===(全等于)

* 比较方式:

1. 类型相同: 直接比较

* 字符串: 按照字典顺序比较, 按位逐一比较, 知道得出大小为止

"abc">"acb" // false

2. 类型不同, 先进行类型转换, 再比较

* ===: 全等于, 在比较值钱, 先判断类型, 如果类型不一样, 则直接返回false;

5. 逻辑运算符

&& || !

* 其他类型转boolean:

1. number: 0或NaN为假, 非0为真

2. string: 除了空字符串, 其他都是true;

3.null&undefined: 都是false;

4. 对象: 所有对象都是true;

注意事项:

1. 如果值为 null或者undefined,进行判断返回的boolean为false

2. 如果值为""空字符串, 进行判断返回boolean为false

3. 比较运算符 == 和 === 的区别

== : 进行条件判断时, 不考虑类型, 直接进行数值的比较

===: 进行条件判断时, 先比较类型, 然后再比较值

6. 三元运算符

条件?值1:值2;

* 流程控制语句

1. if . . . else .. .

2. switch:

* 在java中, switch语句可以接收的数据类型: byte, int, short, char, 枚举, String

switch(变量)

case 值:

执行语句;

break;

. . .

* 在JS中switch可以接收任意原始数据类型

3. while

4. do. . .while

5. for

* JS的特殊语法:

* 语句以 ; 结尾, 如果一行只有一条语句, 则 ; 可以省略(不建议)

* 变量的定义使用var关键字, 也可以不使用

1. 用 var 定义的变量是局部变量

2. 不用 var 定义的变量是全局变量(不建议)

解析:

1. 全局变量: 定义在方法外部的变量,是全局变量

2. 局部变量: 定义在方法内部的变量,是局部变量

* 练习 99乘法表

[Java] 纯文本查看 复制代码

<title>99乘法表</title>
<styletype="text/css">
td{
border: 1px solid;
}
</style>
<scripttype="text/javascript">
document.write("<tablewidth='50%' align='center'>");
for (var i = 1; i<=9; i++) {
document.write("<tr>")
for (var j = 1; j<= i;j++) {
document.write("<td>");
document.write(i +" * "+ j + " = " + (i*j));
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>

2. 基本对象:

* Function : 函数(方法)对象

1. 创建:

方式1: var fun = newfunction(形式参数列表, 方法体);(不使用,不符合逻辑)

方式2: function 方法名称(形式参数列表) {

方法体

}

方式3: var 方法名 = function(形式参数列表) {

方法体

}

2. 方法

3. 属性:

* length: 代表形参的个数

4. 特点:

* 方法定义时, 形式参数的类型不用写(因为都是var定义), 返回值类型也不用写

* 方法是一个对象, 如果定义名称相同的方法, 会覆盖前面的(不会报错!)

* 在JS中方法的调用只与方法的名称有关, 和参数列表无关

* 在方法声明中有一个隐藏的内置对象(数组), arguments, 封装了所有的实际参数

5. 调用:

方法名称(实际参数列表);

总结:

1. 原则: 先常见方法, 再调用

2. 常用的两种创建方式

[Java] 纯文本查看 复制代码

<script type="text/javascript">
function fun1(a,b){
a + b ;
}
var fun2 =function(a,b){
return a * b;
}
var a = fun1(1,2);
var b = fun2(2,3);
document.write(a);///undefined
//undefined 没有return 接收的返回值为undefined
document.write("<br/>");
document.write(b);// 6
var sum = 0;
function fun3(){
for (var i = 0; i< arguments.length; i++) {
sum +=arguments;
}
}
</script>

注意: 内置对象 arguments 不用创建, 直接使用, 同时也是数组对象

* Array: 数组对象

1. 创建: 三种方式

第一种: var arr= new Array(元素列表); var arr1 = new Array(1,2,3);

(注意是小括号)

第二种: var arr =new Array(默认长度); var arr2 = new Array(5);

第三种: var arr= [元素列表]; var arr3 = [1,2,3];

(注意是中括号)

第四种: var arr= new Array(); 空数组

2. 方法:

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
concat()	连接两个或更多的数组，并返回结果。	1	4
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。	1	4
pop()	删除并返回数组的最后一个元素	1	5.5
push()	向数组的末尾添加一个或更多元素，并返回新的长度。	1	5.5
reverse()	颠倒数组中元素的顺序。	1	4
shift()	删除并返回数组的第一个元素	1	5.5
slice()	从某个已有的数组返回选定的元素	1	4
sort()	对数组的元素进行排序	1	4
splice()	删除元素，并向数组添加新元素。	1	5.5
toSource()	返回该对象的源代码。	1	-
toString()	把数组转换为字符串，并返回结果。	1	4
toLocaleString()	把数组转换为本地数组，并返回结果。	1	4
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。	1	6
valueOf()	返回数组对象的原始值	1	4

3. 属性:

length: 数组的长度

4. 特点:

* JS中, 数组元素的类型是可变的, 可以是任意类型

* JS中, 数组的长度是可变的

* Boolean

* Date

1. 创建：

var date = newDate();

2. 方法：

toLocaleString()：返回当前date对象对应的时间本地字符串格式

getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

* Math: 数学对象

1. 创建:

* 特点: Math对象不用创建, 直接使用, Math.方法名()

2. 方法:

方法	描述	FF	IE
abs(x)	返回数的绝对值。	1	3
acos(x)	返回数的反余弦值。	1	3
asin(x)	返回数的反正弦值。	1	3
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。	1	3
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。	1	3
ceil(x)	对数进行上舍入。	1	3
cos(x)	返回数的余弦。	1	3
exp(x)	返回 e 的指数。	1	3
floor(x)	对数进行下舍入。	1	3
log(x)	返回数的自然对数（底为e）。	1	3
max(x,y)	返回 x 和 y 中的最高值。	1	3
min(x,y)	返回 x 和 y 中的最低值。	1	3
pow(x,y)	返回 x 的 y 次幂。	1	3
random()	返回 0 ~ 1 之间的随机数。(含0不含1)	1	3
round(x)	把数四舍五入为最接近的整数。	1	3
sin(x)	返回数的正弦。	1	3
sqrt(x)	返回数的平方根。	1	3
tan(x)	返回角的正切。	1	3
toSource()	返回该对象的源代码。	1	-
valueOf()	返回 Math 对象的原始值。	1	4

3. 属性:

PI 圆周率

总结:

1. 常见方法:

random() 随机数0~1, 包含0, 不包含1

ceil(): 向上取整

var a =Math.ceil(0.1) a = 1;

floor(): 向下取整

var b =Math.floor(9.999) b = 9;

* RegExp: 正则表达式对象

1. 正则表达式: 定义字符串的组成规则,

* 单个字符: [ ]

eg: [a] [ab][a-zA-Z0-9_]

* 特殊符号代表特殊含义的单个字符:

\d: 单个数字字符 [0-9]

\w: 单个单词字符 [a-zA-Z0-9]

* ;量词符号:

* : 出现0次或多次

? : 出现0次或1次

+ : 出现1次或多次

{m,n}: 表示 m<= 数量<=n

* m 如果缺省: {,n}: 表示最多n次

* n 如果缺省: {m,}: 表示最少m次

* 开始结束符号

^ 表示开始

$ 表示结束

2. 正则对象:

* 创建:

1. var reg = newRegExp("正则表达式");

注意事项: var reg= new RegExp("\\w{6,12}");

注意\的转译, 需要两个\\

2. var reg = /正则表达式/

* 方法:

test(参数): 验证指定的字符串是否符合定义的规范, 返回boolean值

eg: 手机号, 必须是数字, 长度是11位, 第一位是1, 第二位是 3,5,7,8,9

var reg =/^1[3|5|7|8|9]{1}[0-9]{9}$/;

* Global

1. 特点: 全局对象, 这个Global中封装的方法不需要对象就可以直接调用,

方法名();

2. 方法:

* encodeURI() :url编码

* decodeURI() :url解码

了解上面两个方法即可, 因为浏览器会自动对url参数进行url编码和解码

目的意义: 在开发中, 在后台服务器端使用rul编码和解码处理中文乱码问题, 因为只对中文编码和解码

*encodeURIComponent() : url编码

*decodeURIComponent() : url解码

* parseInt():将字符串转为数字

* 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number

* isNaN():判断一个值是否是NaN

* NaN六亲不认，连自己都不认。NaN参与的==比较全部问false

*eval():将JavaScript 字符串，并把它作为脚本代码来执行。

eg:

[Java] 纯文本查看 复制代码

<scripttype="text/javascript">
var str = "传智播客";
document.write(str+ "<br />"); //传智播客
var encode =encodeURI(str);
document.write(encode+ "<br />");
//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var str2 ="234abc";
var number = parseInt(str2);
document.write(number+ "<br />"); //234
var str3 ="a234abc";
var number3 =parseInt(str3);
document.write(number3+ "<br />"); //NaN
var str4 ="alert('你好!')";
eval(str4);
</script>

五. BOM

六. DOM

day10_javaScript高级

今日内容

JavaScript:

BOM

DOM

事件:

DOM简单学习: 为了满足案例需求

概述: 值得就是html文档(Document Object Model)

1. 功能: 控制html文档的内容

2. 获取页面标签(元素)对象：Element

*document.getElementById("id值"):通过元素的id获取元素对象

eg: var user =document.getElementById("user")

object代表一个完整的标签(元素), 操作标签里面的属性

3. 操作Element对象:

* 修改属性值:

1. 明确获取的对象是哪一个?

2. 查看API文档，找其中有哪些属性可以设置(假设user里面有name属性)

user.name ="jack";

* 修改标签体内容:

* 属性：innerHTML

1. 获取元素对象

2. 使用innerHTML属性修改标签体内容

* 获取属性的值

var value = 标签对象.标签属性;

var name =user.name;

事件简单学习

1. 功能: 某些组件被执行了某些操作后, 触发了某些代码的执行

2. 事件的概述: JavaScript基于对象和事件驱动的一门客户端语言

基于对象: JS里面有很多对象不用创建, 可以直接使用(内置对象)

事件驱动: html标签和事件绑定在一起, 通过事件驱动(调用)对应的方法

实现动态效果

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

HTML 事件触发浏览器中的行为