JavaScript入门笔记（一）

时间：2023-03-09 22:54:56
JavaScript入门笔记（一）

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. 清楚隐藏图片的定时操作()

  • 代码实现

  <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简单介绍

  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

相关文章