Javascript基础ppt

w3school：https://www.w3school.com.cn/js/index.asp

本章目标

●了解JavaScript起源、特征
●掌握JavaScript程序的开发工具、运行环境、运行机制等
●掌握JavaScript语言规范:变量、常量、变量类型、流程处理语句、函数定义声明、对象的创建等
●掌握JavaScript常用的API: JavaScript函数、JavaScript对象等
●了解事件相关的概念和作用
●掌握常用的事件类型、事件处理机制和原理以及三种注册事件处理程序的方式
●能够灵活的运用事件来实现HTML网页中某些功能的扩展

JavaScript概述

●JavaScript的应用场景

表单数据合法性验证
网页特效
交互式菜单
动态页面
数值计算

●JavaScript的特点

简单性
动态性
跨平台性
安全性

●JavaScript的开发 与运行

●选择一款好的开发T具让你事半功倍
文本编辑器(如: Notepad++)， IDE (如: Eclipse、DreamWeaver )
●JavaScript的运行环境
.客户端浏览器。推荐:火狐浏览器(兼容性好)。
●将JavaScript嵌入网页
使用<script>标签将语句嵌入文档
将avaScript源文件( .is )链接到HTML文档中

JavaScript基本语法

●JavaScript语句和代码块

JavaScript语句是发给浏览器的命令，
JavaScript语句结束使用回车,但建议使用";"

<script>
        document.write("hello world");
        document.write("<p>hello inspur</p>");
</script>

JavaScript代码块是一段JavaScript代码的集合。
以左花括号开始，右花括号结束。
代码块用于在函数或条件语句中把若干语句组合起来,作用是一并地执

<script>
        function mycheck()
        {
        }
</script>

●标识符

就是给变量、函数和对象等指定的名字
标识符的命名规则：
javascript区分大小写
首字符可以是 _ $ 字母
其他字符可以 _ $ 字母 数字

●变量

var name;
name="tom";
name=20;  //是弱类型的语言，可以改变变量的数据类型

📕变量的数据类型：
基本的数据类型有：数字型、字符串型、布尔型
复杂的数据类型：数组、对象
特殊的数据类型：Null、Undefined
📕数字型：表示整数值和浮点数值
数字序列就是一个十进制的整数。如：123
十六进制的数字以“0x”或“0X”开头，如：0x25ffff
浮点数，如：3.1415、0.66666、1.46783E-32
📕字符串：是使用单引号或双引号包起来的零个至多个字符，单引号与双引号必须成对出现，而且单双引号可嵌套使用。

”abc”、’中文’

Var a=’’;     //a是空字符串，说明a是字符串类型的变量，长度为0
Var b=null;     //b是等于null的变量，也可以认为它的值是“无值”
Var c;          //c表示是一个没有初始化的变量，访问得到Undefined

●数组

var arr=[1,2,3];
var arr=[1,true,'a',[3,4]];
arr[1]=false;
'a'+'bc'=='abc'

●运算符

for(var i=1;i<10;i++){
	if(i%5==0){
		break;
	}
	document.write("i="+i+";<br/>");
}

●string对象

var myString="Hello inspur!";
var myString=new String("Hello inspur!");
charAt()：返回指定位置的字符。
indexOf() ：返回某个指定的字符串值在字符串中首次出现的位置。指定字符串在字符串中不存在时返回-1.
replace(oleStr,newStr) ：在字符串中用一些字符替换另一些字符语法。
toLocaleLowerCase()：把字符串转换为小写。
substring(start,stop) ：提取字符串中介于两个指定下标之间的字符,该方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。

●Math对象

Math 对象用于执行数学任务。Math对象并不像Date和 String那样是对象的类，因此没有构造函数Math().

●Date对象

var now = new Date();
document.write("<p>当前年份:"+now.getFullYear()+"</p>");
document.write("<p>当前月份:"+now.getMonth()+"</p>");
document.write("<p>当前日期:"+now.getDate()+"</p>");
document.write("<p>今天星期:"+now.getYear()+"</p>");
document.write("<p>当前完整时间:"+now+"</p>");

●数组对象

new Array();创建了一个数组对象
new Array(size);规定了数组对象的大小
new Array(element0, element1, ..., elementn);声明数组对象的同时，为数组对象增加了元素

concat()：连接两个或多个数组。
join() ：把数组中的所有元素放入一个字符串。
sort() ：对数组的元素进行排序。
toString () ：把数组转换为字符串，并返回结果。

JavaScript函数

●内置函数

eval(String) 计算某个字符串，并执行其中的的 JavaScript 代码

eval("x=10;y=20;document.write(x*y)")

isNaN(String)函数用于检查其参数是否是非数字值。如果函数的参数是非数字值，返回的值就是 true。如果参数是数字值,则返回 false。

var a=10;
var b=20
document.write("isNaN(a+b):"+isNaN(a+b)+"<br>");
document.write("isNaN(a+''a''):"+isNaN(a+'a')+"<br>");

●自定义函数

funciton 函数名（参数1，参数2，…）{
	函数体；
}

函数调用格式：事件名=“函数名”

<input name="add" type="button" value="add" onClick="sum(2,5)">
注释： 
/*
哈哈
*/

常用API

●全局函数

●数组函数

●Boolean对象函数

●Date对象函数

●Math对象函数

●number对象函数

●string对象函数

JavaScript 事件概述

事件是可以被 JavaScript 侦测到的行为，可以是浏览器行为，也可以是用户行为.
通过使用JavaScript，可以监听特定事件的发生，来实现某些功能的扩展。

●事件类型

UI(User Interface,用户界面)事件，当用户与页面上的元素交互时触发；
焦点事件，当元素获得或失去焦点时触发；
鼠标事件，当用户通过鼠标在页面执行操作时触发；
滚轮事件，当使用鼠标滚轮（或类似设置）时触发；
文本事件，当在文档中输入文本时触发；
键盘事件，当用户通过键盘在页面上执行操作时触发；
合成事件，当为IME（Input MethodEditor，输入法编辑器）输入字符时触发；
变动（mutation）事件，当底层DOM结构发生变化时触发；

●UI 事件

UI事件指的是那些不一定与用户操作有关的事件

●焦点事件

焦点事件会在页面得到焦点或失去焦点时触发。鼠标点击可获得光标（即获得焦点），Tab键可按照设置的Tabindex进行切换焦点。

●鼠标事件和滚轮事件

单击类触发顺序： mousedown 、mouseup 、click 、mousedown 、mouseup 、click 、dbclick

●事件处理

相关概念
事件类型（event type）：前面一节已经介绍，在此处不再赘述。
事件目标（event target）：是发生事件或与之相关的对象。window、document和element（元素）对象是最常见的事件目标，当然，AJAX中的XMLHttpRequest对象也是一个事件目标。
事件处理程序（event handler）：是处理或响应事件的函数，它也叫事件监听程序（event listener）。事件处理程序的名字以“on”开头，如：click事件的事件处理程序就是onclick。
事件对象（event object）：是与特定事件相关且包含有关该事件详细信息的对象。
事件句柄


注册事件处理程序的方式有三种
设置HTML标签属性为事件处理程序
设置JavaScript对象属性为事件处理程序。
使用addEventListener和attachEvent函数绑定

设置HTML标签属性为事件处理程序
语法为： onXXX="JavaScript Code“
XXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
JavaScript Code 为处理事件的JavaScript代码，一般是函数。

<div onclick="alert(div1)">
    <div onclick="alert(div2)">
        <div onclick="alert(div3)">div3</div>
    </div>
</div>

设置JavaScript对象属性为事件处理程序
通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。
事件处理程序属性名字由“on”后面跟着事件名组成

<script>
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        var div3 = document.getElementById('div3');
        div1.onclick=function(){
            alert('div1');
        };
        div2.onclick=function(){
            alert('div2');
        };
        div3.onclick=function(){
            alert('div3');
        };
</script>

使用addEventListener和attachEvent函数绑定
任何能成为事件目标的对象都定义了一个名叫addEventListener()的方法，使用这个方法可以为事件目标注册事件处理程序。
其中： bool参数可省略，默认为flase，当其为true时，就是在事件捕获过程中注册事件处理程序。

addEventListener(事件类型,事件处理函数[bool])

<script>
        /*获取id巍div1元素的对象和attachEvent函数绑定*/
        var div1 = document.getElementById('div1');
        /*调用div1对象的addEventListener函数*/
        div1.addEventListener(click,function(){alert('div1-bubble');},flase);
        div1.addEventListener(click,function(){alert('div1-capturing');},true);
</script>

获得焦点（focus）和失去焦点（blur）事件

<Form name="form1">
     姓名：<input type="text" name="name"><br/><br/>
     <!--设置HTML标签属性为事件处理程序，onblur失去焦点事件，对应的事件处理函数为checkData
      onFocus获取焦点事件，对应的事件处理函数为clearData-->
     年龄：<input type="text" name="age" value="年龄必须在20~40之间" onBlur="checkData()" onFocus="clearData()"/>
</form>

鼠标移动和鼠标按下事件

<form name="form1">
        姓名：<input type="text" name="name"
        onMouseOver = "fn_onMouseOver(this) “
        onMouseDown="fn_onMouseDown(this)“
        onMouseOut="fn_onMouseOut(this)">
        <br/><br/>
        年龄：<input type="text" name="age“
        onMouseOver="fn_onMouseOver(this)" 
        onMouseDown="fn_onMouseDown(this)" 
        onMouseOut="fn_onMouseOut(this)"/>
    </form>

●UI事件

UI事件中的load事件通常用于检测文档内容或者图片是否加载完毕。
事件目标为window对象，通过给window对象的onload属性进行赋值，赋值为事件处理函数
当文档加载完毕后，会触发window对象的onload事件，执行事件处理函数体里面代码

<script>
        window.onload=function()
        {
            //事件处理
        }
</script>

●表单事件

submit事件
通常监测是否提交表单元素，当提交表单元素时会触发，也就是form元素对象.onsumit事件。
需要注意的是，动态表单提交（form.submit()）无法触发onsubmit事件。submit事件常用来进行表单数据验证。

<form name="myForm" action="ch9-8(1).html" onSubmit="return check()">
	    <p>账号：<input type="text" name="loginId"></p>
	    <p>密码：<input type="password" name="password"></p>
	    <p><input type="submit" value="登录">&nbsp;&nbsp;<input type="reset" value="清除"></p>
</form>

change事件
作用域的内容被改变时触发，该事件是在内容改变时还必须使得当前元素失去焦点(onblur)才可以激活。
change 事件会被HTML的<input>、<select>和<textarea> 元素触发。

<form action="" method="post" name="myform">
        <p><font>我是一名大学生</font></p>
        <p>字体：	<select name="myFontFace" onChange="changeFont()">
            <option value="宋体">宋体</option>	
            <option value="黑体">黑体</option>
            <option value="楷体">楷体</option>
        </select>	</p>
</form>

总结

1、JavaScript事件的概念和作用，包含事件、事件类型、事件目标、事件对象和事件处理程序等概念。
2、事件类型（UI事件、焦点事件、鼠标事件、键盘事件、滚轮事件、文本事件等
3、注册事件处理程序，3中常用方式：设置HTML标签属性为事件处理程序、设置JavaScript对象属性为事件处理程序、使用addEventListener和attachEvent函数绑定。
4、JavaScript常用事件：获取焦点事件、失去焦点事件、鼠标移动事件、鼠标按下事件、load事件、submit事件、change事件等。