JavaScipt

  • 2.1 javascript的组成部分

    ECMAScript: 它是整个 javascript 的核心，包含(基本语法、变量、关键字、保留字、数据类型、语句、函数等等)DOM：文档对象模型，包含(整个 html 页面的内容)、BOM：浏览器对象模型,包含(整个浏览器相关内容)

  • 步骤（BOM)

  • 1. window对象

    1. 第一步: 确定事件(onsubmit)并为其绑定一个函数
    2. 第二步: 书写这个函数(获取用户输入的数据<需要在指定位置定义一个id>)
    3. 第三步: 对用户输入的数据进行判断
    4. 第四步: 数据合法(让表单提交)
    5. 第五步: 数据非法(给出错误信息, 不让表单提交)
    6. 问题：如何控制表单提交？
      关于事件 onsubmit: 一般用于表单提交的位置, 那么需要在定义函数的时候给出一个返回值， onsubmit = return checkForm()
  • 步骤分析:

  1. 确定事件(onload)并为其绑定一个函数

  2. 书写绑定的这个函数

  3. 书写定时任务(setInterval)

  4. 书写定时任务的函数

  5. 通过变量的方式, 进行循环 (获取轮播图的位置, 并设置src属性)

  6. 进行循环: 到最后一张的图片时候要重置

  • 定时操作

  1. 在页面指定位置隐藏一个广告图片 (使用display 属性的 none值)

  2. 确定事件(onload)并为其绑定一个函数

  3. 书写这个函数(设置一个显示图片的定时操作)

  4. 书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)

  5. 清除显示图片的定时操作()

  6. 书写隐藏图片的定时操作

  7. 书写定时器中的函数(获取广告图片的位置并设置属性style的display值none)

  8. 清楚隐藏图片的定时操作()

  • 代码实现

  1.   <script type="text/javascript">
  2.       function init() {
  3.           //书写轮播图显示定时操作
  4.           setInterval("changeImg()", 3000);
  6.           //设置显示广告图片的定时操作, time不加 var就是全局变量
  7.           time = setInterval("showAd()", 3000);
  8.       }
  9.       //书写函数
  10.       var i = 0;
  11.       function changeImg() {
  12.           i++;
  13.           //获取图片位置，并设置src属性值
  14.           document.getElementById("img1").src = "../img/" + i + ".jpg";
  15.           if (i == 3) {
  16.               i = 0;
  17.           }
  18.       }
  20.       //2.书写显示广告图片的函数
  21.       function showAd() {
  22.           //3.获取广告图片的位置
  23.           var adEle = document.getElementById("img2");
  24.           //4.修改广告图片元素里的属性让其显示
  25.           adEle.style.display = "block"
  26.           //5.清除显示图片的定时操作
  27.           clearInterval();
  28.           //设置隐藏图片的定时操作\n
  29.           setInterval("hiddenAd()", 3000);
  30.       }
  32.       function hiddenAd() {
  33.           //8.获取广告图片并设置其style属性的display值为none
  34.           document.getElementById("img2").style.display = "none";
  35.           //9. 清除隐藏广告图片的定时操作
  36.           clearInterval(time);
  37.       }
  38.   </script>
  39.   ​
  40.   <body onload="init()">
  41.     <img src="../img/gg.jpg" width="100%" style="display: none;" id="img2"/>
  42.   </body>

1. Window

2. Navigator

3. History

4. Location

四、使用JS完成注册页面表单校验

第一步：确定事件 (onfocus 聚焦事件)并为其绑定一个函数

第二步：书写绑定函数(在输入框的后面给出提示信息)

第三步：确定事件(onblur 离焦事件)

第四步：书写函数(对数据进行校验，分别给出提示)

Javascript简单介绍

  1. 语法

  2. 变量：只能用var定义, 如果在函数的内容使用var定义，就是局部变量，否则是全局的

  3. 数据类型：原始数据类型(undefinded/null/string/number/boolean)

  4. 语句：

  5. 运算符： == 与 ===的区别

  6. 函数：两种写法(有命名称，匿名的)

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入门笔记（一）的更多相关文章

  1. JavaScript基础——JavaScript入门(笔记)

    JavaScript入门(笔记) JavaScript是一种轻量级.解释型的Web开发语言,该语言系统不是很庞杂,简单易学.由于所有现代浏览器都已嵌入JavaScript引擎,JavaScript源代 ...

  2. javascript入门笔记3-dom

    1.通过ID获取元素 document.getElementById("id") <!DOCTYPE HTML> <html> <head> & ...

  3. JavaScript入门笔记

    第一章 JavaScript语法 1.1 初识JavaScript 1.3 数据类型 1.4 string和boolean类型 1.5 算数操作符 第二章 JavaScript流程控制语句 2.1 循 ...

  4. JavaScript 入门笔记

    JavaScript   1.JS和DOM的关系 浏览器有渲染html代码的功能,把html源码在内存里形成一个DOM对象,就是文档对象 浏览器内部有一个JS的解释器/执行/引擎,如chrome用v8 ...

  5. javascript入门笔记9-认识DOM

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分 ...

  6. javascript入门笔记8-window对象

    History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能. 注意:从窗口被打开的那一刻开始记录,每个浏览器窗口.每个标签页乃至每个框架,都 ...

  7. javascript入门笔记7-计时器

    计时器 语法: setInterval(代码,交互时间) 参数说明: 代码:要调用的函数或要执行的代码串. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms). 例子: & ...

  8. javascript入门笔记6-内置对象

    1.Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date() ...

  9. javascript入门笔记5-事件

    1.继续循环continue; continue的作用是仅仅跳过本次循环,而整个循环体继续执行. 语句结构: for(初始条件;判断条件;循环后条件值更新) { if(特殊情况) { continue ...

随机推荐

  1. 【每日scrum】NO.8

    (1) 在图的设计过程中掌握了图的基本运算函数的算法的理解和程序的有效吸收,包括图的深度和广度优先的遍历,对图的联通分量的求解,图的最小生成树,图的拓扑排序,图的关键路径, (2)在迪杰斯特拉算法的基 ...

  2. 解决Ubuntu16.04 fatal error: json/json.h: No such file or directory

    参考博客 错误产生 安装json-c库之后,根据GitHub上面的readme文件链接到json-c库时出现以下错误: SDMBNJson.h:9:23: fatal error: json/json ...

  3. Alpha冲刺阶段集合贴

    第一篇:http://www.cnblogs.com/xss6666/p/8870734.html 第二篇:http://www.cnblogs.com/xss6666/p/8893683.html ...

  4. PHP中与类和对象有关的几个系统函数

    与类有关的系统函数: class_exists(“类名”), 判断一个类是否存在(是否定义过) interface_exists(“接口名”), 判断一个接口是否存在(是否定义过) get_class ...

  5. C# SqlCommand和SqlDataAdapter的区别

    SqlCommand和SqlDataAdapter的区别 SqlCommand对应DateReader   SqlDataAdapter对应DataSet   SqlCommand的执行效率比较高,但 ...

  6. 第161天：CSS3实现兼容性的渐变背景(gradient)效果

    CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...

  7. JavaScript常用方法（工具类的封装）

    日期格式化 function formatDateTime(timeStamp) { var date = new Date(); date.setTime(timeStamp); var y = d ...

  8. mysql索引长度的一些限制

    一.myisam存储引擎 1. 数据库版本:阿里云RDS MySQL5.1 mysql> select @@version;+-------------------------------+| ...

  9. 【刷题】BZOJ 1030 [JSOI2007]文本生成器

    Description JSOI交给队员ZYX一个任务,编制一个称之为"文本生成器"的电脑软件:该软件的使用者是一些低幼人群,他们现在使用的是GW文本生成器v6版.该软件可以随机生 ...

  10. 2656: [Zjoi2012]数列(sequence)（递归+高精度）

    好久没写题了T T NOIP 期中考双血崩 显然f(x)=f(x>>1)+f((x>>1)+1),考虑每次往x>>1递归,求出f(x),复杂度O(logN) 我们设 ...