javascript入门

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中的变量声明都用varkeyword

 变量值的数据类型(原始数据类型和引用数据类型)

>原始数据类型:

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 ;

}

*函数定义。keyword function

*定义參数列表时。不必使用varkeyword。否则报错

*假设没有须要返回的參数。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 对象){

// 循环体

}

*里面的变量代表下标

*使用 inkeyword

*遍历数组(或对象),里面要用数组[下标]

* 比如

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>

 

posted @ 2017-08-14 19:06  yxysuanfa  阅读(131)  评论(0编辑  收藏  举报