为什么需要JavaScript？
JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需 浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意！！ javaScript和java的联系 Javascript和java除了名字和语法有点像，其他没有任何的关系。主要做:富客户端开发。 做个比较是为了让大家更好地理解javascript，事实上，两个语言根本没有可比性，是完全不同的。
js 的声明
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<title
>js的声明呵和引入
</title
>
<!--声明js代码域
-->
<!--引入外部声明好的js文件
-->
<script src
="js/my.js" type
="text/javascript" charset
="utf-8"></script
>
</head
>
<body
>
<h3
>js的声明和引入
</h3
>
<script type
="text/javascript">
alert("这是我的第一个js")
</script
>
</body
>
</html
>
<!--
js的声明学习：
1、在head标签中使用script标签进行js代码域的声明
<script type
="text/javascript">
alert("这是我的第一个js")
</script
>
作用：
声明js代码域
特点
:
js的代码只会作用于当前网页
2、在head标签中使用script标签引入外部声明好的js文件
<script src
="相对路径" type
="text/javascript" charset
="utf-8"></script
>
作用：引入外部声明好的js文件
特点：
实现js代码的重复使用，避免代码的冗余。
注意：
因为js在
HTML文档中是一门单独的语言，可以声明在文档中的任意位置
一般情况下声明在head标签中。
-->
js的变量
<html
>
<head
>
<title
>js的变量学习
</title
>
<meta charset
="UTF-8"/>
<!--
js的变量声明学习：
1、js中的所有变量声明只有
var关键字。
var a
=123;
var A=1234;
var a1
=3.1415926;
var a2
="js";
var a3
='k';
var a4
=true;
var a5
=new Date();
alert(a
);
注意：
a、js的变量名是严格区分大小的。
b、js中的字符串可以使用双引号也可以使用单引号。
c、js中可以声明同名变量，不会报错，后面的会将前面的声明覆盖。(重要
)
var a
=123;
var a
="js学习";
alert(a
);
2、中的数据类型
数据类型判断关键字：
typeof
数据类型：
number
:数字类型
var b
=456;
var b1
=1.23;
alert(typeof b1
);
string：字符串类型
var b
="今天天气真好，适合学习";
var b1
='l';
alert(typeof b1
);
boolean
:
var b
=true;
var b1
=false;
alert(typeof b1
);
object
var b
=new Date();
alert(typeof b
);
null:
空对象赋值，主要是和undefined进行区分。
Undefined
:undefined
var c
;
alert(typeof c
);
变量声明不赋值的情况下，默认值是undefined。
注意：
var d
;
alert(d
);
alert(typeof c
);
在js代码中尽可能的给声明的变量赋初始值
;
-->
<!--声明js代码域
-->
<script type
="text/javascript">
var d
;
alert(d
);
alert(typeof c
);
</script
>
</head
>
<body
>
<h3
>js的变量学习
</h3
>
</body
>
</html
>
Number.NaN 是一个特殊值，说明某些算术运算（如求负数的平方根）的结果不是数字。方法 parseInt() 和 parseFloat() 在不能解析指定的字符串时就返回这个值。对于一些常规情况下返回有效数字的函数，也可以采用这种方法，用 Number.NaN 说明它的错误情况。请使用 isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等，包括它自己。
<html
>
<head
>
<title
>js中的变量强转
</title
>
<meta charset
="UTF-8"/>
<!--
js中的数据转换：
其他类型转换为number 类型
使用Number(其他类型的数据
);
string 类型的数字字符
: 对应的number数字
string 非数字字符
: NaN(number类型
)
boolean
true: 1
boolean
false: 0
object 有具体的值
: 数字
object
null: 0
其他类型转换为boolean 类型
使用Boolean(其他类型的数据
);
number 正数或者负数：
true
number
0 : false
string 非空字符串
: true
string 空字符串
"": false
object 具体的对象
: true
object
null : false
声明不赋值的变量
: false
-->
<!--声明js代码域
-->
<script type
="text/javascript">
var a
=123;
var a1
=-123
var a2
=0;
var b
="abcdf";
var b1
="";
var d
=new Date();
var d1
=null;
var c
;
alert(Boolean(c
));
if(a
){
alert("哈哈");
}
</script
>
</head
>
<body
>
<h3
>js中的变量强转
</h3
>
</body
>
</html
>
js 的运算符和逻辑结构
<html
>
<head
>
<title
>js的运算符学习
</title
>
<meta charset
="UTF-8"/>
<!--
js的运算符学习：
算术运算符：
加法：
+
减法：
-
乘法：
*
除法：
/
余数：
%
number类型的和number类型的
number类型和boolean类型(true--1,false--0)
number类型和string类型(*,/,%,-)
string类型和string类型的数字(*,/,%,-)
string类型数字和boolean类型(*,/,%,-)
在算术运算中如果两边的数据类型不是number的话，会使用Number()强转后在进行运算
.
字符串的加法会作为字符链接，不会运算。
注意：
在字符串中“
+”符合代表的是字符串的连接符，不会参与运算
逻辑运算符：
! & && | || (与java中的一致
);
var a
=true;
var b
=true;
alert(a
&b
);
if(a
&b
){
alert("haha");
}
关系运算符：返回值为
true 或者fasle
!=:
>=:
<=:
>:
<:
自增运算符：
++:a
++ ++a
--:
+=:
-=:
-->
<!--声明js代码域
-->
<script type
="text/javascript">
var a
=true;
var b
=true;
alert(a
&b
);
if(a
&b
){
alert("haha");
}
</script
>
</head
>
<body
>
<h3
>js的运算符学习
</h3
>
</body
>
</html
>
= =与===的区别
<html
>
<head
>
<title
>js的特殊关系运算符
</title
>
<meta charset
="UTF-8"/>
<!--
等值运算符
:==
先判断类型，类型一致则直接比较。
类型不一致，则先使用Number()进行强转后再进行比较。
等同运算符
:===
先判断类型，类型一致则再比较内容，内容一致则返回
true，内容不一致则返回
false。
类型不一致则直接
false
注意：
null和undefined在做
==判断时候返回
true
-->
<!--声明js代码域
-->
<script type
="text/javascript">
var a
=1;
var a1
="1";
var a2
=true;
var a3
="true";
var a4
="a";
var a5
="a";
</script
>
</head
>
<body
>
<h3
>js的特殊关系运算符
</h3
>
</body
>
</html
>
<html
>
<head
>
<title
>js的逻辑结构和循环结构学习
</title
>
<meta charset
="UTF-8"/>
<!--
js的逻辑结构：
if结构
单分支结构：
if(判断条件
){执行体
}
双分支：
if(判断条件
){执行体
}else{执行体
}
多分支：
if(判断条件
){执行体
}else if(判断条件
){执行体
}……
else{执行体
}
swicth选择结构：
switch (a
){
case "1":
alert("第一项选择");
break;
case "2":
alert("第二项选择");
break;
default:
alert("没有对应的选项");
break;
}
注意：
判断的变量可以是number类型也可以是string类型，但是不要混用。
循环结构：
for(变量
;条件
;迭代条件
){循环体
}循环
while(循环条件
){循环体
}
do{循环体
}while(循环条件
)
-->
<!--声明js代码域
-->
<script type
="text/javascript">
var a
=123;
var b
=45;
if(a
>10){
alert(a
+b
);
}
var a
=1;
switch (a
){
case "1":
alert("第一项选择");
break;
case "2":
alert("第二项选择");
break;
default:
alert("没有对应的选项");
break;
}
for(var i
=0;i
<3;i
++){
alert("好热:"+i
);
}
for(var i
=1;i
<=9;i
++){
for(var j
=1;j
<=i
;j
++){
document
.write(i
+"*"+j
+"="+i
*j
+" ");
}
document
.write("<br />");
}
</script
>
</head
>
<body
>
<h3
>js的逻辑结构和循环结构学习
</h3
>
</body
>
</html
>
js 的数组
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<title
>js的数组学习
</title
>
<!--
js的数组学习：
1、数组的声明
var arr
=new Array();
var arr
=new Array(length
)
var arr
=[元素
]
注意：js中的数组声明不用指定长度，js的数组长度是不固定的，会随着元素的数量改变而改变。
2、数组的赋值和取值
数组可以存储任意类型的数据
数组名
[角标
]=值
;
数组的取出：
数组名
[角标
]
如果角标不存在，返回undefined
;
3、数组的length属性
作用
1：数组名
.length
作用于
2：数组名
.length
=新的值
注意：length
>原有长度，则使用空进行填充。
length
<原有长度，则从后面进行截取，最后的数据会被删除。
4、数组的遍历
普通
for循环：
for(var i
=0;i
<arr
.length
;i
++){
alert(arr
[i
]);
}
for-in：
for(var i
in arr
){
alert(i
);
}
-->
<!--声明js代码域
-->
<script type
="text/javascript">
var arr
=[1,"bnj",3,"a",4];
alert(arr
);
for(var i
in arr
){
alert(i
);
}
</script
>
</head
>
<body
>
<h3
>js的数组学习
</h3
>
</body
>
</html
>
<html
>
<head
>
<title
>js数组的常用操作
</title
>
<meta charset
="UTF-8"/>
<!--
数组的操作学习：
1、数组的合并：arr
.concat(b
,c
);
2、数组指定间隔符转换字符串
:var b
=arr
.join("-");
3、数组移除最后一个元素并返回
:var ele
=arr
.pop();
4、数组的追加，返回新的长度：
var ln
=arr
.push("lol");
5、数组的移除第一个元素
:var ele
=arr
.shift();
6、数组的在开始位置插入指定元素
:var a
=arr
.unshift("又是周五了");
7、数组删除指定位置元素：
var arr2
=arr
.splice(1,3,"a");
-->
<!--声明js代码域
-->
<script type
="text/javascript">
var arr
=[1,"abc","张三","12"];
var arr2
=arr
.splice(1,3,"a");
alert(arr
);
</script
>
</head
>
<body
>
<h3
>js数组的常用操作
</h3
>
</body
>
</html
>
计算器案例
<html
>
<head
>
<title
>计算器
</title
>
<meta charset
="UTF-8"/>
<!--声明css代码域
-->
<style type
="text/css">
#showdiv
{
border
: solid
1px
;
border
-radius
: 10px
;
width
: 320px
;
height
:400px
;
text
-align
: center
;
margin
: auto
;
margin
-top
: 50px
;
background
-color
: floralwhite
;
}
input
[type
=text
]{
margin
-top
: 20px
;
width
: 290px
;
height
: 40px
;
font
-size
: 20px
;
}
input
[type
=button
]{
width
: 60px
;
height
: 60px
;
margin
-top
: 20px
;
margin
-left
: 5px
;
margin
-right
: 5px
;
font
-size
: 30px
;
font
-weight
: bold
;
font
-family
: "萝莉体 第二版";
}
</style
>
<!--声明js代码域
-->
<script type
="text/javascript">
function test(btn
){
var num
=btn
.value
;
switch (num
){
case "=":
document
.getElementById("inp").value
=eval(document
.getElementById("inp").value
);
break;
case "c":
document
.getElementById("inp").value
="";
break;
default:
document
.getElementById("inp").value
=document
.getElementById("inp").value
+num
;
break;
}
}
</script
>
</head
>
<body
>
<div id
="showdiv">
<input type
="text" name
="" id
="inp" value
="" readonly
="readonly"/><br
/>
<input type
="button" name
="" id
="btn" value
="1"value
="" onclick
="test(this)"/>
<input type
="button" name
="" id
="" value
="2" onclick
="test(this)"/>
<input type
="button" name
="" id
="" value
="3" onclick
="test(this)"/>
<input type
="button" name
="" id
="" value
="4" onclick
="test(this)"/><br
/>
<input type
="button" name
="" id
="" value
="5" onclick
="test(this)"/>
<input type
="button" name
="" id
="" value
="6" onclick
="test(this)"/>
<input type
="button" name
="" id
="" value
="7" onclick
="test(this)"/>
<input type
="button" name
="" id
="" value
="8" onclick
="test(this)"/><br
/>
<input type
="button" name
="" id
="" value
="9" onclick
="test(this)"/>
<input type
="button" name
="" id
="" value
="+" onclick
="test(this)"/>
<input type
="button" name
="" id
="" value
="-" onclick
="test(this)"/>
<input type
="button" name
="" id
="" value
="*" onclick
="test(this)"/><br
/>
<input type
="button" name
="" id
="" value
="0" onclick
="test(this)"/>
<input type
="button" name
="" id
="" value
="/" onclick
="test(this)"/>
<input type
="button" name
="" id
="" value
="c" onclick
="test(this)"/>
<input type
="button" name
="" id
="" value
="=" onclick
="test(this)"/>
</div
>
</body
>
</html
>
js函数
<html
>
<head
>
<title
>js的函数学习
</title
>
<meta charset
="UTF-8"/>
<!--
test
,1-2,
test(1,2)
js的函数学习一：
作用
:功能代码块的封装。减少代码的冗余。
1、函数的声明：
方式一
:function 函数名(形参名
1,形参名
2……
){执行体
}
方式二
:var 函数名
=new Function("形参1","形参2"……
,"函数执行体");
注意：此声明表明在js中函数是作为对象存在的。
方式三
:var 变量名=function(形参名
1,形参名
2……
){函数执行体
}
2、函数的参数
js中的函数在调用时，形参可以不赋值，不会报错
js中的函数在调用时，形参赋值可以不全部赋值，不会报错，但是实参会依次进行赋值。
3、函数的返回值
在js中如果函数有返回值则直接返回，没有返回值默认返回undefined
注意：
js的代码声明区域和执行区域是一起的，都是在js代码的代码域中。
-->
<!--声明js代码域
-->
<script type
="text/javascript">
function test1(a1
,a2
)
{
alert("函数声明一");
}
var test2
=new Function("a1","a2","alert('函数声明二'+a1)");
var test3=function(a1
,a2
){
alert("我是函数声明三");
}
function testParam(a1
,a2
,a3
){
alert(a1
);
alert("函数的形参学习");
}
var testReturn=function(){
alert("函数的返回值学习");
}
alert(testReturn());
</script
>
</head
>
<body
>
<h3
>js的函数学习
</h3
>
</body
>
</html
>
<html
>
<head
>
<title
>js的函数学习二
</title
>
<meta charset
="UTF-8"/>
<!--
js的函数学习二
:
1、函数的执行符
:
在js中函数的执行符值()
没有小括号则函数名其实就是一个变量
加上小括号则会函数会被执行。
2、函数作为实参传递
在js中函数是可以作为实参进行传递的。
function testobj(a
){
alert(a());
}
var testParam=function(){
alert("我是函数参数");
}
testobj(testParam());
-->
<!--声明js代码域
-->
<script type
="text/javascript">
var test1=function(){
alert("函数的执行符学习");
return "js";
}
function testobj(a
){
alert(a());
}
var testParam=function(){
alert("我是函数参数");
}
testobj(testParam());
function testObj2(fn
){
fn();
}s
testObj2(function(){
alert("开发");
})
</script
>
</head
>
<body
>
<h3
>js的函数学习二
</h3
>
</body
>
</html
>
js的类和对象
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<title
>js中的类和对象学习
</title
>
<meta charset
="UTF-8"/>
<!--
js中的类学习：
1、类的声明
:
function 类名(形参
1，形参
2……
){
this.属性名
1=形参
1;
this.属性名
2=形参
2;
……
this.属性名
=fn
}
2、类的使用
:
var 对象名
=new 类名(实参
1，实参
2……
);
注意：
js中类的内容只是对象的公共部分，每个对象还可以自定义的进行扩充。
3、类的
"继承"：prototype关键字
、 同过prototype关键字实现了不同对象之间的数据共享。
作用
1:实现某个类的所有子对象的方法区对象的共享，节省内存
-->
<!--声明js代码域
-->
<script type
="text/javascript">
function Person(name
,age
){
Person
.prototype
=new User();
this.name
=name
;
this.age
=age
;
this.fav
="唱歌";
}
function User(uname
,pwd
){
this.uname
=uname
;
this.pwd
=pwd
;
}
Person
.prototype
=new User();
User
.prototype
.testU=function(){alert("我是user")};
var p1
=new Person("张三",32);
var p2
=new Person("李四",23);
alert(p1
.test
===p2
.test
);
p1
.testU();
</script
>
</head
>
<body
>
</body
>
</html
>
```javascript
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<title
>js的自定义对象
</title
>
<meta charset
="UTF-8"/>
<!--
js创建自定义对象
对象的作用：用来存储整体数据。
原因：很多时候我们没有办法预先知道一个对象应该有哪些属性，所以只能临时的创建一个对象来自定义属性存储数据。来保证数据的完成性
应用：
Ajax中会使用。
使用：
1、创建自定义对象
var 对象名
=new Object();
对象名
.属性名
1=属性值
1;
对象名
.属性名
2=属性值
2;
对象名
.属性名
3=属性值
3;
……
var 对象名
={};
对象名
.属性名
1=属性值
1;
对象名
.属性名
2=属性值
2;
对象名
.属性名
3=属性值
3;
……
2、一般用来存储数据，不会再自定义对象中存储函数对象。
3、js中的对象属性和内容是可以自定义的扩充的，不是依赖于类的声明的，类只是对象公共部分的一种声明，是为了节省代码的冗余的。
-->
<!--声明js代码域
-->
<script type
="text/javascript">
var obj
=new Object();
obj
.name
="张三";
obj
.age
=23;
obj
.test=function(){
alert("我是obj");
}
</script
>
</head
>
<body
>
</body
>
</html
>
<html
>
<head
>
<title
>js的常用对象和方法
</title
>
<meta charset
="UTF-8"/>
<!--
常用的对象和方法：
1、String
2、Date
3、Math
4、Global
-->
<!--声明js代码域
-->
<script type
="text/javascript">
var str
=new String("abcdefg");
var str2
="MNP";
var d
=new Date();
var str
="var a=123";
eval(str
);
alert(a
);
alert(isNaN("123"));
alert(parseFloat("12.34a34a"));
</script
>
</head
>
<body
>
</body
>
</html
>
js的事件机制
<html
>
<head
>
<title
>js的事件机制学习
1</title
>
<meta charset
="UTF-8"/>
<!--
js的事件机制：
解释：当我们的行为动作满足了一定的条件后，会触发某类事务的执行。
作用：主要是结合js的函数来使用。
内容
:
1、单双击事件
单击：onclick 当鼠标单击的时候会触发
双击：ondblclick 当鼠标双击的时候会被触发
2、鼠标事件
onmouseover 当鼠标悬停在某个
HTML元素上的时候触发
onmousemove 当鼠标在某个
HTML元素上移动的时候触发
onmouseout 当鼠标在某个
HTML元素上移出的时候触发
3、键盘事件
onkeyup 当键盘在某个
HTML元素上弹起的时候触发
onkeydown 当键盘在某个
HTML元素上下压的时候触发
4、焦点事件
onfocus 当某个
HTML元素获取焦点的时候触发
onblur 当某个
HTML元素失去焦点的时候触发
5、页面加载事件
onload 当页面加载成功后触发。
注意
:
js中添加事件的第一种方式：
在
HTML上直接使用事件属性进行添加，属性值为所监听执行的函数。
js中的事件只有在当前
HTML元素上有效。
一个
HTML元素可以添加多个不同的事件。
一个事件可以监听触发多个函数的执行
,但是不同的函数要使用分号间隔
-->
<!--声明js代码域
-->
<script type
="text/javascript">
function testOnclick(){
alert("我是单击");
}
function testOndblclick(){
alert("我是双击");
}
function testOnmouseover(){
alert("我是鼠标悬停事件");
}
function testOnmousemove(){
alert("我被移动了");
}
function testOnmouseout(){
alert("我被移出了");
}
function testOnkeyup(){
alert("我是键盘弹起事件");
}
function testOnkeydown(){
alert("我是键盘按下事件");
}
function testOnfocus(){
document
.getElementById("showdiv").innerHTML
="哈哈";
alert("我是获取焦点事件");
}
function testOnblur(){
alert("我是失去焦点事件");
}
function testOnload(){
alert("我是页面加载事件");
}
function test(){
alert("测试一个事件的多个函数执行");
}
</script
>
<style type
="text/css">
#showdiv
{
width
: 300px
;
height
: 300px
;
border
: solid
1px
;
}
</style
>
</head
>
<body onload
="testOnload()">
<h3
>js的事件机制学习
1</h3
>
<hr
/>
<input type
="button" name
="" id
="" value
="测试单击" onclick
="testOnclick();test();" />
<input type
="button" name
="" id
="" value
="测试双击" ondblclick
="testOndblclick();" />
<hr
/>
<br
/><br
/>
<div id
="showdiv" onmouseover
="testOnmouseover();" onmousemove
="testOnmousemove()" onmouseout
="testOnmouseout()">
</div
>
<hr
/>
键盘事件学习：
<br
/>
键盘弹起事件：
<input type
="text" name
="" id
="" value
="" onkeyup
="testOnkeyup();"/><br
/><br
/>
键盘下压事件：
<input type
="text" name
="" id
="" value
="" onkeydown
="testOnkeydown()"/>
<hr
/>
焦点事件学习：
<br
/>
获取焦点：
<input type
="text" name
="" id
="" value
="" onfocus
="testOnfocus();"/><br
/><br
/>
失去焦点：
<input type
="text" name
="" id
="" value
="" onblur
="testOnblur();"/>
</body
>
</html
>
<html
>
<head
>
<title
>js的事件机制二
</title
>
<meta charset
="UTF-8"/>
<!--
js的事件机制学习
2：
1、给合适的
HTML标签添加合适的事件
onchange
----select下拉框
onload
------body标签
单双击
-------用户会进行点击动作的
HTML元素
鼠标事件
------用户会进行鼠标移动操作的。
键盘事件
------用户会进行键盘操作的
HTML元素。
2、给
HTML元素添加多个事件时，注意事件之间的冲突
举个栗子：单击和双击
当事件的触发条件包含相同部分的时候，会产生事件之间的冲突。
3、事件的阻断
当事件所监听的函数的将返回值返回给事件时：
false：则会阻断当前事件所在的
HTML标签的功能
true:则继续执行当前事件所在的
HTML标签的功能
4、超链接调用js函数
<a href
="javascript:函数名()">调用js函数
</a
>
-->
<script type
="text/javascript">
function testOnchange(){
alert("我被改变了");
}
function testOnclick(){
alert("今天天气真好，不冷不热，贼适合学习");
}
function testOndblclick(){
alert("老师说的对");
}
function testA(){
alert("事件的阻断");
return true;
}
function testHref(){
alert("我是超链接调用");
}
</script
>
</head
>
<body
>
<h3
>js的事件机制二
</h3
>
<hr
/>
值改变事件
: <input type
="text" name
="" id
="" value
="" onchange
="testOnchange();"/>
<br
/><br
/>
<select name
="" id
="" onchange
="testOnchange();">
<option value
="">北京
</option
>
<option value
="">上海
</option
>
<option value
="">广州
</option
>
</select
>
<hr
/>
事件的冲突：
<br
/>
<input type
="button" name
="" id
="" value
="事件的冲突" onclick
="testOnclick()" ondblclick
="testOndblclick()"/>
<hr
/>
事件的阻断：
<br
/>
<a href
="http://www.baidu.com" target
="_blank" onclick
="return testA()">百度一下
</a
>
<hr
/>
超链接调用js函数
:
<a href
="javascript:testHref()">调用js函数
</a
>
</body
>
</html
>
