1.1JavaScript的概述
1.1.1什么是JavaScript
JavaScript是web上一种强大的编程语言,用于开发交互式的web页面,
JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
JavaScript 由数行可执行计算机代码组成。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
JavaScript的组成：
ECMAScript：语法，语句.
BOM:浏览器对象
DOM:Document Object Model.操作文档中的元素和内容.
1.1.2JavaScript的作用
使用JavaScript添加页面动画效果，提供用户操作体验
1.1.3JavaScript的引入
1.内嵌式
<script type="text/javascript">
//此处为JavaScript代码
</script>
2.外联式
<script src="1.js" type="text/javascript" ></script>
1.2基本语法
1.2.1变量
1)在使用JavaScript时，需要遵循以下命名规范：
必须以字母或下划线开头，中间可以是数字、字符或下划线
变量名不能包含空格等符号
不能使用JavaScript关键字作为变量名，如：function
JavaScript严格区分大小写。
2)变量的声明
var 变量名; //JavaScript变量可以不赋值，直接使用。默认值：undefined
3)变量的赋值
var 变量名 = 值; //JavaScript变量是弱类型，及同一个变量可以存放不同类型的数据
1.2.2数据类型
【基本类型】
undefined, undefined类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
null,只有一个专用值 null，表示空，一个占位符。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
alert(null == undefined); //输出 "true"，尽管这两个值相等，但它们的含义不同。
boolean，有两个值 true 和 false
number，表示任意数字
string，字符串由双引号（"）或单引号（'）声明的。JavaScript 没有字符类型
【引用类型】
引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。
JavaScript是基于对象而不是面向对象。
JavaScript提供众多预定义引用类型（内置对象）。
造一个对象：var obj = new Object();
造一个字符串对象：var str = new String();
造一个日期对象：var date = new Date();
内置函数的重要转换: 字符串转成数字
parseInt parseFloat
1.2.3运算符操作
JS中的布尔运算规则(一些其他数据类型值,可以当成布尔值使用)
* undefined:相当于false
* null:相当于false
* number:0相当于false;非0的值就是true
* string:""空字符串 false;非空的字符串就是true
* object:true
1.3函数(重要)
* JS中的函数:看成是java中的方法
* 1.普通函数的定义
* 格式:
* function 函数名(参数列表){
* 函数体;
* return 任意值;
* }
* 注意:
* 1.参数列表中的形式参数,不能写数据类型
* 2.函数的返回值
* 函数中写了return就是有返回值
* 函数中没写return就没有返回值
function sum (a,b){
//alert(a+b);
}
//调用两个整数求和的函数
var a = sum(1,2);
//alert(a);//undefined
* 2.匿名函数:定义一个函数没有名字
* 格式:
* function(参数列表){
* 函数体;
* }
* 注意:
* 匿名函数有2种使用方式:
* 1.可以把一个匿名函数赋值给一个变量,通过变量名使用这个函数
* 2.可以把匿名函数当成一个其它函数的参数使用(定时器)
var x = function(a,b){
return a*b;
}
alert(x(10,20));
/*function abc( funcution(){
//参数传递匿名函数
}){}*/
1.4事件(重要)
1.4.1事件概述
* JS的事件:
* 1）事件源：被监听的html元素
* 就是发生事件的地点(标签,元素 按钮,图片,文本)
* 天津港口
* 2）事件：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
* 爆炸事件
* 点击事件,获取焦点事件,失去焦点...
* 3）事件与事件源的绑定：在事件源上注册上某事件
* 事件与事件源必须的绑定在一起
* 天津港口发生了爆炸事件
* 按钮发生了点击事件,文本框发生了获取焦点事件,文本框发生了失去焦点事件
* 4）事件触发后的响应行为：事件触发后需要执行的代码，一般使用函数进行封装
* 天津港口发生了爆炸事件
* 后续处理:
* 救人,灭火,重建...
* 按钮发生了点击事件
* 后续处理:
* 使用函数处理,函数中写处理的逻辑
* function fn(){
* alert("按钮被点击了");
* }
*
* 事件源(按钮),发生了点击的事件,
* 发生点击事件之后,我们使用一个函数处理这个事件
*
* 怎么给元素添加事件
* 元素上(地点),添加一个属性 onXXX="事件的处理(函数)"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS中的事件</title> <script type="text/javascript"> function btClick(){ alert("按钮被鼠标点击了!"); } function textOnmouseover(){ alert("鬼子进村了!"); } function textOnfocus(){ alert("文本框获取了焦点!"); } </script> </head> <body> <!-- 创建一个input标签 type="botton" 给botton绑定一个鼠标点击事件 给input标签增加一个属性:onclick="事件触发后的响应行为(函数)"; 事件源:input标签 事件:点击事件 onclink 响应:调用了一个函数叫btClick() --> <input type="button" value="按钮点击事件" onclick="btClick()"/> <!-- 给文本框增加一个鼠标的移入事件 事件源:input标签 事件:onmouseover 鼠标被移到某元素之上 响应:调用了一个函数叫textOnmouseover() --> <input type="text" placeholder="请输入用户名" onmouseover="textOnmouseover()"/> <!-- 给文本框增加获取焦点事件事件 事件源:input标签 事件:onfocus 元素获得焦点 响应:调用了一个函数叫textOnfocus() --> <input type="text" placeholder="请输入用户名" onfocus="textOnfocus()"/> </body> </html>
1.5表单验证案例
5.1案例需求:
对用户名进行验证,要求必须填写
5.2相关知识点
DOM操作
document.getElementById()获取页面中的标签元素
属性: value 表达元素的value属性值
属性:innerHTML 向元素体添加内容
属性:style 改变元素的样式
<script type="text/javascript"> /* * 用户名校验案例 * 给from表单增加一个事件 * onsubmit 当表单提交时触发该事件---注意事件源是表单form * onsubmit事件的响应结果如果是false则不提交表单 * onsubmit事件的响应结果如果是true则会把表单提交到服务器的某个java程序中 */ function formCheck(){ /* * 获取用户输入的用户名 * 对用户的输入的用户名进行判断 * 如果是空字符串 * 给用户提示错误信息 * 方法返回false,不让表单提交 * 如果不是空字符串 * 方法返回true,让表单提交的服务器 */ //获取用户输入的用户名 //获取username对象 var usernameELe = document.getElementById("username"); //获取username对象的value值,才是用户在文本框输入的值 //alert(usernameELe);//[object HTMLInputElement] var usernameValue = usernameELe.value; //alert(usernameValue); //对用户的输入的用户名进行判断 if(usernameValue==""){ //如果是空字符串 //给用户提示错误信息 //alert("用户名不能为空!"); //获取td对象 errorMessage var tdEle = document.getElementById("errorMessage"); //给td对象增加一个标签体 可以使用document的属性innerHTML tdEle.innerHTML="用户名不能为空"; //给td标签增加一个样式,红色 tdEle.style.color="red"; //方法返回false,不让表单提交 return false; }else{ //如果不是空字符串 //方法返回true,让表单提交的服务器 return true; } } </script>