web前端第三天-javaScript入门
#JavaScript入门
##1.基本介绍
1.javaScript:是前端最强大的脚本语言
java 编译的语法 可移植性 跨平台
js：语法与java类似,主要是做逻辑处理,做一些动效 1)可以操作标签 2) 追加样式 3)前端的验证
html: 超文本标记语言==>预定义的一些标签 ==>网页的骨干
2. js 的特点: 1.不需要编译,由浏览器直接解析
2.不能单独运行,需要依赖于html
3。浏览器也是从上到下进行解析
3.js的三大组成部分:1.ECSAscript 》用于表示js中的基础语法(java前五天的内容)
2.BOM 浏览器对象> 也就是对窗口进行操作
3.DOM 文本对象(节点对象) ==》也就是操作html的标签
4.js的引用方式: 1.直接引入(需要写在html里) alert(“dddd”); 表示弹框
注意点: 1.外部的js文件不需要写script 2.html页面想使用外部的js文件,必须先引入,引入一般是放在头部
5.js 中的语法: java里八种数据类型
js 中变量的修饰符是 var ==>具体的类型是由其值决定的 J基本数据类型
常见的类型:boolean number 数值类型 string 字符串类型 undefined 未定义类型 undefined 是由null 派生出来的
undefined ==null 返回的是true
java 中Class 都表示引用数据类型 ==>js不需要编译,只要是引用数据类型就是对象（object） var str = new String(“ddddd”);
js运算符 = + > < >= <= 逻辑运算符 || 或者 !非 && 与 == 只比较数值 === 比较数值也比较数据类型
java方法的语法: 访问修饰符 返回值类型 方法名(参数列表){方法体}
js 方法的语法 function 方法名(参数列表){执行方法体}
注意点:1.使用function关键字来进行修饰
2.方法的不能加var
3.方法可以有返回值
4.方法没有重载之说，任何数值与NaN相加都返回NaN
##2.简单的表单验证
常规的事件： onsubmit ==> true 可以提交 否则 不可以提交 onclick点击事件 onload 也就是html加载完成之后所触发的事件 onblur 失去焦点
根据id获取input的文本值 document.getElementById(“tv_uname”).value;
前端验证的注意事项 1.οnsubmit=“return check()” 一定记住要加入return
2.input vaule 默认值是""
3.document.getElementById(“tv_uname”) 括号里一定要有引号 value 不是方法
//单行注释 多行
变量 还有方法的命名遵循java的规范 1. 不要使用关键字 2. 驼峰命名 3.通俗易懂 英文命名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<form method="get" action="index.html" >
<span id="tv_id">aaaaa</span>
<p>用户名:<input type="text" name="uname" id="tv_uname" onblur="addContent()" onfocus="deleteContent()"><span id="tv_uname_span"></span></p>
<p>密码:<input type="text" name="upwd" id="tv_upwd" onblur="addUpwdContent()" onfocus="deleteUpwdContent()"><span id="tv_upwd_span" ></span></p>
<p>确认密码:<input type="text" name="comfrim_pwd" id="tv_comfrim_pwd" onblur="addConformPwd()" onfocus="deleteConformPwd()"><span id="tv_comfrim_pwd_span"></span></p>
<p><input type="button" onclick="add()" value="提交"></p>
</form>
<script>
function add() {
var tv_id = document.getElementById("tv_id");
alert(tv_id.innerHTML);
}
/*uname 失去焦点所触发的函数*/
function addContent() {
var tv_uname = document.getElementById("tv_uname").value;
if(tv_uname ==null || tv_uname==""){
var tv_uname_span = document.getElementById("tv_uname_span");
tv_uname_span.innerHTML="<font>您输入不能为空</font>";
}
}
/*uname 获取焦点所触发的函数*/
function deleteContent() {
var tv_uname_span = document.getElementById("tv_uname_span");
tv_uname_span.innerHTML="";
}
/*upwd失去焦点*/
function addUpwdContent() {
var tv_upwd= document.getElementById("tv_upwd").value;
if(tv_upwd ==null || tv_upwd==""){
var tv_upwd_span = document.getElementById("tv_upwd_span");
tv_upwd_span.innerHTML="您输入的不能为空"
}
}
/*upw获取焦点的时候*/
function deleteUpwdContent() {
var tv_upwd_span = document.getElementById("tv_upwd_span");
tv_upwd_span.innerHTML="";
}
/*当确认密码是失去焦点*/
function addConformPwd() {
var tv_upwd= document.getElementById("tv_upwd").value;
var tv_comfrim_pwd =document.getElementById("tv_comfrim_pwd").value;
// 进行判断
if(tv_upwd !=tv_comfrim_pwd){
var tv_comfrim_pwd_span = document.getElementById("tv_comfrim_pwd_span");
tv_comfrim_pwd_span.innerHTML="您输入的两次密码不一致";
}
}
/*当确认密码失去焦点*/
function deleteConformPwd() {
var tv_comfrim_pwd_span = document.getElementById("tv_comfrim_pwd_span");
tv_comfrim_pwd_span.innerHTML="";
}
</script>
</body>
</html>
dug 调试: 1.谷歌浏览器里检查代码 2.找到Sources 3.设置断点 一步一步的调试 window.οnlοad=function () {} 等同于 onload
setInterval(“第一个参数是所要触发的事件”,“时间，毫秒为单位”) clearInterval(id); 清除定时器操作(一定指明id)
setTimeout(“第一个参数是所要触发的事件”,“时间，毫秒为单位”) 间隔多少秒只执行一次 clearTimeout(id) 清除定时器
style=“display: none” 隐藏控件 tv_uname_span.innerHTML=="" 这个属性就是向标签添加内容 tv_id.innerHTML ==>获取其节点里的内容
js 中四种获取节点的方式 1.document.getElementById(“tv_id”); 通过id来获取
2. document.getElementsByTagName(“input”); 根据标签名来获取，返回的是数组
3. document.getElementsByName(“sex”); 根据name来获取
4.document.getElementsByClassName(“tv_class”); 根据class来获取
数组的两种初始方式: 1. var nums =[“您好”,44,70.8,true]; 2.var nums = new Array(“ddd”,29,true);
##3.图片轮播。
设计一个Html页面先显示一张图片，然后定义一个JS函数，循环替换三张图片，具体代码实现如下。主要的方法为setInterval（show，1000）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="img/1.jpg" width="100%" id="tv_img">
<script>
window.onload = function () {
// 隔多长时间换图
setInterval("changeImg()",500);
}
var count =1;
function changeImg() {
// 获取这个标签
var tv_img = document.getElementById("tv_img");
tv_img.src="img/"+count+".jpg";
// 判断是否是最后一张图片
if(count==3){
count=1;
return;
}
count++;
}
</script>
</body>
</html>
##4.定时弹出广告
实现广告网页的制作，即打开浏览器后广告出现，然后一段时间后有重新消失。
使用的主要方式是setTimeout（show，1000），clearTimeout（），display。具体的代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--广告的图片-->
<img src="img/2.jpg" width="100%" style="display: none" id="tv_img">
<!--正常显示的图片-->
<img src="img/1.jpg" width="100%">
<!--隔多少秒探一个广告-->
<script>
/*var id = setTimeout("alert('哈哈哈哈哈')",1000);*/
//显示
window.onload= function () {
setTimeout("show()",2000);
}
function show() {
var tv_img = document.getElementById("tv_img");
//修改其样式
tv_img.style.display="block";
// 多少秒让其隐藏
setTimeout("hide()",2000);
}
function hide() {
var tv_img = document.getElementById("tv_img");
//修改其样式
tv_img.style.display="none";
}
</script>
</body>
</html>
##5.完善表单校验。
目标要求是目前的各网站的注册页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<form method="get" action="index.html" >
<span id="tv_id">aaaaa</span>
<p>用户名:<input type="text" name="uname" id="tv_uname" onblur="addContent()" onfocus="deleteContent()"><span id="tv_uname_span"></span></p>
<p>密码:<input type="text" name="upwd" id="tv_upwd" onblur="addUpwdContent()" onfocus="deleteUpwdContent()"><span id="tv_upwd_span" ></span></p>
<p>确认密码:<input type="text" name="comfrim_pwd" id="tv_comfrim_pwd" onblur="addConformPwd()" onfocus="deleteConformPwd()"><span id="tv_comfrim_pwd_span"></span></p>
<p><input type="button" onclick="add()" value="提交"></p>
</form>
<script>
function add() {
var tv_id = document.getElementById("tv_id");
alert(tv_id.innerHTML);
}
/*uname 失去焦点所触发的函数*/
function addContent() {
var tv_uname = document.getElementById("tv_uname").value;
if(tv_uname ==null || tv_uname==""){
var tv_uname_span = document.getElementById("tv_uname_span");
tv_uname_span.innerHTML="<font>您输入不能为空</font>";
}
}
/*uname 获取焦点所触发的函数*/
function deleteContent() {
var tv_uname_span = document.getElementById("tv_uname_span");
tv_uname_span.innerHTML="";
}
/*upwd失去焦点*/
function addUpwdContent() {
var tv_upwd= document.getElementById("tv_upwd").value;
if(tv_upwd ==null || tv_upwd==""){
var tv_upwd_span = document.getElementById("tv_upwd_span");
tv_upwd_span.innerHTML="您输入的不能为空"
}
}
/*upw获取焦点的时候*/
function deleteUpwdContent() {
var tv_upwd_span = document.getElementById("tv_upwd_span");
tv_upwd_span.innerHTML="";
}
/*当确认密码是失去焦点*/
function addConformPwd() {
var tv_upwd= document.getElementById("tv_upwd").value;
var tv_comfrim_pwd =document.getElementById("tv_comfrim_pwd").value;
// 进行判断
if(tv_upwd !=tv_comfrim_pwd){
var tv_comfrim_pwd_span = document.getElementById("tv_comfrim_pwd_span");
tv_comfrim_pwd_span.innerHTML="您输入的两次密码不一致";
}
}
/*当确认密码失去焦点*/
function deleteConformPwd() {
var tv_comfrim_pwd_span = document.getElementById("tv_comfrim_pwd_span");
tv_comfrim_pwd_span.innerHTML="";
}
</script>
</body>
</html>