javascript 俗称 js
1.案例1-校验表单
2.需求:
表单提交的时候需要校验数据是否完整,若不满足条件,则使用弹出框提示.
3.解释：
JavaScript一种直译式脚本语言，是一种动态类型、弱类型(变量定义的时候不需要声明数据类型)、基于原型的语言，
内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言
4.组成部分:
1 ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等...)
2.BOM:浏览器对象模型
3.DOM:文档对象模型
5.作用:
1.修改html页面的内容
2. 修改html的样式
3. 完成表单的验证
6.注意:
1. js可以在页面上直接写,也可以单独出去
2.js的文件的后缀名 .js
7.js和html整合
方式1:在页面上直接写
将js代码放在 <script></script>标签中,一般放在head标签中
方式2:独立的js文件
通过script标签的src属性导入
8.js中变量声明:
var 变量名=初始化值;
var 变量名;
变量名=初始化值;
注意:
var可以省略 建议不要省略
一行要以分号结尾,最后一个分号可以省略,建议不要省略
9.js的数据类型:
原始类型:(5种)
1.Null
2.String
3.Number
4.Boolean
5.Undefined
1.通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于哪种原
始类型 typeof 变量|值;
2.若变量为null,使用typeof弹出的值 object
3.使用typeof的返回值
1.undefined - 如果变量是 Undefined 类型的
2.boolean - 如果变量是 Boolean 类型的
3.number - 如果变量是 Number 类型的
4.string - 如果变量是 String 类型的
5.object - 如果变量是一种引用类型或 Null 类型的
9.js的数据类型
引用类型:
引用类型通常叫做类（class）也就是说，遇到引用值，所处理的也就是对象注意：ECMAScript 并不是真正意义上的类，
ECMAScript定义了“对象定义”逻辑上等价于其他语言上的类。
10事件和函数绑定.
js:它是个事件驱动的语言，用事件驱动函数来实现
函数定义格式:
方式1:
function 函数名(参数){函数体; }
注意:函数不用声明返回值类型
参数不需要加类型
函数调用的时候
函数名(参数)<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function btnCli(){ alert(44944); } </script> </head> <body> <input type="button" value="点击我试试" onclick="btnCli()" /> </body> </html>
11.js中的事件:
常见的事件:
1.单击: onclick
2.表单提交: onsubmit3.页面加载: onload
onsubmit 加在form表单上的 onsubmit="return 函数名()"
注意函数返回值为boolean类型
12.js获取元素:
方式1:
var obj=documnet.getElementById("id值");js获取元素的value值
obj.value;
获取元素的标签体中的内容
obj.innerHTML;
12.案例2-步骤分析:
1.先有一个表单
2.在form上添加一个事件 onsubmit="return checkForm()"
3.编写checkForm这个方法
4.获取每个表单子标签的内容
5.判断是否满足要求,
若满足,不用管他
若不满足,表单不能提交,返回false,且提示信息.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function checkform(){ //获取用户名字和内容 var usernameObj=document.getElementById("uername"); //获取密码和内容 var username=usernameObj.value; //判断value是否为空 为空不可以提交表单 if(uername==null || username==""){ alert("用户名字不能为空"); return false; } //获取密码元素 var pwdObj=document.getElementById("password"); //获取密码的值 var pwdValue=pwdObj.value; //判断value是否为空，为空不可以提交 if(pwdValue==null||pwdValue=="") { alert("密码不能为空"); return false; } return true; } </script> </head> <body> <form action="#" method="get" onsubmit="return checkform()"> 姓名<input name="username" id="uername" /><br /> 密码<input type="password" name="password" id="password"><br /> <input type="submit" value="保存" /> <input type="reset" /> </form> </body> </html>没有写密码的话：
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
————————————————————————————————
————————————————————————————————
全部写了之后：用户名和密码会发出去
——————————————————————————
///////////////////////////////////////////////////////////////////////////////////////////////
12.函数的定义:
方式1:
function 函数名(参数) {函数体;}
方式2:
var 函数名=function(参数){ 函数体;}
js事件和函数的绑定:
方式1:
通过标签的事件属性 <xxx onclick="函数名(参数)"></xxx>
方式2:
给元素派发事件
document.getElementById("id值").onclick=function(参数){....}
document.getElementById("id值").onclick=函数名
注意:
内存中应该存在该元素才可以派发事件
a.将方式2的js代码放在html页面的最下面
b.在页面加载成功之后在运行方式2的js代码 onload事件.
案例3-轮播图片
需求:
每隔3秒图片更新一下
技术分析:
bom中window对象的定时器方法
定时器:
var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期
var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数
清除定时器:
clearInterval(id);
claerTimeout(id);
String对象
原始类型的String是一个为对象可以直接调用String类对象的方法
substring(0,endIndex);
////////////////
步骤分析:
1.在首页上面绑定一个onload事件
2.事件绑定的函数中编写一个定时器
3.定时器每隔3秒更换图片
imgObj.src="";
///////////////
补充:
运算符:
比较运算符: > >= < <=
若两边都是数字 和java一样
若一般为数字,另一边为字符串形式的数字,将字符串形式的数字转换成数字在进行比较 3>"2"
若一般为数字,另一边为字符串,返回一个false 3>"hello"
两边都是字符串的时候,比较ascii
等性运算符 == ===
== :只判断值是否相同
===:不仅判断是否相同,还要判断类型是否相同
语句:
if语句 和java一样
for while 语句和java一样
switch 和java一样(区别,switch 后面跟字符串. 还可以跟变量)
总结:掌握
1.css和html整合
方式3种
2.css中选择器:
id class 元素
属性 后代
3.js
js和html整合
方式两种
4.变量定义
5.函数定义
2种格式
6.事件
onclickonload
onsubmit
7.事件和函数的绑定
2种方式
8.定时器 2种
9.for while if