JS-基础学习

JavaScript:客户端脚本语言

JavaScript = ECMAScript规范 + js自己特有的东西(BOM/DOM)

js与html结合方式:
内部js: 定义<script>标签,标签体书写js代码
注意:<script>标签定义的位置,会影响执行顺序,需要等待页面加载完毕,才可正常显示;
外部js: 定义<script>标签,通过src属性导入外部js文件
ECMAScript规范

常量语法:

基本数据类型:
Java中:

  1. 整型:byte short int long
  2. 浮点型:float double
  3. 布尔型:boolean
  4. 字符型:char

JS原始数据类型:

  1. number:数字类型,包含整数和小数和 NaN(not a number)
  2. string: 字符串和字符类型 “” ‘’
  3. boolean: true 和 false
  4. null: 空类型。对象的占位符
  5. undefined:未定义,如果一个变量没有初始化值,默认为undefined

变量语法:

  • 使用 var定义变量 var i = “abc”;
  • js是一门弱类型语言:定义变量时,不需要规定其数据类型。
  • typeof运算符:获取变量的数据类型
  • var关键字如果不书写,该变量则为全局变量

语句:if、switch、while、do…while、for

运算符

一元运算符(++ – +(正) -(负))

  • 注意:在js中,如果传递给运算符的值,与运算符想要接受的值的类型不匹配,则会自动类型转换
  • 其他类型转为number
    string:将字符串的字面值,转为number,如果字面值不是数字,则会转为NaN
    boolean: true为1 false 为0

比较运算符

  • > 、<、 >=、 <=;
  • NaN参与的运算,结果都为fasle,除了(!=)
  • 字符串比较小大:如果长度一致按照字典顺序比较 长度不一致 那谁的长度长那就谁大
  • !=:
  • == (比较类型) ===(全等于):
  • 全等于比较时,先比较类型,如果类型不一致,直接返回false

逻辑运算符:&&、 ||、 !

其他类型转boolean

  1. number:非0为true,0和NaN为false,
  2. string: 除了空字符串(""),其他都是true
  3. null 和 undefined:转为false
  4. 对象:所有对象都为true

算术运算符:+ - * / %
注意:NaN 参与数学运算 结果都为NaN
赋值运算符:= 、+= …
三元运算符:表达式 ? 值1 : 值2;

对象:

  • js是一门基于对象的语言
  • 基于对象:不能由原生的对象派生出新的对象。换句话说,不存在继承关系

Function(*****): 代表函数
创建方式:
var fun = new Function(“参数列表”,“方法体”);
function 方法名称(形参列表){
方法体
}
var fun = function(){
}
属性:
length:形参的个数
使用:
函数名称(实参列表);
特点:
1.函数的调用,只与函数名称有关,与实参列表无关
2.函数内部有内置对象 arguments 封装实参数组

void运算符:拦截返回值,一般结合a标签一起使用
注销a标签跳转功能,保留可被点击的功能

<a href="javascript:void(0);" onclick="exit();">退出</a>
JS中的内置对象

一:String 对象
定义方式1: String str=new String(“abckdddd”);
定义方式2:var str=“我爱你爱你”;
1. 属性:length: 字符串的长度
2. 方法:

  1. charAt() 返回在指定位置的字符。
  2. concat() 连接字符串。
  3. indexOf() 根据字符检索此符在字符串中的索引。
  4. lastIndexOf() 从后向前搜索字符串。
  5. substring(a,b) 提取字符串中两个指定的索引号之间的字符, 含头不含尾;
  6. toLowerCase() 把字符串转换为小写。
  7. toUpperCase() 把字符串转换为大写。
  8. replace(a,b) 替换字符串,参1:被替换的字符/或字符串 参数2:替换成哪个字符/或字符串
  9. split() 把字符串分割为字符串数组。
  10. trim():去除字符串两端的空格
<script type="text/javascript">
	  var s="hello";
	  var s2="world!";
	  alert(s.charAt(1));
	  alert(s.concat(" ").concat(s2));
	  alert(s.substring(0,3));
	  alert(s.toLocaleUpperCase());
	</script>

二:Number对象
定义方式:var num=new Number(555.6666); var num1=Number(5694);
方法:

  1. toString() 把数字类型转成字符串类型
  2. toPrecision() 把数字格式化为指定的长度。也就是小数后面保留几位

例子:
var v=Number(3.5999999999999);
var z=v.toPrecision(4);

三:Date 对象
定义方式: var myDate=new Date();
方法:

  1. getTime() 获取从1970-01-01 00:00:00 到当前的毫秒值
  2. toLocaleString() 将时间转化成本地格式 利于阅读

例子
var myDate=new Data();
var time=myDate.getTime();
var localTime=time.toLocaleString();

实例:页面时钟

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span id="span1">
			
		</span>
	</body>
	<script type="text/javascript">
		setInterval(show,1000);
		function show(){
			var a=new Date();
			var b=a.toLocaleString();
			document.getElementById("span1").innerText=a;
		}
		show();
	</script>
</html>

四:Math 对象 特点: 该对象不需要创建 直接对象名点上方法

  1. Math.random();随机产生0----1 之间的随机数 var num=Math.random()*100;
  2. Math.round(2.36); 对小数进行四舍五入 得到一个整数
  3. Math.min(15,25); 取最小值
  4. Math.max(15,25);取最大值
  5. Math. abs(-2) 返回数的绝对值。
  6. Math.floor(2.6);向下取整
  7. Math.ceil(3.82);向下取整

例:随机获取字符串中的字符

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
	  var s="hello";
	  function show(){
		 var a=Math.random()*s.length;
		 b=Math.floor(a);
		 var c=s.charAt(b);
		 alert(c); 
	  }
	  setInterval(show,2000);
	</script>
</html>

五:数组对象:
定义方式: var arr=new Array(2,6,8);
var arr1=[6,“a”,6];
属性: length 数组的长度

特点:
在js中数组可以存储任意类型元素
在js中数组的长度可变

方法:

  1. concat() 连接两个或更多的数组,并返回结果。
    例子:var v=[1,2]; var v2=[3,4];
    var z=v.concat(v2);

  2. join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
    var v=[1,2,3];
    var z=v.join("-"); 给数组元素之间添加分隔符

  3. pop() 删除并返回数组的最后一个元素
    例子:
    var arr = [1, 6, 20];
    alert(arr.pop());

  4. push() 向数组的末尾添加一个或更多元素,并返回新的数组长度。
    例子:var arr = [1, 6, 20];
    alert(arr.push(28));

  5. reverse() 颠倒数组中元素的顺序。

  6. sort() 对数组的元素进行排序 从小到大
    * 默认排序方式:字典顺序
    * 要想实现自己的比较方式,需要传入比较器方法对象

例子:var arr = [1, 6, 20, 100];
alert(arr.sort(bijiao));
function bijiao(a, b) {
if(a > b) {
return 1;
} else if(a == b) {
return 0;
} else {
return -1;
}
}

例:使用join,reverse实现字符串反转

<script type="text/javascript">
			 var a=new Array();
			 var str="abc";
			 for(var i=0;i<=str.length;i++){
				 a[i]=str.charAt(i);
			 }
		a.reverse();
		var s=a.join("");
		alert(s);
		</script>

六 Global:全局方法对象
特点:该对象中的方法调用,不需要对象的引用,可直接使用

  1. isNaN() 检查某个值是否是NaN。
    例子:var v=NaN; var v1=“abc”; var v2=123;
    var b=isNaN(v);
    var b1=isNaN(v1);
    var b2=isNaN(v2);
  2. parseInt() 解析一个字符串并返回一个整数。
    从左向右依次查找,每一位是否是数字,直到遇到不是数字为止。将前边的值转为数字
    比正号强大些 var v=+“123”;
    例子: var v=“152abc”
    var v=“123”;
    var z=parseInt(v)+1;
  3. decodeURI() 解码某个编码的 URI。
  4. encodeURI() 把字符串编码为 URI。
  5. eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行。
    例: eval(“x=10;y=20;document.write(x*y)”)

七 .RegExp(**):正则表达式对象

正则表达式
位置:
^ 开头
$ 结尾
次数:
* 0或多个
+ 1或多个
? 0或1个
{n} 就是n个
{n,} 至少n个
{n,m} 最少n个,最多m个
通配符:
\d 任意数字
\D 任意非数字
\s 任意空白
\S 任意非空白
. 任意字符(除’\n’外)
组合:
[a-z]
[0-9]

组:
(正则) 匹配括号中正则表达式对应的结果,并暂存这个结果。
(?:正则) 匹配括号中正则表达式对应的结果,但不暂存这个结果。
\数字 使用第n个组匹配的结果
使用正则的工具(RegExp类与相关方法)
创建:
// 方式一
var regex = new RegExp(“正则表达式”, “标志”);
// 方式二
var regex = /正则表达式/标志
参数说明:
正则表达式:
参见上面的规则
标志:
g (全文查找出现的所有 pattern)
i (忽略大小写)

方法:
Regexp.test( str )
String.replace( regex, str )

正则表达式对象常用的方法:
test() 使用正则对象去匹配字符串 如果匹配成功返回ture,否则返回false.
exec() 根据正则表达式去查找字符串符合规则的内容。

模式:
g (全文查找出现的所有 pattern)
i (忽略大小写)

var str = "hello123";
var reg = /^[A-Z0-9]+$/i;
alert("匹配吗?"+reg.test(str));	

查找出三个字符组成的单词。

var str  ="da jia hao hao xue xi a";
var reg = /\b[a-z]{3}\b/gi;
var line ="";
while((line = reg.exec(str))!=null){
	document.write(line+"<br/>")
}
DOM:Document Object Model 文档对象模型

概念:将标记语言文档的各个组成部分 封装为对象

组成:

  1. Document:文档对象
  2. Element:元素对象
  3. Attribute:属性对象
  4. Text:文本对象
  5. Comment:注释对象
  6. Node:节点对象
Document:文档对象

获取:window.document

  1. document 中 body属性 可以获取body标签对象
    document.body.bgColor = “red”;
  2. title 属性获取文档标题
    var bt = document.title;
  3. 获取文档最后一次修改时间
    var rq=document.lastModified;
    //URL 属性 获取地址栏中的地址
获取Element对象
  • getElementById():通过id属性值获取唯一的元素
  • getElementsByTagName():通过标签名称获取元素对象数组
  • getElementsByName():通过name属性值获取元素对象数组
  • getElementsByClassName():通过class属性值获取元素对象数组
创建其他对象
  • createElement:创建元素对象
  • createAttribute:创建属性对象
  • createComment:创建注释对象
  • createTextNode:创建文本对象

例子:
var div4 = window.document.createElement(“div”);
var text1 = window.document.createTextNode(“我是第四个div”);
var v = div4.appendChild(text1);
document.getElementsByTagName(“body”)[0].appendChild(div4);
//给属性对象设置值
font1.setAttribute(‘color’,‘yellow’);

appendChild() 像标签中增加子标签
setAttribute() 给标签对象设置属性
如果说js代码来设置css属性,如果属性名称带有横杆,那么去掉横刚,
然后横杆后的第一个字母变大写

Element:元素对象
  • innerHTML属性:获取或设置 元素的 子内容
  • innerTEXT属性:获取标签之间的文本内容
事件

概念:

  • 事件:一件事
  • 事件源:事件发生的组件。
  • 监听器:一个对象。当事件源上发生了事件,就执行对象中的某些方法
  • 注册监听:将监听器绑定到事件源上,监听事件的发生
js中注册监听的方式:
  1. 在定义标签时,添加 事件名称属性。属性值是js代码, js代码会被自动封装到一个function函数的方法体中
例子:<div id="div_id" onclick="fun();">hehe</div>
  1. 通过js获取元素对象,再添加事件。

     		例子:
     		//1.获取元素对象
     		var input = document.getElementById("username");
     		//2.注册监听
     		input.onclick = function(){
     			//alert("hehe");
     		}
    
js中事件的种类:
  1. 焦点事件:
    * onfocus 元素获得焦点。
    * onblur 元素失去焦点

  2. 点击事件:
    * onclick 当用户点击某个对象时调用的事件句柄。
    * ondblclick 当用户双击某个对象时调用的事件句柄。

  3. 键盘事件:
    * onkeydown 某个键盘按键被按下。
    * onkeyup 某个键盘按键被松开。
    * onkeypress 某个键盘按键被按下并松开。

  4. 鼠标事件:
    * onmousedown 鼠标按钮被按下。
    * onmouseup 鼠标按键被松开。
    * onmouseover 鼠标移到某元素之上。
    * onmouseout 鼠标从某元素移开。
    * onmousemove 鼠标被移动。

  5. 表单事件:
    * onsubmit 确认按钮被点击。
    * onreset 重置按钮被点击。

  6. 加载与卸载事件
    * onload 一张页面或一幅图像完成加载。
    * onunload 用户退出页面。 其他浏览器不支持 IE支持

  7. 其他事件:
    针对表单
    * onchange 域的内容被改变。 比如下拉框
    * onselect 文本被选中。

实例:简单的表单认证(表单事件,焦点事件,鼠标事件)

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<center>
			<form action="#" method="get" onsubmit="return checkForm()" >
				<table border="1" cellspacing="0" cellpadding="0" bgcolor="aliceblue">
					<tr>
						<!-- 文本框 -->
						<td width="50%" height="50px">用户名:<input type="text" id="name" value="" name="username" placeholder="请输入6-16位字母" onblur="checkname()"/>
						<span id="uname"></span>
						</td>
						
						<td width="50%" height="50px">&nbsp密码: <input type="password" id="pass" value="" name="password" placeholder="请输入6-16位数字" onblur="checknum()" />
						<button type="button" id="but1" onmousedown="show()" onmouseup="hidd()">显示密码</button>
						  <span id="word"></span>
						</td>
					</tr>
					<tr ">
						<!-- 单选框 -->
						<td colspan="2" height="50px">&nbsp性别:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="radio" onmouseout="checksex()" name="sex"
							 id="boy" value="" /><label for="4"></label>
							&nbsp<input type="radio" onmouseout="checksex()" name="sex" id="girl" value="" /><label for="5"></label>
							<span id="性别"></span>
						</td>
						
					</tr>
					<tr>
						<!-- 时间日期 -->
						<td colspan="2" height="50px">&nbsp出生日期:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="date" name="time"
							 id="" value="" />
						</td>
					</tr>
					<tr>
						<!-- 数字框 -->
						<td colspan="2" height="50px">&nbsp数量:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="number" name="point" min="1" max="10" value="1"/>
						</td>
					</tr>
					<tr onmouseout="checkhob()">
						<!-- 多选框 -->
						<td colspan="2" height="50px">&nbsp爱好:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="checkbox" name="hobby"
							 id="1" value="跑步" /><label for="1">跑步</label>
							<input type="checkbox" name="hobby" id="22" value="足球" /><label for="22">足球</label>
							<input type="checkbox" name="hobby" id="3" value="篮球" /><label for="3">篮球</label>
							<input type="checkbox" name="hobby" id="4" value="游泳" /><label for="4">游泳</label>
							<span id="hob1"></span>
						</td>
					</tr>
					<tr>
						<!-- 下拉框 -->
						<td colspan="2" height="50px">&nbsp学历:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <select  onmouseout="check1()">
								<option value="">---请选择学历---</option>
								<option value="child" name="study">幼儿园</option>
								<option value="z" name="study">中专</option>
								<option value="d" name="study">大专</option>
								<option value="b" name="study">本科</option>
								<option value="y" name="study">研究生</option>
							</select>
                            <span id="stu1"></span>
						</td>
					</tr>
					<tr align="absmiddle">
						<!-- 书写框 段落书写 -->
						<td>&nbsp个人描述:</td>
						<td colspan="2" height="200px">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<textarea id="h1" rows="20" cols="30"  name="book"  style="width: 90%; height: 90%;" placeholder="请输入5个汉字" onblur="checkxiao()"></textarea>
						</td>
					</tr>
					<tr align="center">
						
							<!-- 注册 重置按钮 -->
							<td width="50%" height="50px"><input type="submit" value="注册" /></td>
							<td width="50%" height="50px"><input type="reset" value="重置" /></td>
						
					</tr>
					
				</table>
				<!-- 滚动条 -->
				<input type="range" name="aw" min="1" max="10" value="1" />
			</form>
		</center>
	</body>
	<script type="text/javascript">
		function checkname(){
			var a=document.getElementById("name").value;
			var regx=/^[a-z]{6,16}$/i;
			var flag=regx.test(a);
			if(!flag){
				document.getElementById("uname").innerHTML="<font color='#FF0000'>格式错误</font>"
			}else{
				// document.getElementById("name").style.background="#ADFF2F"
				document.getElementById("uname").innerHTML="<font color='lawngreen'>格式正确</font>"
			}
			return flag;
		}
		function checknum(){
			var a=document.getElementById("pass").value;
			var regx=/^[0-9]{6,16}$/;
			var flag=regx.test(a);
			if(!flag){
				// alert("格式错误,请重新输入,格式为6-16位数字");
				document.getElementById("word").innerHTML="<font color='#FF0000'>格式错误</font>"
			}else{
				// document.getElementById("pass").style.background="#ADFF2F"
				document.getElementById("word").innerHTML="<font color='lawngreen'>格式正确</font>"
			}
			return flag;
		}
		function checksex(){
			var a=document.getElementsByName("sex");
			var flag;
			var j;
			for(var i=0;i<a.length;i++){
				j++;
				if(a[i].checked){
					flag=true;
					document.getElementById("性别").innerHTML="<font color='lawngreen'>已选择</font>";
					// alert(flag);
					break;
				}else{
						flag=false;
						document.getElementById("性别").innerHTML="<font color='red'>未选择</font>";
				}
			}
			return flag;
		}
		function checkhob(){
			var a=document.getElementsByName("hobby");
			var flag;
			var j;
			for(var i=0;i<a.length;i++){
				j++;
				if(a[i].checked){
					flag=true; 	
				}else{
					if(j===a.length){
					   flag=false;	
					}
				}
			}
			if(flag){
				document.getElementById("hob1").innerHTML="<font color='lawngreen'>已选择</font>";
				return true;
			}else{
				document.getElementById("hob1").innerHTML="<font color='red'>未选择</font>";
				return false;
			}
		}
		function checkxiao(){
			var a=document.getElementById("h1").value;
			var reg=/^[\u4E00-\u9FA5]{5}/i;
			var flag=reg.test(a);
			if(!flag){
				// alert("内容不符合要求,只能输入5个汉字;");
			}else{
				document.getElementById("h1").style.color="green";
			}
			return flag;
		}
		function check1(){
			var a=document.getElementsByName("study");
			var flag=false;
			var j;
			for(var i=0;i<a.length;i++){
				j++;
				if(a[i].selected){
					document.getElementById("stu1").innerHTML="<font color='green'>Bingo</font>";
					flag=true;
					break;
				}else{
					document.getElementById("stu1").innerHTML="<font color='red'>未选择</font>";
				}
			}
                  return flag;
		}
		function checkForm(){
		    var a=checkname()
			var b=checknum()
			var c=checksex()
			var d=checkhob()
			var e=checkxiao()
			var f=check1()
			return a&&b&&c&&d&&e&&f;
		}
		function show(){
			document.getElementById("pass").type="text";
		}
		function hidd(){
			document.getElementById("pass").type="password";
		}
	</script>
</html>

实例:点击事件,键盘事件

<html>
   <head>
   	<meta charset="utf-8">
   	<title></title>
   </head>
   <body >
   	<button type="button" id="button1" onclick="show(event)" onkeydown="show1(event)">点我,点我</button>
   </body>
   <script type="text/javascript">
   	var a=document.getElementById("button1");
   	function show(e){
   		var b=e.which;
   		alert("b的值"+b);
   	}
   	function show1(e){
   		var c=e.keyCode;  //获取按下键的ASC码值;
   		alert(c);
   	}
   </script>
</html>
BOM:Browser Object Model 浏览器对象模型

概念:

  • 将浏览器的各个组成部分封装为对象
    特点: BOM对象不能自己创建,当文档加载进内存,浏览器自动创建。
    组成:
  1. Window(*****):窗口对象
  2. Location(**):地址栏对象
  3. History(*):历史记录(当前窗口)对象
  4. Navigator :浏览器对象 基本不用仅作了解
  5. Screen:显示器屏幕 基本不用仅作了解
  6. availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
  7. availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
  8. height 获取屏幕的垂直分辨率。
  9. width 获取屏幕的水平分辨率。
Window:窗口对象

使用方式:

  • window.方法名(); window 可以省略
  • 方法名;

方法:

与弹出有关的方法
  1. alert() 显示带有一段消息和一个确认按钮的警告框。
    例子:window.alert(“我是警告弹框”);

  2. confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
    例子:var flag=window.confirm(“你确定吗?”);

  3. prompt() 显示可提示用户输入的对话框。
    例子:var text=window.prompt(“请输入地址”,"");//参数2:默认文字

与定时器有关的方法
  1. setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。 循环执行
  2. clearInterval() 取消由 setInterval() 设置的 timeout。
  3. setTimeout() 在指定的毫秒数后调用函数或计算表达式。 只执行一次
    * 参数:
    参数1:字符串(js语句)或者 函数对象
    参数2:毫秒值。
  4. clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

例子:
设置定时器 3秒后要执行的函数
var id=window.setTimeout(“window.close()”,3000);
var id1=window.setTimeout(“shut()”,3000);
var id2=window.setTimeout(shut,3000);
funtion shut(){
window.close();
}
取消定时器 通过定时器的id 来取消
window.clearTimeout(id);
window.clearTimeout(id2);

与打开关闭有关的方法:
  1. open():打开新窗口
  • 参数:打开目标的URL
  • 返回值:返回新打开窗口的window引用

例子:var newWindwo=window.open(“http://www.baidu.com”);
newWindwo.close();

  1. close():关闭窗口
  • 谁调用我 , 我关谁

例子:window.close();

属性:
  • 获取其他对象的属性:
    • history :对 History 对象的只读引用。请参数 History 对象。
    • location :用于窗口或框架的 Location 对象。请参阅 Location 对象。
    • Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。
    • Screen 对 Screen 对象的只读引用。请参数 Screen 对象。
    • document:对 Document 对象的只读引用。请参阅 Document 对象。
Location:地址栏对象

获取方式:可以用window对象中的属性获取

		var lc=window.location;
		lc.href="http://www.baidu.com";
  • 属性:
    href:设置或获取当前的URL
    window.Locaiton.reload() 刷新
History:历史记录对象

获取方式:可以用window对象中的属性获取

		var ht=window.history;
		ht.go(1);

方法:

  1. go: 1:前进 -1:后退
  2. back: 相当与go(-1);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值