javascript 俗称 js
案例1-校验表单
需求:
表单提交的时候需要校验数据是否完整,若不满足条件,则使用弹出框提示.
技术分析:
js
//
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，
内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言
组成部分:
ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等…)
BOM:浏览器对象模型
DOM:文档对象模型
作用:
修改html页面的内容
修改html的样式
完成表单的验证
注意:
js可以在页面上直接写,也可以单独出去
js的文件的后缀名 .js
js和html整合
方式1:在页面上直接写
将js代码放在 标签中,一般放在head标签中
方式2:独立的js文件
通过script标签的src属性导入
js中变量声明:
var 变量名=初始化值;
var 变量名;
变量名=初始化值;
注意:
var可以省略 建议不要省略
一行要以分号结尾,最后一个分号可以省略,建议不要省略
js的数据类型:
原始类型:(5种)
Null
String
Number
Boolean
Undefined
通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于那种原始类型
typeof 变量|值;
若变量为null,使用typeof弹出的值 object
使用typeof的返回值
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
引用类型:
//
js:事件驱动函数
函数定义格式:
方式1:
function 函数名(参数){
函数体;
}
注意:函数不用声明返回值类型
参数不需要加类型
函数调用的时候
函数名(参数)
js中的事件:
常见的事件:
单击: onclick
表单提交: onsubmit 加在form表单上的 οnsubmit=“return 函数名()” 注意函数返回值为boolean类型
页面加载: onload
js事件和函数的绑定:
方式1:
通过标签的事件属性
js获取元素:
方式1:
var obj=documnet.getElementById(“id值”);
获取元素的value值
obj.value;
获取元素的标签体中的内容
obj.innerHTML;
案例2-步骤分析:
1.先有一个表单
2.在form上添加一个事件 οnsubmit=“return checkForm()”
3.编写checkForm这个方法
4.获取每个表单子标签的内容
5.判断是否满足要求,
若满足,不用管他
若不满足,表单不能提交,返回false,且提示信息.
///
函数的定义:
方式1:
function 函数名(参数){
函数体;
}
方式2:
var 函数名=function(参数){
函数体;
}
js事件和函数的绑定:
type规定了这是一个按钮，value是按钮上的数字，onclick对应的是点击后调用的函数
当用户进入或离开页面时就会触发 onload 和 onUnload 事件。
方式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.事件
onclick onload onsubmit
7.事件和函数的绑定
2中方式
8.定时器 2种
9.for while if
JS的数据类型：
原始类型：5种
Null String Number Boolean Undefined
通过typeof运算符可以判断一个值是否属于原始类型，若属于原始类型，可判断出属于哪种原始类型
引用类型：
JavaScript是被设计用来向HTML页面添加交互行为。
JavaScript是一种脚本语言（脚本语言是一种轻量级的编程语言）
JavaScript通常被直接嵌入HTML页面
JavaScript 可以放置
1、文档的head部分，这样可以确保在调用函数前，脚本已经载入
2、body部分，可以执行位于body部分的脚本
3、使用外部JavaScript 调用格式：
JS的提示框：
alert("文本“) 警告框
confirm(“文本”) 确认框
prompt(“文本”，“默认值”) 提示框
JS可以在head中定义函数，通过body内调用函数
对于没有写入函数的script，系统会在页面载入时自动执行，定义函数后，只有通过onclick（点击）才能调用
JavaScript事件
1、onload和onUnload事件：
onload事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页
JavaScript捕获错误（try…catch和onerror）
JavaScript Throw声明
throw(exception)
onerror事件
onerror的使用 需要创建一个处理错误的函数，我们称为onerror事件处理器
这个事件处理器使用三个参数来调用（msg错误信息）、（url发生错误的页面的url）、（line发生错误的代码行）
JavaScript特殊字符
转义字符 \
" 表示 "
JS对大小写敏感，要注意字符大小写
字符串内部的换行可以用\ 和python一样
JS面向对象编程
JavaScript是面向对象的编程语言(OOP) OOP语言使我们有能力定义自己的对象和变量类型
注意：对象只是一种特殊的数据，对象拥有属性和方法。
属性：指域对象有关的值
方法：指对象可以执行的行为
1、字符串对象：用来处理已有的字符块
2、日期对象：
初始值是当前日期 var myDate = new Date()
myDate.setDate() myDate.setFullYear(2008,7,9) 2008,7,9对应的时2008年8月9日，因为月份1-12对应0-11
3、Array(数组)
4、逻辑对象Boolean
5、Math对象
round random floor等方法
6、RegExp对象
RegExp对象用于规定在文本中检索的内容
test方法：检索字符串中的指定值，返回true false
exec方法：检索字符串中的指定值，返回的是被找到的值，如果没有发现匹配，返回null
注意例2 每次循环会更新检索的开始位置
3、compile()
6、HTML DOM对象
案例 表单校验
案例2-步骤分析:
1.先有一个表单
2.在form上添加一个事件 οnsubmit=“return checkForm()”
3.编写checkForm这个方法
4.获取每个表单子标签的内容
5.判断是否满足要求,
若满足,不用管他
若不满足,表单不能提交,返回false,且提示信息.
///
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script> //用JS写函数来判断输入的账号和密码是否符合规范
function checkForm(){
//获取用户名及其内容
var usernameObj=document.getElementById("username"); //根据ID获取信息 保存到usernamObj下
var username=usernameObj.value; //用username保存value
//判断value是否为空 若为空不能提交表单,
if(username==null || username == ""){
alert("用户名不能为空");
return false;
}
//获取密码及其内容
//1.获取密码元素
var pwdObj=document.getElementById("password");
//2.获取密码的值
var pwdValue=pwdObj.value;
//3.判断
if(pwdValue==null || pwdValue==""){
alert("密码不能为空");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
姓名:<input name="username" id="username"/><br>
密码:<input type="password" name="password" id="password"><br>
<input type="submit" value="保存"/>
<input type="reset" />
</form>
</body>
</html>
函数的定义:
方式1:
function 函数名(参数){
函数体;
}
方式2:
var 函数名=function(参数){
函数体;
}
js事件和函数的绑定:
方式1:
通过标签的事件属性
方式2:
给元素派发事件
document.getElementById(“id值”).οnclick=function(参数){…}
document.getElementById(“id值”).οnclick=函数名
注意:
内存中应该存在该元素才可以派发事件
a.将方式2的js代码放在html页面的最下面
b.在页面加载成功之后在运行方式2的js代码 onload事件.
案例3-轮播图片
需求:
每隔3秒图片更新一下
技术分析:
bom中window对象的定时器方法
定时器:
var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期 （code对应函数即可）
var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数
清除定时器:
clearInterval(id); clear针对的id是上面var id这部分
claerTimeout(id);
String对象
原始类型的String是一个为对象可以直接调用String类对象的方法
substring(0,endIndex);
步骤分析:
1.在首页上面绑定一个onload事件
2.事件绑定的函数中编写一个定时器
3.定时器每隔3秒更换图片
imgObj.src="";
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var s="我们的明天更加美好!";
var i=0;
var divObj;
function init(){
divObj=document.getElementById("divId"); //
setInterval(show,200); //每隔指定毫秒数执行一次
}
//往div中写内容
function show(){
i++;
var s_=s.substring(0,i); //每次显示的长度逐渐增加
//往div中设置内容
divObj.innerHTML=s_;
//当字符串写完的时候 重新开始
if(i==s.length){
i=0;
}
}
</script>
</head>
<body onload="init()">
<div id="divId"></div>
</body>
</html>
等性运算符
判断值相等的同时判断类型是否相同
===