Javascript-基础介绍

1 javasscript的介绍

Javascript与java没有关系，它不是编程语言(脚本语言)

2 javascript的作用？

HTML：它是整个网站的骨架。

CSS：它是对整个网站骨架的内容进行美化(修饰)

Javascript：它能够让整个页面具有动态效果。

3 javascript的组成部分

 

ECMAScript:它是javascript的核心(语法、变量、数据类型、语句、函数……)

DOM:document object model 整个文档对象

BOM:浏览器对象

 

4 javascript语法

区分大小写

变量是弱类型的(String str=”aaa” ,var str=”123”;)

每行结尾的分号可有可无(建议大家写上)，注释与java、php等语言相同。

 

5 javascript的变量

变量可以不用声明，变量是弱类型。统一使用var来定义！定义变量的时候不要使用关键字和保留字。

 

6 javascript数据类型

Javascript数据类型分为原始数据类型和引用数据类型

原始数据类型：

string、number、boolean、null、undefined(变量存在，但未赋值)

引用数据类型：

 

7 javascript运算符

其它运算符与java大体一致，需要注意其等性运算符。

== 它在做比较的时候会进行自动转换。

=== 它在做比较的时候不会进行自动转换。

8 javascript语句

所有语句与java大体一致。

 

9 获取元素内容

获取元素：document.getElementById(“id名称”);（如果是一个变量，不需要引号，如果是一个值，那么需要使用引号）

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

10 javascript事件

事件说明基本上所有的HTML元素中都可以指定事件属性。每个元素支持什么样事件应查询文档。
所有的事件属性都是以on开头，后面的是事件的触发方式，如：
onclick，表示单击
onkeydown，表示键按下

常用的事件类型：

鼠标点击相关：
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关：
onmouseout  当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。

焦点相关的：
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。

其他：
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。

onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
onclick/ondblclick:鼠标单击和双击事件。
onkeydown/onkeypress：搜索引擎使用较多。
onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。
               如果是有名称，那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove：购物网站商品详情页。
onsubmit：表单提交事件 ，有返回值，控制表单是否提交。
onchange:当用户改变内容的时候使用这个事件(二级联动)。

举例：JS完成全选和选不选操作

HTML代码：

复选框前面的：

<th><input type="checkbox" οnclick="checkAll()" id="checkAll"/></th>

下面所有的复选框

<td><input type="checkbox" name="checkOne"/></td>

JS代码：

<script>
	function checkAll(){
		//1.获取编号前面的复选框
		var checkAllEle = document.getElementById("checkAll");
		//2.对编号前面复选框的状态进行判断
		if(checkAllEle.checked==true){
			//3.获取下面所有的复选框
			var checkOnes = document.getElementsByName("checkOne");
			//4.对获取的所有复选框进行遍历
			for(var i=0;i<checkOnes.length;i++){
				//5.拿到每一个复选框，并将其状态置为选中
				checkOnes[i].checked=true;
			}
		}else{
			//6.获取下面所有的复选框
			var checkOnes = document.getElementsByName("checkOne");
			//7.对获取的所有复选框进行遍历
			for(var i=0;i<checkOnes.length;i++){
				//8.拿到每一个复选框，并将其状态置为未选中
				checkOnes[i].checked=false;
			}
		}
	}
</script>

JS完成注册页面表单校验

使用事件(聚焦事件onfocus和离焦事件onblur),之前使用onsubmit也需要！

使用<span></span>

向页面指定位置写入内容：innerHTML属性(该属性的值存在覆盖现象)

Html部分代码：

<input type="text" name="user" id="user" οnfοcus="showTips('user','用户名必须以字母开头！')" οnblur="check('user','用户名不能为空！')"/>
<span id="userspan"></span>

JS代码：

<sctript>
	function showTips(id,info){
		//获取span元素，给出提示信息
		document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
	}
	function check(id,info){
		//获取用户输入的数据
		var uValue = document.getElementById(id).value;
		//进行判断
		if(uValue==""){
			//在span位置给出错误提示信息
			document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
		}else{
			document.getElementById(id+"span").innerHTML="";
		}
	}
</script>

 

11 javascripte的输出

警告框：alert();

向页面指定位置写入内容：innerHTML(属性)

向页面写入内容：document.write(“”);

12 javascript的引入方式

内部引入方式

直接将javascript代码写到<script type=”text/javascript”></script>

外部引入方式

需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script标签的src属性引入该外部的js文件。

举例：使用JS完成注册表单数据校验

Html部分代码：

为表单绑定一个事件

<form action="#" method="get" οnsubmit="return checkForm()">

对需要校验的输入项目定义id

<input type="text" name="user" id="user" />

JS代码：

<script type="text/javascript">
	function checkForm(){
		/*校验用户名*/
		//alert("aa");
		//获取用户输入的数据
		var uValue =  document.getElementById("user").value;
		//alert(uValue);
		if(uValue==""){
			//给出错误提示信息
			alert("用户名不能为空！");
			return flase;
		}
		
		/*校验邮箱*/
		var Evalue = document.getElementById("email").value;
		if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(Evalue)){
			//给出错误提示信息
			alert("邮箱格式不正确！");
			return false;
		}
	}
</script>

javascript内置对象

Array对象

数组的创建：

 

数组的特点：长度可变！数组的长度=最大角标+1

Boolean对象

对象创建：

 

如果value 不写，那么默认创建的结果为false

Date对象

getTime()

返回 1970 年 1 月 1 日至今的毫秒数。

解决浏览器缓存问题

 Math和number对象

与java里面的基本一致。

String对象

match()	找到一个或多个正则表达式的匹配。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。

例子：

<script>
	var str = "-a-b-c-d-e-f-";
	var str1 = str.substr(2,4);//-b-c
	//alert(str1);
	
	var str2 = str.substring(2,4);//-b
	alert(str2);
</script>

RegExp对象

正则表达式对象

test	检索字符串中指定的值。返回 true 或 false。

全局函数

全局属性和函数可用于所有内建的 JavaScript 对象

关于编码和解码的一组方法：

<script>
	var str = "张三";
	//alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
	//alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89
	
	//alert(decodeURI(encodeURI(str)));//张三
	//alert(decodeURIComponent(encodeURIComponent(str)));//张三
	
	var str1 = "http://www.itheima.cn";
	//alert(encodeURI(str1));//http://www.itheima.cn
	//alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn
	
	//alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn
	//alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn
	
	var str2 = "alert('abc')";
	//alert(str2);
	eval(str2);
	
</script>