软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> javascript入门 -> 正文阅读
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解

[Web前端]javascript入门

  2016-04-03 20:42:47

JavaScript

一、 JavaScript概述

1、 JavaScript是什么,有什么作用?(了解)


*JavaScript是因特网上最流行的脚本语言
*脚本语言不能单独使用,必须嵌入到其他语言中组合使用
*JavaScript不能单独使用,必须和其他语言(HTML)结合使用
*浏览器解释执行
 
*作用是:可以控制前端页面的逻辑操作
 例如:JS可以控制CSS的样式;(一般)
JS可以对表单项进行校验(重点)
JS可以对HTML元素进行动态控制(使用较多)
 
*特点: 
  安全性(没有访问系统文件权限,无法用来做木马病毒)
  跨平台性(浏览器有JS的解析器,只要有浏览器就能运行JS代码,和平台无关)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		var sum=0;// int sum=0;
		for(var i=1;i<=9;i++){// int i=1;
			sum+=i;
			alert(sum); //System.out.print(sum);
		}
		
	</script>
  </head>
  	
  <body>
    	
    	
  </body>
</html>

2、 JavaScriptJava的关系(了解)


ECMAScript
*JavaScriptJava一点关系都没有(雷锋和雷峰塔)
*JavaScriptJava的区别:
>JavaScript代码可以直接在浏览器执行,而Java必须先经过编译才能执行
>JavaScript是弱类型语言,Java是强类型语言
强类型语言:要求变量的使用严格符合定义。(例如:变量声明后都有一个固定的区域,int区域大小是32位)。编程时痛苦,调BUG时舒服
弱类型语言:不要求变量的使用严格符合定义。(例如:变量声明后没有一个固定的区域,任何类型的值都能放在该区域)。编程时舒服,调BUG时痛苦
 

<html>
  <head>
<script>
  var sum = 0;
  for(var i = 1; i <= 100; i++) {
      sum += i;
}
alert(sum);
</script>
  </head>
  <body>
  </body>
</html>

 

二、JavaScript语法及使用(重点)

注释


*单行注释
//
Myeclipse快捷键 ctrl+shift+c
*多行注释
/* */
Myeclipse快捷键 ctrl+shift+/

变量


*标示内存中的一块空间,用于存储数据,数据是可变的
 
*格式:
 var 变量名 = 变量值;
 
 JavaScript中的变量声明都用var关键字
 变量值的数据类型(原始数据类型和引用数据类型)
>原始数据类型:
string 字符串类型
“”’’都表示字符串
 
boolean 布尔类型
 true,false
 
number 数字类型
整数和小数
null 空,表示引用类型的对象不存在
 
undefined 未定义
变量声明未赋值时使用/对象的属性未赋值时使用
注:变量就像一个盘子,什么都能盛装。
变量的类型可以用typeof()来判断。例如:var str=”aa”;alert(typeof(str));//string
变量的大小写是敏感的,yyYY不是一个变量。
为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		/* 
			var 变量名=变量值;
		
			原始数据类型:
			string	字符串
					""  ''都表示字符串
					
			boolean	布尔类型
					true , false
					
			number	数字
					整数和小数
			
			null	空,对象为空(引用为空)
			
			undefined	未定义  变量没有赋值就使用/使用 对象.属性 的时候,属性没有赋值就使用
			
			//变量就是一个盘子,装什么东西都可以
			
			引用数据类型:
			typeof()  帮咱们判断变量是什么类型的
			
			变量名命名是大小写敏感的(区分大小写)
		*/
		/* var str = "aa";
		var str2 = 'aa';
		var str3 = true;//false
		var str4 = 15;
		var str5 = 15.55;
		var date = null;
		var aa;
		str =15;
		str = true;
		str = "aa";
		
		alert(str);//aa 15 */
		
		/* var str = "aa";
		str =15;//number
		//str = true;//boolean
		var ss;
		var obj= null;
		alert(typeof(obj)); */
		
		/* var sf="aa";
		alert(Sf); */
		
		/* 
			引用数据类型
			
			常用对象:
			String,Array,Date,Math,RegExp
			
			Object 所有对象的父对象
			
			
		*/
		var date = new Date();
		alert(date instanceof Object);
	</script>
  </head>
  	
  <body>
    	
    	
  </body>
</html>

 
>引用数据类型(了解)
即对象
例如:var obj = new Object();
 
常用对象:
String,Array,Date,Math,RegExp
 
注:instanceof可以用来判断对象是否属于某类型。返回truefalse .例如:
Var str = new String();
Alert(str instanceof String);//true
 
 
*两种变量
>全局变量
就是在<script>标签中定义的变量,在整个页面都有效
>局部变量
就是在函数体内定义的变量
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		/* 
			全局变量
			就是在script标签中的变量,对整个页面都有效
		
			局部变量
			就是在函数体中定义的变量
		*/
		/* var str =10;
		
		for(var i=1;i<=3;i++){
			
		}
		alert(i);//4 */
		
		/* function aa(){
			var a=5;
			alert(a);
		} */
		var x = 4;
		function show(x){
		x = 8;
		}
		show(x);
		alert("x = "+x);
		/* A.8   
		B.4   
		C.undefined */

	</script>
  </head>
  	
  <body>
    	
    	
  </body>
</html>

 

练习:如下代码显示X值是多少?
var x = 4;
function show(x){
x = 8;
}
show(x);
alert("x = "+x);
 

A.8   
B.4   
C.undefined

 

函数(方法)


*用于代码封装,提高复用性
 
*格式 function 函数名(参数列表){
函数体;
return ;
}
*函数定义,关键字 function
*定义参数列表时,不必使用var关键字,否则报错
*如果没有需要返回的参数,return可以不写
*函数需要调用才能执行,和Java一样
*JavaScript不存在重载形式
>每个JavaScript,都存在一个数组arguments,用于存储参数列表

思考:如下调用方法会打印输出什么效果?
function getSum(){
return 100;
}
var sum = getSum;
alert(sum);
 

A. 100
B. undefined
C. function getSum(){return 100;}

 
*如果调用方法时忘记加(),那么会把函数对象的引用传给变量
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>函数.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
		//用来做加法的方法  a b  a+b
		
		/* public int sum(int a,int b){
			return a+b;
			
		} */
		//JavaScript不定义返回值的类型
		//javascript 方法不存在重载
			//因为在JavaScript方法中存在arguments隐藏对象(数组),就是用来获取传进来的参数列表的
		//JavaScript中如果调用方法不加括号,那么会把方法(对象)的引用传出来
		/* function sum(a,b){
			alert(arguments.length);
			alert(arguments[0]);
			alert(arguments[1]);
			alert(arguments[2]);
// 			alert(a);
// 			alert(b);
		}
		sum(5,6,7); */
		function getSum(){
			return 100;
		}
			var sum = getSum;
			alert(sum);

	</script>
  </head>
  	
  <body>
    
  </body>
</html>

 
*两种扩展函数:
>动态函数(了解会用)
通过JS的内置对象Function来动态创建
格式: new Function(参数一,参数二);
参数一是函数形参列表
参数二是函数体
 
>匿名函数(较常用)
没有名称的函数,函数的简化形式
格式:var str = function(参数列表){
函数体;
return;
};
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		/* 
			动态函数(使用比较少)
				Function 对象
			匿名函数
		
		*/
		/* var par = "a,b,c";
		var par2 = "return a+b+c";
		var str =new Function(par,par2);
		alert(str(1,2,3)); */
		
		var str=function(a,b){
			return a+b;
		};
		alert(str(1,2));
	</script>
  </head>
  	
  <body>
    	
    	
  </body>
</html>

 
   

运算符


算术运算符(常用)
+号除了运算外,可以作为连接符
-号除了运算外,可以作为转换符
 
alert(true + 1); // 2
比较运算符(常用)
== 比较值
=== 又比较值和类型语句(流程控制语句)
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		/* 
			算术运算符
			+	连接符
			-	转换符
			
				NaN意思是不是数字
			比较运算符
			==	只是比较值,即使类型不同也没关系
			===	不仅比较值,也同时比较类型
			
		*/
		/* var str=15;
		var str2="1";
		alert(str+str2);//151 */
		/* var str =15;
		var str2 = "1";
		alert(str-str2);//14 151 */ 
		/* var str= 15;
		var str2="a";
		alert(str-str2);//NaN */
		/* var str=8;
		//alert(str==8);//true
		//alert(str=="8");//true
		alert(str===8);//true
		alert(str==="8");//false */
		/* var str = (8==8)?8:0;
		alert(str); */
		
	</script>
  </head>
  	
  <body>
    	
    	
  </body>
</html>

流程控制语句


对程序运行流程控制的表达式
n 判断语句
IF
if(8 == num){
赋值的问题,需要注意。
}else{
}
0-0null""falseundefined NaN,为false
否则为true 
和Java中一样。
switch(n)
   {
   case 1:
     执行代码块 1
     break
   case 2:
     执行代码块 2
     break
   default:
     如果n即不是1也不是2,则执行此代码
   }

练习:以下代码输出结果为:
var a=15;
if(a=15){
 alert(15);
}else{
 alert(“else”);
}

A. 15
B. Else

 
n 循环语句
 
For循环(较常用)
for(var i=0;i<=8;i++){
// 循环体
}
增强FOR循环(不灵活,使用少,但开发中会有使用)(了解会用,工作中自己进行尝试即可)
for(变量 in 对象){
// 循环体
}
*里面的变量代表下标
*使用 in关键字
*遍历数组(或对象),里面要用数组[下标]
* 例如
Var s= new Array();
s[0]=1;
s[1]=2;
for(x in s){
alert(s[x]);
}
 while(表达式){
// 循环体
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		/* 
			判断语句
			IF
			0、-0、null、""、false、undefined 或 NaN,为false
			否则为true 
			
			FOR循环	var 
					99乘法表
			while do while
				
			增强for
		*/
		/* function str(){
			return null;
		}
		var x=8;
		var aaaa=str();
		if(aaaa){
			alert(1);//1
		}else{
			alert("else");
		} */
		/* for(var i=0;i<3;i++){
			
		} */
		/* if(-0){
			alert(1);
		}else{
			alert("eeee");
		} */
		
		var i=new Array();
		i[0]=1;
		i[1]=2;
		for(x in i){
			alert(i[x]);
		}
	</script>
  </head>
  	
  <body>
    	
    	
  </body>
</html>

对象


l String对象(了解会用)
* var str = "abc";
* var str = new String("abc");
* 属性:length 字符串的长度
* 方法
* javaString对象类似的方法(基本相同,需要练习)
* charAt(index) 返回指定位置的字符(常用)
* indexOf(searchvalue,fromindex) 检索字符串
* lastIndexOf() 从后向前的
* replace() 替换字符串(较常用)
* substring(start,stop) 从哪开始,到哪结合(包含开始不包含结束)
* substr(start,length) 从哪开始,截取长度
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		/* 
			String对象
			
			var s = new String("aaa");
			var s = "aaa";
			
			document.write();//会把值输出到浏览器页面上
		*/
		/* var str ="abc";
		var str2 ="你好么";
		document.write(str2.blink());
		document.write(str2);
		document.write(str.charAt(1)); */
		var str = "ABC";
		document.write(str.toLowerCase());
		
	</script>
  </head>
  	
  <body>
    	
    	
  </body>
</html>

Array对象(重要)
* js的数组
* var arr = [1,2,3];
*var arr = new Array();数组长度默认为0
* var arr = new Array(4); 数组长度是4
* var arr = new Array(1,2); 数组元素是1,2
* 数组的长度
* length
* 数组的长度是可变的
* 数组元素可以是任意类型(注意)
* 方法
* concat() 链接数组或者元素都可以(较少)
* join(separator) 转化成字符串
* push() 向末尾添加一个元素,返回新的长度
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		/* 
			Array对象
			var str = [1,2,3]; 长度是3,长度可变
			var str = new Array();长度默认是0,长度可变
			var str = new Array(5);长度默认是5,长度可变
			var str = new Array(1,2);长度是2,长度可变
			
			join(分隔符)  默认是 
			push   就是把元素添加进数组末尾
		*/
		/* var str=[1,2,3];
		var str2=[4,5,6];
		alert(str.concat(str2)); */
		
		/* var str2=[1,2,3];
		var str=str2.join();
		alert(str); */
		var str2=[1,2,3];
		var str=5;
		str2.push(str);
		alert(str2);//
		
		
	</script>
  </head>
  	
  <body>
    	
    	
  </body>
</html>

Date对象(比较常用)
* var date = new Date(); 当前的时间
* toLocaleString() 根据本地的日期格式转化成字符串(了解)
* getDate() 返回一个月中的某一天(了解)
* getMonth() 获取月份(0-11)(了解)
* getFullYear() 获取年(了解)
* getTime() 获取毫秒数(比较重要)
* setTime() 通过毫秒数设置日期(比较重要)
同时也可以通过构造器设置  new Date(毫秒数);
* Date.parse(datestring) 解析字符串,返回毫秒数(重要的)
* 2015-4-29 解析不了
* 2015/4/29 是可以解析的
l Math对象(了解)
round(x) 四舍五入
random() 随机生成0~1数字
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		/* 
			Date对象
			var aa = new Date();
		*/
		var aa = new Date();
// 		alert(aa.toLocaleDateString());
		/* alert(aa.getDate());
		alert(aa.getMonth());
		alert(aa.getFullYear()); */
		/* var long1 = aa.getTime();
		var long2=long1-(1000*60*60*24);
		
		aa.setTime(long2);
		alert(aa.toLocaleString()); */
		
		var bb = Date.parse("2015/5/21");
		//aa.setTime(bb);
		var cc = new Date(bb)
		alert(cc.toLocaleString());
	</script>
  </head>
  	
  <body>
    	
    	
  </body>
</html>

RegExp对象(重要)
*正则对象     正确的规则
* var reg = new RegExp("表达式"); (开发中基本不用)
* var reg = /^表达式$/ 直接量(开发中常用)
直接量中存在边界,即^代表开始,$代表结束
* test(string) (经常使用)符合规则返回true,不符合返回false
例如:
if(reg.test("12345")){
//
}else{
//
}
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		/* 
			RegExp对象
			var s = new RegExp("表达式");
			var s = /^表达式$/;
			
			test()
		*/
		var reg = /^\s*$/;//验证空
		var checkText = "";
		alert(reg.test(checkText));
		
	</script>
  </head>
  	
  <body>
    	
    	
  </body>
</html>


练习:判断字符串是否为空
var msg=””;
var reg = /^\s*$/;
alert(reg.test(msg));

 
 
l 全局函数
Global
浏览器内存中游离的函数,直接拿过来用。
eval() 可以解析字符串,执行里面的javascript的代码(学习JSON)(最常用)
isNaN() 是否 不是 数字  (常用)
encodeURI() 编码
decodeURI() 解码
(不用看)escape不编码字符有69个:*+-./@_0-9a-zA-Z
(了解)encodeURI不编码字符有82个:!#$&'()*+,-./:;=?@_~0-9a-zA-Z
(了解)encodeURIComponent不编码字符有71个:!'()*-._~0-9a-zA-Z
 

三、JavaScriptHTML的结合方式(了解)


 
l 两种使用方式
>内部使用
*<script type=”text/javascript”>JavaScript的代码</script>
>外部引用
*<script type=”text/javascript” src=”javascript文件路径”></script>
*外部引用时script标签内不能有script代码,即使写了也不会执行
 
注意:<script>标签写在任意地方都可以,但是要注意HTMLJAVASCRIPT的加载顺序
<body onload=””> 在网页加载完毕后 做什么事
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript" >
		function aa(){
			alert(document.getElementById("a").innerHTML);//打印 你好啊
			alert("1");
			alert("2");
		}
		
		
	</script>
  </head>
  	
  <body onload="aa();">
    	<span id="a">你好啊</span>
    	
  </body>
</html>

 

四、JavaScript的组成(了解)

JavaScript的组成


*ECMAScript (核心)
*DOM 文档对象类型
*BOM 浏览器对象类型
 
 
 
 
 
 
 
 
 
 
 

练习:


1、99乘法表
22015-01-012015-09-01有多少天
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

1、答案
<script type="text/javascript">
   for(var i=1;i<=9;i++){
   for(var j=1;j<=i;j++){
   document.write(j+"*"+i+"="+j*i+"\t");
   }
   document.write("<br/>");
   }
  </script>

 

2答案:245
<script type="text/javascript">
   var dlong1=Date.parse("2015/01/01");
   var dlong2=Date.parse("2015/09/03");
   alert((dlong2-dlong1)/1000/60/60/24);
  </script>

 
上一篇文章      下一篇文章      查看所有文章
2016-04-03 20:42:32  
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图 中国文化英文 多播视频 装修知识库
2017-1-23 14:35:35
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --