JavaScipt
-
2.1 javascript的组成部分
ECMAScript: 它是整个 javascript 的核心,包含(基本语法、变量、关键字、保留字、数据类型、语句、函数等等)DOM:文档对象模型,包含(整个 html 页面的内容)、BOM:浏览器对象模型,包含(整个浏览器相关内容)
-
步骤(BOM)
-
1. window对象
-
第一步: 确定事件(onsubmit)并为其绑定一个函数
-
第二步: 书写这个函数(获取用户输入的数据<需要在指定位置定义一个id>)
-
第三步: 对用户输入的数据进行判断
-
第四步: 数据合法(让表单提交)
-
第五步: 数据非法(给出错误信息, 不让表单提交)
-
问题:如何控制表单提交?
关于事件 onsubmit: 一般用于表单提交的位置, 那么需要在定义函数的时候给出一个返回值, onsubmit = return checkForm()
-
-
步骤分析:
- 确定事件(onload)并为其绑定一个函数
- 书写绑定的这个函数
- 书写定时任务(setInterval)
- 书写定时任务的函数
- 通过变量的方式, 进行循环 (获取轮播图的位置, 并设置src属性)
- 进行循环: 到最后一张的图片时候要重置
-
定时操作
- 在页面指定位置隐藏一个广告图片 (使用display 属性的 none值)
- 确定事件(onload)并为其绑定一个函数
- 书写这个函数(设置一个显示图片的定时操作)
- 书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
- 清除显示图片的定时操作()
- 书写隐藏图片的定时操作
- 书写定时器中的函数(获取广告图片的位置并设置属性style的display值none)
- 清楚隐藏图片的定时操作()
-
代码实现
<script type="text/javascript"> function init() { //书写轮播图显示定时操作 setInterval("changeImg()", 3000); //设置显示广告图片的定时操作, time不加 var就是全局变量 time = setInterval("showAd()", 3000); } //书写函数 var i = 0; function changeImg() { i++; //获取图片位置,并设置src属性值 document.getElementById("img1").src = "../img/" + i + ".jpg"; if (i == 3) { i = 0; } } //2.书写显示广告图片的函数 function showAd() { //3.获取广告图片的位置 var adEle = document.getElementById("img2"); //4.修改广告图片元素里的属性让其显示 adEle.style.display = "block" //5.清除显示图片的定时操作 clearInterval(); //设置隐藏图片的定时操作\n setInterval("hiddenAd()", 3000); } function hiddenAd() { //8.获取广告图片并设置其style属性的display值为none document.getElementById("img2").style.display = "none"; //9. 清除隐藏广告图片的定时操作 clearInterval(time); } </script> ? <body > <img src="../img/gg.jpg" width="100%" style="display: none;" id="img2"/> </body>
1. Window
2. Navigator
3. History
4. Location
四、使用JS完成注册页面表单校验
第一步:确定事件 (onfocus 聚焦事件)并为其绑定一个函数
第二步:书写绑定函数(在输入框的后面给出提示信息)
第三步:确定事件(onblur 离焦事件)
第四步:书写函数(对数据进行校验,分别给出提示)
Javascript简单介绍
- 语法
- 变量:只能用var定义, 如果在函数的内容使用var定义,就是局部变量,否则是全局的
- 数据类型:原始数据类型(undefinded/null/string/number/boolean)
- 语句:
- 运算符: == 与 ===的区别
- 函数:两种写法(有命名称,匿名的)
BOM对象
window: alert(), prompt(), confirm(), setInterval(), clearInterval(), setTimeout(), clearTimecout()
history: go(参数), back(), forward()
location: href属性
事件:
- onsubmit()此事件写在form标签中,必须有返回值。
- onload() 此事件只能写一次,且放到body标签中
- 其他时间放到需要操作的元素位置,(onclick, onfocus, onblur)
获取元素:
- document.getElementById("Id")
获取元素里的值:
- document.getElementById("id").value
向页面输出:
- 弹窗: alert();....
- 向浏览器中写入内容: document.write(内容);
- 向页面指定位置写入内容: innerHTML
时间: 2024-08-04 13:10:48