JavaScript入门笔记(一)
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 onload="init()">
<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
JavaScript入门笔记(一)的更多相关文章
- JavaScript基础——JavaScript入门(笔记)
JavaScript入门(笔记) JavaScript是一种轻量级.解释型的Web开发语言,该语言系统不是很庞杂,简单易学.由于所有现代浏览器都已嵌入JavaScript引擎,JavaScript源代 ...
- javascript入门笔记3-dom
1.通过ID获取元素 document.getElementById("id") <!DOCTYPE HTML> <html> <head> & ...
- JavaScript入门笔记
第一章 JavaScript语法 1.1 初识JavaScript 1.3 数据类型 1.4 string和boolean类型 1.5 算数操作符 第二章 JavaScript流程控制语句 2.1 循 ...
- JavaScript 入门笔记
JavaScript 1.JS和DOM的关系 浏览器有渲染html代码的功能,把html源码在内存里形成一个DOM对象,就是文档对象 浏览器内部有一个JS的解释器/执行/引擎,如chrome用v8 ...
- javascript入门笔记9-认识DOM
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分 ...
- javascript入门笔记8-window对象
History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能. 注意:从窗口被打开的那一刻开始记录,每个浏览器窗口.每个标签页乃至每个框架,都 ...
- javascript入门笔记7-计时器
计时器 语法: setInterval(代码,交互时间) 参数说明: 代码:要调用的函数或要执行的代码串. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms). 例子: & ...
- javascript入门笔记6-内置对象
1.Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date() ...
- javascript入门笔记5-事件
1.继续循环continue; continue的作用是仅仅跳过本次循环,而整个循环体继续执行. 语句结构: for(初始条件;判断条件;循环后条件值更新) { if(特殊情况) { continue ...
随机推荐
- IT小小鸟 读书笔记
讲真的,整本书我并没有看完,翻阅了一下,然后小小的借鉴了一下! 首先设计你自己的进度条 进度条的设计是一个很多人都知道的故事:同样的耗时,如果不给任何进度提示,只是在完成之后才弹出一个完成消息,中间没 ...
- Hibernate(六)
三套查询之HQL查询 hql语句(面向):类 对象 属性 package com.rong.entity.hql; public class User { public User(int id ...
- 【第三周】每周psp
代码累计 300+575+475=1250 随笔字数 1700+3000+3785=8485 知识点 Cppunit框架 Ui设计 Scrum站立会议 燃尽图(好像没燃起来) 博客写作技能 本周主要是 ...
- [翻译]API Guides - Bound Services
官方文档原文地址:http://developer.android.com/guide/components/bound-services.html 一个Bound Service是一个客户端-服务器 ...
- Linux 下安装 java 环境(jdk + mysql + tomcat)
Linux选用的是 centOS 6.8 64位 ,最先要将 centOS 中自带的 jdk 和 myqsql 卸载掉. 首先安装 了 SSH,通过 SSH 将 jdk,mysql,tomcat 的压 ...
- 当我们有多个类 继承同一个父类 这时候使用多态时候 可以使用该父类的类型做引用 不需要将object做引用
当我们有多个类 继承同一个父类 这时候使用多态时候 可以使用该父类的类型做引用 不需要将object做引用
- 【JavaScript】JAVA-表格里的c:foreach使用及数字总计
两步:1.上图 2.上代码 <div class="group-accordion" collapsible="true" active="tr ...
- [BZOJ1503][NOI2004]郁闷的出纳员 无旋Treap
1503: [NOI2004]郁闷的出纳员 Time Limit: 5 Sec Memory Limit: 64 MB Description OIER公司是一家大型专业化软件公司,有着数以万计的员 ...
- 【MediaElement】WPF视频播放器【1】
一.前言 前两天上峰要求做一个软件使用向导,使用WPF制作.这不,这两天从一张白纸开始学起,做一个播放演示视频的使用向导.以下是粗设计的原型代码: 二.效果图 三.代码 前台代码: < ...
- 【HDU5919】SequenceII(主席树)
[HDU5919]SequenceII(主席树) 题面 Vjudge 翻译(by ppl) 给一个长度为N的数列A,有m个询问,每次问 数列[l,r]区间中所有数的第一次出现的位置的中位 数是多少 题 ...