欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

javascript小节

程序员文章站 2022-03-01 20:52:27
...



javascript 语法总结

知识概要:

(1)Javascript概述

1.1javascript是什么?

1.2JavaScript语言组成

1.3JavaScript与Html的结合方式

(2)JavaScript基本语法

(3)JavaScript常用对象介绍

(4)JavaScript 函数的定义

1.1javascript是什么?

1.基于对象和事件驱动的脚本语言 (它要求放在浏览器中去解析)
2.无需编译,可由浏览器直接解释运行
3.JavaScript 是一种弱类型语言

 交互性(它可以做的就是信息的动态交互)
 安全性(不允许直接访问本地硬盘)
 跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)

1.2JavaScript语言组成

JavaScript语言组成
 ECMAScript核心语法

 BOM
 DOM

1.3JavaScript与Html的结合方式

1.直接在事件中写
   οnclick="javascript:alert('Hello World')"


 2. 通过<script>标签写
  <script type="text/javascript">
   //alert("Hello World");弹框
   document.write("<h1>Hello World!</h1>");//在网页上输出//System.out.println("");
  </script>
  
  1.<script>可以写在网页的地方
  2.一般写在<head>部分
  3.除非咱们要网页的body部分打印输出时,才把它放在body部分
  3.引入外部js文件
  <script type="text/javascript" src="demo3.js" >
  
  </script>
  注意:
   通过这种方式引入外部js文件,在内部所写的js代码是不会执行的。

(2)JavaScript基本语法

1.变量
2.数据类型
   Undefined、Null、Boolean、Number 和 String 
 1.Undefined
 1.变量定义了,但是没有赋值
 2.通过typeof()测试,结果也是undefined
 2.Null
 1.通过alert()直接输出,得到一个null结果
 2.通过typeof()测试,它的结果是一个Object
 3.Boolean
 看赋值为true/false
 非0都为真
 0都为假
 4.Number
 不区分整数与小数都认为是number
 5.String
 用“”引号引上的
 未定义 直接拿变量用,这样使用是语法错
 var s="1"//定义了一个基本类型的字符串
 var s = new String("1");//定义了一个String对象
 基本类型为什么能调方法?
 s.toString();//说明了javascript是弱数据类型,它底层已经做了转化
 6.运算符
 ==值相等  ===类型和值都要相等

 7.控制语句
 if/else/else if
 switch (字符串)
 三元运算符  条件?值1:值2;   (条件)null,false,0,'',undefined,NaN为假,其它都为真

 for/while/do.while

(3)JavaScript常用对象介绍

 Array对象 数组对象,进行数组操作

 String对象 ----- 字符串类型的引用类型
 var s = new String("itcast");
 Number对象 ---- 数字原始类型引用类型
 var n = new Number(100);
 Boolean对象 ---- 布尔原始类型引用类型
 var b = new Boolean(true);
 Math对象 执行数学任务
 Date对象 用于处理日期和时间
 RegExp 对象正则表达式对象

(4)javascript 函数对象

1.第一种方式
 function函数名(){

 }
2.第二种方式
 /*var show = function (){
  alert("Hello");
 }*/
 //alert(show);//当成变量看,输出function
 //show();//调用 变量名()

3.第三种方式 参数:前面都是参数,函数体是最后一个参数
 var show = new Function("a","b","return a+b");


 function show(a,b){
  return a+b;
 }


4.全局函数
 //parseInt();
转整数
 //parseFloat();//转小数


 //eval() eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。

 //escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。
 //unescape() 函数可对通过 escape() 编码的字符串进行解码。

 //isNaN()//判断是否为数字 为数字返回false 不为数字返回true

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> js概述 </title>
  <!--
	js是什么?
		javascript代码,它是一门脚本语言,可以写业务逻辑,
		基于对象的语言,基于事件驱动的语言,是弱数据类型语言
		由浏览器直接解释运行
	
	三种结合方式:
		1.事件名="js代码",javascript:var a=1;alert(a);
		2.通过<script></script>标签引入
		3.外部js文件
		   <script type="text/javascript" src="js文件"/>
  -->
  <script type="text/javascript">
	//1.定义一个变量a
	var a =1;
	document.write("变量a="+a);//在网页上输出的

  </script>

  <script type="text/javascript" src="01.js"></script>
 </head>

 <body>
	<input type="button" value="javascript:var a=1;alert(a);" οnclick="alert('我帅吗?')"/>
	<a href="javascript:var a=1;alert(a);">百度</a>
 </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>数组对象</title>
  <!--language="javascript"  -->
  <script >
	 //定义一个数组
	 var a = new Array();
	 var scores = new Array(5);//5代表长度
	 var scroesjava = new Array(5,6);//代表有元素5,6
	 var scoresandroid = [90,"54",80,70,30,60,"cgx","aj"];//定义一个数组,元素是90,100

	 //添加元素
	 //alert(scores.length);//5
	 //alert(a.length);//0



	 scores[100] = "cgx";
	// alert(scores[100]);
	//scores[101] = new Date();
	
	//alert(scores[99]);

	scoresandroid.sort();//排序
	
	//alert(scoresandroid.join("~~~~~~~~~~~~~~~~"));//用指定的分隔符进行连接
	//var t = scoresandroid.pop();//最后一个位置删除
	//alert(t);

	//var x = scoresandroid.shift();
	//alert(x);
	scoresandroid.unshift("shit");
	//alert(scoresandroid.join("~~~~~~~~~~~~~~~~"));

	for(var i=0;i<scoresandroid.length;i++){
		if(i!=scoresandroid.length-1)
		   document.write(scoresandroid[i]+",");
		else
			document.write(scoresandroid[i]);
	}



  </script>
 </head>

 <body>
  
 </body>
</html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> RegExp对象</title>
  <script>
	/*function validation(obj){
		//1.得到文本框的值
		//var name =   document.getElementById("username").value;
		var name = obj.value;
		//2.定义一个正则表达式
		var regexp = new RegExp("[a-zA-Z]{6,10}");
		//3.匹配
		var bvalue = regexp.test(name);
		//4.判断
		if(bvalue){
			alert("用户名格式正确");
		}else{
			alert("用户名格式错误,只能6-10位字母组成");
		}
	}*/

	//调用函数规则一般:事件名="函数名()"
	//onclick:点击
	//onblur:失去焦点  οnblur="validation(this)" this代表当前的标签
	//onfocus:得到焦点

	//即时的消息提示  
	function validationsw(obj){
		//1.得到文本框的值
		 //var name =   document.getElementById("username").value;
		 var name = obj.value;
		//2.定义一个正则表达式
		var regexp = new RegExp("^[a-zA-Z]{6,10}$");
		//3.匹配
		var bvalue = regexp.test(name);
		//根据id找到div
		var errorsw = document.getElementById("errorMsg");
		//4.判断  
		//innerHTML代表的是<div></div>中间的文本,而且能识别html标签
		//innerText:代表的是<div></div>中间的文本,但不能识能html标签
		if(bvalue){
			errorsw.innerHTML="<font color='red'>用户名格式正确</font>";
			
		}else{
			errorsw.innerHTML="<font color='red'>用户名格式错误,只能6-10位字母组成</font>";
		}
	}

	function clearText(objhsw){
		var hswvalue = objhsw.value;
		if(hswvalue == "只能6-10位字母组成"){
			objhsw.value="";
		}
	}
	function changeChar(obj){
		var source = obj.value;
		if(source!="只能是6-10位的字母组成"){
			var regExp = new RegExp("^[a-zA-Z]{6,10}$");
			flag = regExp.test(source);
		}
		
		var errorsw = document.getElementById("errorMsg2");

		if(!flag){
			errorsw.innerHTML = "<font color='red'>只能是6-10位的字母组成</font>";
		}else{
			errorsw.innerHTML = "<font color='green'>ok</font>";
		}
	}


  </script>
 </head>

 <body>
	
	<input type="text" value="只能6-10位字母组成" id="username" name="username" οnfοcus="clearText(this)" οnblur="validationsw(this)" />
	<div id="errorMsg" style="display:inline;"></div>

	<hr size="3cm" color="blue"/>

	<input id="source" type="text" value="只能是6-10位的字母组成" size="30" οnchange="changeChar(this)" />
	<div id="errorMsg2" style="display:inline;"></div>

 </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>全局函数</title>
	<script>
	 /*
		如何根据name属性去得到一个标签?
		document.getElementsByName("name属性的值");
	 */
		var a = 3.9415926;
		//alert(parseInt(a));
		
		function calc(op){
			//1.得到前两个框的值
			var objNo1Val  =parseFloat( document.getElementsByName("no1")[0].value);
			var objNo2Val  =parseFloat( document.getElementsByName("no2")[0].value);
			
			//2.得到操作符,参数中给了
				
			//3.进行计算
			var result ;
			switch(op){
				case "add":
					result=objNo1Val+objNo2Val;
				break;
				case "sub":
					result=objNo1Val-objNo2Val;
				break;
				case "multi":
					result=objNo1Val*objNo2Val;
				break;
				case "divide":
					result=objNo1Val/objNo2Val;
				break;
				default:
					result="对不起,你有病!";
			}
			//4.显示结果
			document.getElementsByName("result")[0].value=result;
		}
		

	</script>
 </head>

 <body>
	第一个数:<input type="text" name="no1"/><br/>
	第二个数:<input type="text" name="no2" /><br/>
	结果:<input name="result"/><br/>
	<input type="button" οnclick="calc('add')" value="    +    "/>
	<input type="button" οnclick="calc('sub')" value="    -    "/>
	<input type="button" οnclick="calc('multi')" value="    *    "/>
	<input type="button" οnclick="calc('divide')" value="    /    "/>
 </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <script>
			//escape编码
			var str ="http://www.itheima.com?keyword=老王玉照";
			var str1 = encodeURI(str);
			alert(str1);
			var str2 = decodeURI(str1);
			alert(str2);

			//----------eval-------------
			var result = eval("123+234");
			alert(result);
  </script>
 </head>

 <body>
  
 </body>
</html>