java向js文件中写内容

JS的简介

什么是js（了解）

• javascript简称js，是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，“寄生”在html体内随网络传输到客户端的浏览器的内存中解析。

• 脚本语言

• 脚本：电影或电视剧的拍摄时候的剧本底稿。/计算机中的脚本，给计算机看。脚本中包含一些给计算机的指令。
• Java和C语言，都需要编译成二进制的可执行文件。脚本文件是不需要编译，直接可以使用解释器进行解释执行！

• js是基于对象和事件驱动的脚本语言。

• 在Java中int i = 5；boolean res = true;
• 基于对象：不支持继承！
• 事件驱动：点击事件，前进后退、滑动、提交等等事件。

js的作用（了解）

js的作用很多，在目前学习阶段，只需要记住如下两个最最最常用的就可以了：

• 1.js可以动态的修改html及css的代码（修改的是浏览器内存中的那一份代码）
• 2.js可以对表单进行校验

js的组成部分（理解）

• 1.ECMAScript：这一部分主要是js的基本语法
• 2.BOM：Browser Object Model 浏览器对象模型，主要是获取浏览器信息或操作，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等（window）
• 3.DOM：Document Object Model 文档对象模型，此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后页面

js的引入方式（重点）

• 行内脚本

• 在标签上添加属性，绑定事件

• 内部脚本

• 创建一个script标签，在script标签中写js代码

• 外部脚本

• 在js文件夹中创建一个".js"结尾的文件，在改文件中写代码，什么地方需要使用到该文件中的代码就使用script标签的src属性将改文件引入

三种引入方式的优缺点介绍

优点

• 行内脚本

• 直观

• 内部脚本

• 复用性较强

• 外部样式

• 复用性特别强

缺点

• 行内样式

• 毫无复用性
• 只能写简单的js代码

• 内部样式

• 不太直观

• 外部样式

• 可读性差
• 用户加载这个html文件的时候还要加载js文件，流量消耗较大

js的变量

• Java的变量：

• 变量类型 变量名 = 变量值

• js的变量：

• var 变量名 = 变量值

js的数据类型

基本数据类型

• 数字类型：number
• 布尔类型：boolean
• 字符串类型：string
• 未定义：undefined
• 空类型：null （object）

类型之间的转换

• number和boolean转换成string。

• toString()

• string转number（重要）

• parseInt()
• parseFloat()

• number、string转boolean。（重要）

• new Boolean()

引用数据类型

跟Java中一样，js中的对象类型都是引用数据类型

• var obj = new Object();
• var str = new String();
• var date = new Date();

引用数据类型全为object类型

js中的运算符

• 赋值运算符 var num = 5;
• 比较运算符

• “>”
• <
• == 比较数据大小
• !=
• === 比较数据大小和内容

• 逻辑运算符，在js中没有单与和单或

• &&
• ||
• !

• 算数运算符

• +
• -
• *
• /
• %

• 三元运算符

• 条件?a:b

js中的逻辑语句

• 跟Java不同的 for(index in 数组名) ，index表示数组中的数据的下标

js中的函数(重点)

作用：封装一些功能实现

js中定义函数的三种方式（前两种是重点）

• 一般方式

function 函数名(){}

• 匿名函数

function(){}

• 对象方式(以后用不到)

js中的常用事件（重点）

事件概述

js的事件是js不可或缺的组成部分，要学习js的事件，必须要理解如下几个概念：

• 1）事件源：被监听的html元素(这个事件发生在谁身上，谁就是事件源)
• 2）事件：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
• 3）事件与事件源的绑定：在事件源上注册上某事件，通过类似onclick等属性进行绑定
• 4）事件触发后的响应行为：事件触发后需要执行的代码，一般使用函数进行封装

常用事件

• onload 当页面加载完成时触发
• onsubmit 当表单提交的时候触发
• onclick 当鼠标点击某个对象的时候触发
• ondblclick 当鼠标双击某个对象的时候触发
• onfocus 当获取焦点的时候触发
• onblur 当失去焦点的时候触发
• onchange 当用户改变域的内容时触发
• onkeydown 当键盘按键被按下时触发
• onkeypress 当键盘按键被按住时触发
• onkeyup 键盘按键松开时触发
• onmousedown 当鼠标左键按下时触发
• onmouseup 当鼠标左键松开时触发
• onmouseover 当鼠标移到某个元素之上时触发
• onmouseout 当鼠标移开某个元素时触发
• onmousemove 当鼠标移动时触发

BOM（对象集合）

BOM的概述（了解）

BOM（Browser Object Mode），浏览器对象模型，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出以下页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功能。

BOM的对象

• 1.Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。(了解)
• 2.Window对象（BOM里面最顶级的对象），Window 对象表示一个浏览器窗口或一个框架。（重点）
• 3.Navigator对象，包含的属性描述了正在使用的浏览器(了解)
• 4.History对象，其实就是来保存浏览器历史记录信息。(了解)
• 5.Location对象，location对象的href属性可以用于跳转页面。（重点）

Window对象

一、弹框（重点）

• 提示框 alert(提示信息)
• 确认框 confirm(提示信息)
• 输入框 prompt(提示信息)

二、定时器（重点）

• 执行一次的定时器：setTimeout

• 第一个参数：函数对象
• 第二个参数：毫秒值

• 执行多次的定时器：setInterval

• 清除定时器clearInterval(定时器对象)

三、全局方法（了解）

• parseInt()和parseFloat()函数

Location对象

• href,可以在js中对url进行访问。
• 应用：定时弹出广告页面。

定时跳转到广告网页

• 1.当页面加载成功之后开启一个定时器(只执行，一次的定时器)
• 2.给定时器设置时间为5秒之后执行，定时器中执行的函数为

x window.onload = function(){
       setTimeout(function(){
      location.href = "http://www.baidu.com"
      },5000)
   }

定时弹广告的案例

• 1.给首页添加一个div，在div中放置一张广告图片，并设置该div的默认display属性为none(表示隐藏)
• 2.当页面加载完毕的时候开启一个定时器(只执行一次的定时器),5秒后执行。执行的任务是设置div的display属性为block

window.onload = function(){
      var ad = document.getElementByid("add")
      setTimeout(function(){
          ad.style.display = "block"
          
          //并且当广告图片显示4秒钟之后要隐藏广告
          setTimeout(function(){
              ad.style.display = "none"
          },4000)
      },5000)
  }

轮播图的案例

• 1.当页面加载完毕的时候开启一个周期性执行的定时器，每隔三秒执行一次
• 2.获取轮播图对应的src标签，并在定时器每次执行的时候重新设置图片的src属性

window.onload = function(){
      //获取图片标签
      var im = document.getElementByid("img1")
      //将轮播图的图片放到数组中
      var imgs = ["images/1.jpg","images/2.jpg","images/3.jpg"]
      //开启一个定期执行的定时器
     var i = 0;
     setInterval(function(){
         //这里就做更改img的src属性的操作
         i ++;
         if(i == 3){
         i=0;
         }
         img.src = imgs[i];
     },3000)
  }

表单校验的案例

• 1.给submit按钮绑定点击事件
• 2.当点击submit按钮的时候，判断用户名和密码输入框的value是否为空，如果为空则弹框提示

最低要求:

1.掌握js的变量声明以及运算符、逻辑语句

2.掌握js的两种函数声明方式

3.掌握常见的事件，以及两种事件的绑定方式

4.掌握window对象的三种弹框和两种定时器的使用

5.掌握location对象的href属性的使用