[关闭]
javaScript基础入门
javaScript: js 基于面向对象的一门脚本语言
变量 表达式 分支结构 循环结构 数组 变量类型 函数
javascript与java
两者没有任何关系，名字相似，语法有所相同
javascript:是一种客户端脚本语言
java:是一种服务端语言
基于面向对象 和 面向对象的区别:
基于面向对象是在对象的基础上实现编程，也就是说对象已经存在，在程序中调用对象所拥有的属性和方法.
面向对象(oop)是一种编程方式，在oop 中产生对象必须new实例化类.
js 弱语言类型 php js是存在于客户端的一门语言
js基于对象：
每一个对象都有它的属性和方法；
属性： 名词----------有什么------------------变量
方法： 动词----------能做什么----------------函数
JavaScript的作用：
1、检测表单的正确性
2、实现ajax数据交互
3、增删改dom元素
4、对事件作出响应
5、检测浏览器信息
6、制作酷炫的网页效果
起源
1992 网景(netscape) livescript
microsoft windows jscript
欧洲计算机制造商协会 ECMAScript
组成部分
ECMAScript(语法)
DOM (document Objects) 文本对象模型
BOM (Brower Objects) 浏览器对象模型
为什么要学习javascript
别无选择,只有javascript能够控制所有常见的浏览器，
它还是世界上最重要的编程语言之一，学习web技术必须要学会javascript
语法
1、区分大小写
2、弱类型变量(不用特定声明类型)
3、每行结尾的分号可有可无
注意：为了良好的编程习惯，建议都统一带上分号
4、括号用于代码块 { }
5、注释
单行注释 //
多行注释/* */
--.声明变量：
1. 变量名;
2. var 变量名;
变量的命名规则
1、首字符必须是字母（大小写均可）、下划线（_）、美元符号（$）
2、其余字符可以是下划线、美元符号、任意字母或者数字
3、不能使用关键字和保留字
二.变量赋值
1.先声明后赋值
2.边声明边赋值
变量的数据类型是由值决定。
三.
注释: 单行注释：// 多行注释：/* */
四. 输出
alert();消息框弹出
document.write();网页中写出
五.运算符
1.算术运算符 + - * / % ++ ---
2.条件运算符 > < >= <= == !=
3.逻辑运算符 && || ！ and or
4.三元运算符 表达式?true:false;
5.+：运算 同时也是 字符串连接
六: 分支结构
if(){......}
if(){......}else{.......}
switch(){
case value1: 语句 ; break;
case value2: 语句; break;
...................
default: 语句 break;
}
七.循环
for(var i=0;i<=10; i++){
循环体
}
建议：数组使用for...in
for( var args in array ){
数组
}
八.数组
1.数组分为： 索引数组 下标是数字 索引下标从0开始
关联数组 下标字母
2.数组声明:
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);
var arr2=[4,5,6];
var arr={"name":"小张","age":10,"sex":"女"};
3. 数组赋值
arr[0]=1;
arr3['name']="eduask";
4.数组的访问
索引数组： arr[index]
关联数组: arr.下标
5. 数组的属性和方法
length 获取数组长度 （对关联数组无效）
concat() 连接两个或更多的数组，并返回结果。 （对关联数组无效）
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 （对关联数组无效）
slice(start,end)从某个已有的数组返回选定的元素 （对关联数组无效）
toString() 把数组转换为字符串，并返回结果。（对关联数组无效）
6. 循环
for(var args in arr3){
document.write(arr3[args]);
}
实现全选、反选案例
444
555
7.二维数组
var arr=new Array()
arr[0][0]='111' ; 不推荐使用
var arr5 =[['a','b','c','d'],[1,2,3]]; //{ json 格式} [数组格式]
十.变量类型
1、未定义 undefined
2、空 null
3、布尔 Boolean (true false)
4、字符串 String
5、数值 Number
6、对象 Object
7、引用 Reference
8、列表 List
9、完成 Completion
类型转换
把字符串强制转换成int，parseInt()
document.write(parseInt("10") ) ; 如果被转化变量为非数字，返回 NaN
十一.函数
function 函数名(形参1，形参2)
{
函数体；
return;
}
1\ 函数的功能-- 决定去不去用
2、函数有没有形参：---怎么用
3、函数有没有返回值 ---调用完如果使用
分类：
无返回值，无参数
无返回值，有参数
有返回值，无参数
有返回值，有参数
函数调用：
直接作用普通语句调用：-----无返回值
直接输出--------------- 有返回值
作为表达式---------------有返回值的
十二.应用：
1:
2:外部文件
3.
alert(信息字串) 弹出警告信息
confirm(信息字串) 显示确认信息对话框 返回用户选择的 true 或者 false
prompt(提示字串[，默认值]) 显示提示信息，并提供可输入的字段 返回用户输入的字符串
3.js中内置的对象（常用的）
数组对象 -------前面讲过
字符串对象
数学对象
时间对象
字符串对象：String
1、快速创建
var s="sdfsf";
2、var s=new String("字符串");
属性：
length:字符串的长度
方法：
charAt 方法 返回指定索引位置处的字符。strObj.charAt(index)
indexOf 方法 返回 String 对象内第一次出现子字符串的字符位置。 strObj.indexOf(subString[, startIndex])
lastIndexOf 方法 返回 String 对象中子字符串最后出现的位置。strObj.lastIndexOf(substring[, startindex])
bold() 粗体
italtics() 斜体
strike() 删除线
fontsize(字级大小) 文字大小
fontcolor(#rrggbb) 文字颜色
search("字串") 返回字串在对象中的索引位置
replace("字串1","字串2") 字串2替换字串
split(["字串"]) 以字符的方式分割字符串 返回数组
match("world")方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
数学对象Math
ceil(数值) 大于等于该数值的最小整数
floor(数值) 小于等于该数值的最大整数
random() 0倒1的随机数
时间对象 Date
日期对象名称=new Date([日期参数])
日期参数：1.省略；
2.英文-数值格式：月 日，公元年 [时：分：秒]
如：today=new Date("October 1,2008 12:00:00")
3.数值格式：公元年，月，日，[时，分，秒]
如：today=new Date(2008,10,1)
getYear() 返回年份数
getMonth() 返回月份数（0--11） 注意是从0开始的
getDate() 返回日期数（1--31）
getDay() 返回星期数（0--6)
getHours() 返回时数（0--23）
getMinutes() 返回分数（0--59）
getSeconds() 返回秒数（0--59）
getMilliseconds() 返回毫秒数（0--999）
getTime() 返回对应日期基线的毫秒
Date.parse(日期字串) 返回对应日期基线的毫秒
定时器:
[定时器对象名=] setTimeout(“<表达式>”，毫秒) 执行<表达式>一次
clearTimeout(定时器对象名)
[定时器对象名=] setInterval(“<表达式>”，毫秒)
重复执行<表达式>，直至窗口、框架被关闭或执行clearInterval
动态时间显示(封装插件):
var interval=null; //定义定时器的返回id
function showtime(id,showtype){ //显示时间函数
var nowDate,year,month,day,hour,minu,sec,showtimeStr; // 声明变量
showtype=(showtype == null)?1:showtype; //三元运算符设置参数值
nowDate=new Date(); //实例化时间对象
year=nowDate.getFullYear(); //获取年
month=nowDate.getMonth()+1; //获取月
day=nowDate.getDate(); //获取天
hour=nowDate.getHours(); //获取小时
minu=nowDate.getMinutes(); //获取分钟
sec=nowDate.getSeconds(); //获取秒
//给时间加上前置 0
hour=(hour < 10)?'0'+hour:hour;
minu=(minu < 10)?'0'+minu:minu;
sec=(sec < 10)?'0'+sec:sec;
//构建字符串
switch (showtype){//不能写1，2，3因为是字符比较，所以要加引号
case '1':showtimeStr=year+'年'+month+'月'+day+'日'+hour+':'+minu+':'+sec;break;
case '2':showtimeStr=year+'/'+month+'/'+day+' '+hour+':'+minu+':'+sec;break;
case '3':showtimeStr=year+'-'+month+'-'+day+' '+hour+':'+minu+':'+sec;break;
default:showtimeStr=year+'年'+month+'月'+day+'日'+hour+':'+minu+':'+sec;break;
}
document.getElementById(id).innerHTML=showtimeStr; //显示字符串
/**
*interval=setTimeout("showTime('"+id+"','"+showtype+"')",1000); //使用递归的时候，使用setTimeOut();
*/
}
//安装显示时间函数
function setUPTime(id,showtype){
if(interval){
interval=clearInterval(interval)
}
interval=setInterval("showtime('"+id+"','"+showtype+"')",1000);
}
//用户调用安装函数
setUPTime('showtime',3);
倒计时案例；
function runResort(str,id1)
{
var nowDate; //定义当前时间
nowDate=new Date(); //实例化时间对象
nowDates= nowDate.getTime(); //获取当前时间的毫秒
var runRes = Date.parse(str); //得到用户的时间毫秒, 注意用户参数格式 8/13/2014 17:30:00
sTime=(runRes-nowDates)/1000; //获取秒数
if(sTime>=0)
{
day =Math.floor( sTime/(3600*24)); //得到天
hour=Math.floor((sTime-day *86400)/3600) ; //得到小时
minu=Math.floor((sTime-day *86400- hour*3600)/60); //得到分钟
sec=Math.floor((sTime-day *86400- hour*3600-minu*60)); //得到秒数
showtime=day+'天'+hour+':'+minu+':'+sec;
document.getElementById(id1).innerHTML=showtime;
} else
{
document.getElementById(id1).innerHTML="时间截止！";
return;
}
setTimeout("runResort('"+str+"','"+id1+"')");
}
function main(id,id1)
{
var str=document.getElementById(id).value;
runResort(str,id1)
}
调用:
事件：用户对浏览器所做的特定的动作（操作），是实现交互操作的一种机制。事件通常与函数配合使用，当事件发生时函数才会执行。
在html中所有的元素都有事件
onload 和 onUnload 当用户进入或离开页面时就会触发 onload 和 onUnload 事件。 属于body
onFocus, onBlur 和 onChange 事件通常相互配合用来验证表单。 属于表单事件 input select onchange事件时获取option的文本 select[ select.selectedIndex].innerText
onSubmit 用于在提交表单之前验证所有的表单域。 属于 form
表单验证案例:
function validate(o){
if(o.value == ''){
o.style.border='1px solid red';
return false;
}
//判断类型
switch (o.name){
case 'upwd':pwdVal= o.value;break;
case 'upwds':
if(pwdVal != o.value){
o.style.border='1px solid red';
return false;
};break;
case 'uemail': if(o.value.indexOf('@') == -1){
o.style.border='1px solid red';
};break;
}
o.style.border='1px solid blue';
return true;
}
onmouseover：鼠标移到目标的上方。
onmouseout：鼠标移出目标的上方。
onmousemove：鼠标鼠标指针移动时发生
onMouseOver 和 onMouseOut 用来创建“动态的”按钮。
案例:js实现导航条
变量 表达式 分支结构 循环结构 数组 变量类型 函数
javascript与java
两者没有任何关系，名字相似，语法有所相同
javascript:是一种客户端脚本语言
java:是一种服务端语言
基于面向对象 和 面向对象的区别:
基于面向对象是在对象的基础上实现编程，也就是说对象已经存在，在程序中调用对象所拥有的属性和方法.
面向对象(oop)是一种编程方式，在oop 中产生对象必须new实例化类.
js 弱语言类型 php js是存在于客户端的一门语言
js基于对象：
每一个对象都有它的属性和方法；
属性： 名词----------有什么------------------变量
方法： 动词----------能做什么----------------函数
JavaScript的作用：
1、检测表单的正确性
2、实现ajax数据交互
3、增删改dom元素
4、对事件作出响应
5、检测浏览器信息
6、制作酷炫的网页效果
起源
1992 网景(netscape) livescript
microsoft windows jscript
欧洲计算机制造商协会 ECMAScript
组成部分
ECMAScript(语法)
DOM (document Objects) 文本对象模型
BOM (Brower Objects) 浏览器对象模型
为什么要学习javascript
别无选择,只有javascript能够控制所有常见的浏览器，
它还是世界上最重要的编程语言之一，学习web技术必须要学会javascript
语法
1、区分大小写
2、弱类型变量(不用特定声明类型)
3、每行结尾的分号可有可无
注意：为了良好的编程习惯，建议都统一带上分号
4、括号用于代码块 { }
5、注释
单行注释 //
多行注释/* */
--.声明变量：
1. 变量名;
2. var 变量名;
变量的命名规则
1、首字符必须是字母（大小写均可）、下划线（_）、美元符号（$）
2、其余字符可以是下划线、美元符号、任意字母或者数字
3、不能使用关键字和保留字
二.变量赋值
1.先声明后赋值
2.边声明边赋值
变量的数据类型是由值决定。
三.
注释: 单行注释：// 多行注释：/* */
四. 输出
alert();消息框弹出
document.write();网页中写出
五.运算符
1.算术运算符 + - * / % ++ ---
2.条件运算符 > < >= <= == !=
3.逻辑运算符 && || ！ and or
4.三元运算符 表达式?true:false;
5.+：运算 同时也是 字符串连接
六: 分支结构
if(){......}
if(){......}else{.......}
switch(){
case value1: 语句 ; break;
case value2: 语句; break;
...................
default: 语句 break;
}
七.循环
for(var i=0;i<=10; i++){
循环体
}
建议：数组使用for...in
for( var args in array ){
数组
}
八.数组
1.数组分为： 索引数组 下标是数字 索引下标从0开始
关联数组 下标字母
2.数组声明:
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);
var arr2=[4,5,6];
var arr={"name":"小张","age":10,"sex":"女"};
3. 数组赋值
arr[0]=1;
arr3['name']="eduask";
4.数组的访问
索引数组： arr[index]
关联数组: arr.下标
5. 数组的属性和方法
length 获取数组长度 （对关联数组无效）
concat() 连接两个或更多的数组，并返回结果。 （对关联数组无效）
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 （对关联数组无效）
slice(start,end)从某个已有的数组返回选定的元素 （对关联数组无效）
toString() 把数组转换为字符串，并返回结果。（对关联数组无效）
6. 循环
for(var args in arr3){
document.write(arr3[args]);
}
实现全选、反选案例
444
555
7.二维数组
var arr=new Array()
arr[0][0]='111' ; 不推荐使用
var arr5 =[['a','b','c','d'],[1,2,3]]; //{ json 格式} [数组格式]
十.变量类型
1、未定义 undefined
2、空 null
3、布尔 Boolean (true false)
4、字符串 String
5、数值 Number
6、对象 Object
7、引用 Reference
8、列表 List
9、完成 Completion
类型转换
把字符串强制转换成int，parseInt()
document.write(parseInt("10") ) ; 如果被转化变量为非数字，返回 NaN
十一.函数
function 函数名(形参1，形参2)
{
函数体；
return;
}
1\ 函数的功能-- 决定去不去用
2、函数有没有形参：---怎么用
3、函数有没有返回值 ---调用完如果使用
分类：
无返回值，无参数
无返回值，有参数
有返回值，无参数
有返回值，有参数
函数调用：
直接作用普通语句调用：-----无返回值
直接输出--------------- 有返回值
作为表达式---------------有返回值的
十二.应用：
1:
2:外部文件
3.
alert(信息字串) 弹出警告信息
confirm(信息字串) 显示确认信息对话框 返回用户选择的 true 或者 false
prompt(提示字串[，默认值]) 显示提示信息，并提供可输入的字段 返回用户输入的字符串
3.js中内置的对象（常用的）
数组对象 -------前面讲过
字符串对象
数学对象
时间对象
字符串对象：String
1、快速创建
var s="sdfsf";
2、var s=new String("字符串");
属性：
length:字符串的长度
方法：
charAt 方法 返回指定索引位置处的字符。strObj.charAt(index)
indexOf 方法 返回 String 对象内第一次出现子字符串的字符位置。 strObj.indexOf(subString[, startIndex])
lastIndexOf 方法 返回 String 对象中子字符串最后出现的位置。strObj.lastIndexOf(substring[, startindex])
bold() 粗体
italtics() 斜体
strike() 删除线
fontsize(字级大小) 文字大小
fontcolor(#rrggbb) 文字颜色
search("字串") 返回字串在对象中的索引位置
replace("字串1","字串2") 字串2替换字串
split(["字串"]) 以字符的方式分割字符串 返回数组
match("world")方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
数学对象Math
ceil(数值) 大于等于该数值的最小整数
floor(数值) 小于等于该数值的最大整数
random() 0倒1的随机数
时间对象 Date
日期对象名称=new Date([日期参数])
日期参数：1.省略；
2.英文-数值格式：月 日，公元年 [时：分：秒]
如：today=new Date("October 1,2008 12:00:00")
3.数值格式：公元年，月，日，[时，分，秒]
如：today=new Date(2008,10,1)
getYear() 返回年份数
getMonth() 返回月份数（0--11） 注意是从0开始的
getDate() 返回日期数（1--31）
getDay() 返回星期数（0--6)
getHours() 返回时数（0--23）
getMinutes() 返回分数（0--59）
getSeconds() 返回秒数（0--59）
getMilliseconds() 返回毫秒数（0--999）
getTime() 返回对应日期基线的毫秒
Date.parse(日期字串) 返回对应日期基线的毫秒
定时器:
[定时器对象名=] setTimeout(“<表达式>”，毫秒) 执行<表达式>一次
clearTimeout(定时器对象名)
[定时器对象名=] setInterval(“<表达式>”，毫秒)
重复执行<表达式>，直至窗口、框架被关闭或执行clearInterval
动态时间显示(封装插件):
var interval=null; //定义定时器的返回id
function showtime(id,showtype){ //显示时间函数
var nowDate,year,month,day,hour,minu,sec,showtimeStr; // 声明变量
showtype=(showtype == null)?1:showtype; //三元运算符设置参数值
nowDate=new Date(); //实例化时间对象
year=nowDate.getFullYear(); //获取年
month=nowDate.getMonth()+1; //获取月
day=nowDate.getDate(); //获取天
hour=nowDate.getHours(); //获取小时
minu=nowDate.getMinutes(); //获取分钟
sec=nowDate.getSeconds(); //获取秒
//给时间加上前置 0
hour=(hour < 10)?'0'+hour:hour;
minu=(minu < 10)?'0'+minu:minu;
sec=(sec < 10)?'0'+sec:sec;
//构建字符串
switch (showtype){//不能写1，2，3因为是字符比较，所以要加引号
case '1':showtimeStr=year+'年'+month+'月'+day+'日'+hour+':'+minu+':'+sec;break;
case '2':showtimeStr=year+'/'+month+'/'+day+' '+hour+':'+minu+':'+sec;break;
case '3':showtimeStr=year+'-'+month+'-'+day+' '+hour+':'+minu+':'+sec;break;
default:showtimeStr=year+'年'+month+'月'+day+'日'+hour+':'+minu+':'+sec;break;
}
document.getElementById(id).innerHTML=showtimeStr; //显示字符串
/**
*interval=setTimeout("showTime('"+id+"','"+showtype+"')",1000); //使用递归的时候，使用setTimeOut();
*/
}
//安装显示时间函数
function setUPTime(id,showtype){
if(interval){
interval=clearInterval(interval)
}
interval=setInterval("showtime('"+id+"','"+showtype+"')",1000);
}
//用户调用安装函数
setUPTime('showtime',3);
倒计时案例；
function runResort(str,id1)
{
var nowDate; //定义当前时间
nowDate=new Date(); //实例化时间对象
nowDates= nowDate.getTime(); //获取当前时间的毫秒
var runRes = Date.parse(str); //得到用户的时间毫秒, 注意用户参数格式 8/13/2014 17:30:00
sTime=(runRes-nowDates)/1000; //获取秒数
if(sTime>=0)
{
day =Math.floor( sTime/(3600*24)); //得到天
hour=Math.floor((sTime-day *86400)/3600) ; //得到小时
minu=Math.floor((sTime-day *86400- hour*3600)/60); //得到分钟
sec=Math.floor((sTime-day *86400- hour*3600-minu*60)); //得到秒数
showtime=day+'天'+hour+':'+minu+':'+sec;
document.getElementById(id1).innerHTML=showtime;
} else
{
document.getElementById(id1).innerHTML="时间截止！";
return;
}
setTimeout("runResort('"+str+"','"+id1+"')");
}
function main(id,id1)
{
var str=document.getElementById(id).value;
runResort(str,id1)
}
调用:
事件：用户对浏览器所做的特定的动作（操作），是实现交互操作的一种机制。事件通常与函数配合使用，当事件发生时函数才会执行。
在html中所有的元素都有事件
onload 和 onUnload 当用户进入或离开页面时就会触发 onload 和 onUnload 事件。 属于body
onFocus, onBlur 和 onChange 事件通常相互配合用来验证表单。 属于表单事件 input select onchange事件时获取option的文本 select[ select.selectedIndex].innerText
onSubmit 用于在提交表单之前验证所有的表单域。 属于 form
表单验证案例:
function validate(o){
if(o.value == ''){
o.style.border='1px solid red';
return false;
}
//判断类型
switch (o.name){
case 'upwd':pwdVal= o.value;break;
case 'upwds':
if(pwdVal != o.value){
o.style.border='1px solid red';
return false;
};break;
case 'uemail': if(o.value.indexOf('@') == -1){
o.style.border='1px solid red';
};break;
}
o.style.border='1px solid blue';
return true;
}
onmouseover：鼠标移到目标的上方。
onmouseout：鼠标移出目标的上方。
onmousemove：鼠标鼠标指针移动时发生
onMouseOver 和 onMouseOut 用来创建“动态的”按钮。
案例:js实现导航条