java scrapt

Posted 2020-12-25 haowenliang

javascript

　　是web上一种功能强大的编程语言，用于开发交互式的web页面。它不序言进行编译，而是直接侵入在html页面中，有浏览器执行

　　作用：使用js添加页面动画效果，提供用户操作体验，主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览信息等。

　　js本地实际用来向HTML页面添加交互行为

　　js是一种脚本语言（脚本语言是一种轻量级的编程语言）

　　js由数行可执行计算机代码组成

　　js通常被直接嵌入HTML页面

　　js式一种解释性语言（就是说，代码执行不进行预编译）

js的组成：

　　核心(ECMAScript）:语法，语句

　　文档对象模型（DOM）浏览器对象

　　浏览器对象模型（BOM）操作文档中的元素和内容

js的引入：内嵌式、外链式

　　内嵌式：通过<script>标签嵌入   <script type = "text/javascript">//javascript代码</script>

　　外联式：在html文档中，通过<scripe src="">标签引入.js文件，例如：<script src = "1.js" type="text/javascript" charset="utf-8"></script>

基本语法

　　变量

　　　　命名规范：必须以字母或下划线开头，中间式可以是数字、字符或下划线；变量不能包含空格等符号；不能使用js关键字作为变量名；js严格区分大小写

　　　　变量声明：var 变量名；//js中变量可以不声明，直接使用，默认值为undefined

　　　　变量的赋值：var 变量名=值；//js变量式弱类型，及同一个变量可以存放不同类型的数据

　　数据类型

　　　　undefined，类型只有一个值，即undefined。当声明变量未初始化时，该变量的默认值是undefined

　　　　null 只有一个专用值null，表示空，一个占位符。

　　　　alert（null==undefined）；//输出“true”，尽管这两个值相等，但他们的含义不同。

　　　　　　boolean，有两个值true和false

　　　　　　Number，表示任意数字

　　　　　　String字符串由双引号或单引号声明　　

　　　　对变量或值调用typeof运算符将返回下列值之一：

　　　　　　undefined - 如果变量式undefined类型的

　　　　　　boolean - 如果变量是boolean类型的

　　　　　　number - 如果变量是number类型的

　　　　　　string - 如果变量是string类型的

　　　　　　object - 变量是一种引用类型或null类型的

基本操作：

　　元素的输出：

　　　　alert（）：向页面中探出一个提示框

　　　　innerHTML：向页面中的某个元素中写一段内容，将原有的东西覆盖

　　　　document.write（）：向页面中写内容

　　获取元素内容：

　　　　获取元素：document.getElementById("id名称")；

　　　　获取元素里面的值： document.getElementById("id名称").value

javascript事件

　　常用的事件：

　　　　onblur 元素失去焦点

　　　　onchange 用户改变域的内容

　　　　onclick鼠标点击某个对象

　　　　ondblclick鼠标双击某个对象

　　　　onload某个页面或图像被完成加载　

　　　　onmousemove鼠标被移动

　　　　onmouseout鼠标从某元素移开

　　　　onmouseover鼠标被移到某元素之上

　　　　onsubmit提交按钮被点击

　　　　onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。

　　　　onclick/ondblclick:鼠标单击和双击事件

　　　　onkeydown/onkeypress：搜索引擎使用较多

　　　　onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。

　　　　onmouseover/onmouseout/onmousemove：购物网站商品详情页。

　　　　onsubmit：表单提交事件 ，有返回值，控制表单是否提交。

　　　　onchange:当用户改变内容的时候使用这个事件(二级联动)

表单提交事件：onsubmit 

　　　　步骤分析：

　　　　　　一：确定事件（onsubmit）并为其绑定一个函数

　　　　　　二：书写这个函数（获取用户输入的数据<获取数据是需要在制定位置定义一个id>）

　　　　　　三：对用户的数据进行判断

　　　　　　四：数据合法（让表单提交）

　　　　　　五：数据非法（给出错误提示信息，不让表单提交）

　　　　　　如何控制表单提交：关于事件onsubmit:一般用于表单提交的位置，那么需要在定义函数的时候给出一个返回值。onsunmit = return checkForm() 在<sctipt>标签中：function checkForm(){var uvalue = document.getElementById("user").value;if(uvalue==""){alert("用户名为空");return false;}}

　　表单提交事件代码优化

　　　　聚焦事件（onfocus）

　　　　离焦事件(onblur)

　　　　步骤分析：

　　　　　　一：确定事件（onfocus聚焦事件）并为其绑定一个函数<input type="text" name="user" size="34px" id="user" onfocus="showTips()" onblur="check()"/><span id="userspan"></span>>

　　　　　　二：书写绑定函数（在输入框的后面给出提示信息）在<sctipt>标签中function showTips(){document.getElementById("userspan").innerHTML="<font color=‘gray‘>请输入用户名</font>";}

　　　　　　三：确定时间（onblur离焦事件）并为其绑定一个函数 onblur="check()"具体步骤代码在步骤一中有体现

　　　　　　四：书写函数（对函数进行校验，分别给提示）function check(){var uvalue = document.getElementById("user").value;if(uvalue==""){document.getElementById("userspan").innerHTML="<span color=‘red‘>用户名输入不正确</span>";}else{document.getElementById("userspan").innerHTML="";} }

　　　　<span>表示追加

　　　　在传参数式不用标明参数的具体类型（如下代码）。

　　　　　　<input type="text" name="user" size="34px" id="user" onfocus="showTips(‘user‘,‘用户名必填！‘)" onblur="check(‘user‘,‘用户名不能为空！‘)"/><span id="userspan"></span>

　　　　　　function showTips(id,info){document.getElementById(id+"span").innerHTML="<font color=‘gray‘>"+info+"</font>";}

　　　　function check(id,info){var uValue = document.getElementById(id).value;if(uValue==""){document.getElementById(id+"span").innerHTML="<font color=‘red‘>"+info+"</font>";}else{document.getElementById(id+"span").innerHTML="";}}