JavaScript相关知识以及帮助文档

什么是JavaScript

JavaScript是运行在浏览器上的脚本语言。简称JS。
JavaScript是网景公司(NetScape)的 布兰登艾奇(JavaScript之父)开发的,最初叫做LiveScript。
LiveScript的出现让浏览器更加的生动了,不再是单纯的静态页面了。页面更具有交互性。
在历史的某个阶段,SUN公司和网景公司他们之间有合作关系,SUN公司把LiveScript的名字修改为JavaScript。
JavaScript这个名字中虽然带有“Java”但是和Java没有任何关系,只是语法上优点类似。他们运行的位置不同,
Java运行在JVM当中,JavaScript运行在浏览器的内存当中。

JavaScript程序不需要我们程序员手动编译,编写完源代码之后,浏览器直接打开解释执行。
JavaScript的“目标程序”以普通文本形式保存,这种语言都叫做“脚本语言”。

Java的目标程序以.class形式存在,不能使用文本编辑器打开,不是脚本语言。

网景公司1998年被美国在线收购。

网景公司最著名的就是领航者浏览器:Navigator浏览器。

LiveScript的出现,最初的时候是为Navigator浏览器量身定制一门语言,不支持其他浏览器。

当Navigator浏览器使用非常广泛的时候,微软害怕了,于是微软在最短的时间内组建了一个团队,
开始研发只支持IE浏览器的脚本语言,叫做JScript。

JavaScript和JScript并存的年代,程序员是很痛苦的,因为程序员要写两套程序。
在这种情况下,有一个非营利性组织站出来了,叫做ECMA组织(欧洲计算机协会)
ECMA根据JavaScript制定了ECMA-262号标准,叫做ECMA-Script。

现代的javascript和jscript都实现了ECMA-Script规范。(javascript和jscript统一了。)

JSP和JS有啥区别?
	JSP : JavaServer Pages(隶属于Java语言的,运行在JVM当中)
	JS : JavaScript(运行在浏览器上。)

HTML中如何引入JavaScript

HTML中嵌入JavaScript代码的第一种方式

	<!--
		1、要实现以下功能:
			用户单击以下按钮,弹出消息框。

		2、JS是一门事件驱动型编程语言,依靠事件去驱动,然后执行对应的程序。
		在JS中有很多事件,其中有一个事件叫做:鼠标单击,单词click。并且任何
		事件都会对应一个事件句柄叫做:onclick。【注意:事件和事件句柄的区别是:
		事件句柄是在事件单词前面加一个on】,而事件句柄是以HTML标签的属性存才
		的。
		
		3、onclick="js代码"执行原理是什么?
				页面打开的时候,js代码并不会执行,只是把这段JS代码注册到了按钮的click事件上了。
				等这个按钮发生click事件之后,注册在onclick后面的js代码会被浏览器自动调用。

		4、怎么使用JS代码弹出消息框?
				在JS中有一个内置的对象叫window,全部小写,可以直接拿来使用,window代表的是浏览器对象。
				window对象有一个函数叫做alert,用法是window.alert("消息");这样就可以弹窗了。
		
		5、JS中的字符串可以使用双引号,也可以使用单引号。

		6、JS中的一条语句结束之后可以使用分号";"也可以不使用。
	-->
<input type="button" value="hello"  onclick="window.alert('hello js')" style="cursor: pointer;"/>

		<input type="button" value="hello"  onclick='window.alert("hello jscode")'/>

		<input type="button" value="hello"  onclick="window.alert('hello zhangsan')
																				 window.alert('hello lisi')
																				 window.alert('hello wangwu')"/>

		<input type="button" value="hello"  onclick="alert('hello zhangsan')
																				 alert('hello lisi')
																				 alert('hello wangwu')"/>

HTML中嵌入JavaScript代码的第二种方式

<script>
			window.alert("head..........");
		</script>
	</head>
	<body>
		<input type="button" value="按钮1" />
		<!--第二种方式:脚本块的方式-->
		<script type="text/javascript"> 
			/*
				暴露在脚本块中的程序,在页面打开的时候执行,
				并且遵循自上而下的顺序依次执行。
			*/
			window.alert("Hello World!!")//alert会阻塞整个HTML页面的加载

			window.alert("Hello JavaScript!!!");
		</script>
		<input type="button" value="按钮2" />
	</body>
</html>
<script>

HTML中嵌入JavaScript代码的第三种方式:引入外部独立的JS文件

js代码

window.alert("Hello Word!!!");
window.alert("js over");

html代码

		<!--在需要的位置引入js脚本文件-->
		<!--引入外部独立的js文件的时候,js文件中的代码会遵循自上而下的顺序依次逐行执行。-->
		<!--
		<script type="text/javascript" src="js/1.js"></script>
		-->

		<!--同一个js文件可以被引入多次。但实际开发中这种需求很少。-->
		<!--
		<script type="text/javascript" src="js/1.js"></script>
		-->

		<!--这种方式不行,结束的script标签必须有。-->
		<!--
		<script type="text/javascript" src="js/1.js" />
		-->
		<!--
		<script type="text/javascript" src="js/1.js"></script>
		-->

		<script type="text/javascript" src="js/1.js">
			// 这里写的代码不会执行。
			// window.alert("Test");
		</script>

		<script type="text/javascript">
			alert("hello jack!");
						var=i;
			alert("i="+i);
			alert("hello jack!");
		</script>

JS中的函数

JS中的函数等同于java中方法
1、JS中的变量是一种弱类型的,那么函数应该怎么定义呢?
语法格式:
第一种方式
function 函数名(形式参数列表){
函数体;
}
第二种方式:
函数名=function(形式参数列表){
函数体;
}
JS中的函数不需要指定返回值类型。

		<script type="text.javascript">
			function sum(a,b){
				//a和b都是局部变量,他们是形参
				alert(a+b);
			}
			
			//函数必须调用才能执行
			//sum(10,20);
			
			//定义一个函数sayHello
			sayHello=function(username){
				alert("hello "+username);
			}
			
			//调用函数
			//sayHello("张三")
		</script>
		<input type="button" value="hello" onclick="sayHello('jack')"/>
		<input type="button" value="计算10和20的和" οnclick="sum(10,20)";>
		

/*
java中方法有重载机制,JS中的函数能重载吗?
JS函数调用的时候,参数的类型没有限制,并且参数的个数也没有限制。

			重载的含义:
				方法名或者函数名一样,形参不同(个数,类型,顺序)
		*/	   	   
		/*
			JS中函数不能重名,当函数重名的时候,后声明的函数会将之前声明的同名函数覆盖
		*/
		function sum(a,b,c){
			   return(a+b+c)
		   }
		   	function sum(a,b){
		   		return(a+b);
		   	}
			var reValue=sum(10,20,30);//30
			alert(reValue);

JS中变量

			javascript当中的变量
				怎么声明:
					var 变量名;
				怎么给变量赋值
					变量名=值;
				javascript是一种弱类型的语言,没有编译阶段。一个变量可以随意赋值,赋什么类型的值都行
					i=false;
					i="abc";
					i=new Object();
					i=3.14
			重点:JavaScript是一种弱类型编程语言。
<script type="text/javascript">

		   var i;
		   alert("i=" +i);//未定义值undefined
		   
		   alert(undefined);
		   
		   var k=undefined;
		   alert("k=" +k);
		   
		   //一个变量没有声明/定义,直接访问
		   //alert(age);	//语法错误: age is not defined(变量age不存在,不能这样写)
		   
		   
		   var a,b,c=200;
		   alert("a="+a)//undefined
		   alert("b="+b)//undefined
		   alert("c="+c)//undefined
		   
		   a=false;
		   alert("a="+a)
		   a="abc";
		   alert("a="+a)
		   a=1.2;
		   alert("a="+a)
		</script>

全局变量:
在函数体之外声明的变量属于全局变量,全局的生命周期:
浏览器打开是声明,浏览器关闭时销毁,尽量少用,因为全局变量会一直在浏览器的内存当中,耗费内存空间。

局部变量:
在函数体重声明的变量,包括一个函数的形参都属于局部变量
局部变量的生命周期:函数开始执行的时候局部变量的内存空间开辟,函数执行结束之后,局部变量的内存空间释放。
局部变量的生命周期较短。

//当一个变量声明的时候没有使用var关键字,那么不管这个变量再哪里声明的,都是全局变量.

 function myfun(){
			   myname="jack";
		   }
		   myfun();
		   alert("myname= "+myname);

JS中数据类型

1、虽然JS中的变量在声明的时候不需要指定数据类型,但是在赋值的时候,每一个数据还是有类型的
JS中包括哪些数据类型:原始类型,引用类型
原始类型:Undefined、Number、String、Boolean、Null
引用类型:Object以及Object的子类
2、ES规范(ECMAScript规范),在ES6之后,又基于6中基本类型之外添加了一种新的类型:Symbol

		3、JS中有一个运算符叫做typeof,这个运算符可以在程序的运行阶段动态的获得变量的数据类型。
		typeof运算符的语法格式:
			typeof 变量名
		typeof运算符的运算结果是以下6个字符串之一:注意字符串全部都是小写
			"undifined"
			"number"
			"string"
			"boolean"
			"object"
			"function"
		4、在JS中比较字符串是否相等的时候使用“==”没有equals
		<script type="text/javascript">
		   var i;
		   alert(typeof i);//undefined
		   var k=10;
		   alert(typeof k);//number
		   
		   var f="abc"
		   alert(typeof f);//string
		   
		   var d=null;
		   alert(typeof d);//object
		   
		   var flag=false;
		   alert(typeof flag);//boolean
		   
		   function sum(a,b){
			   return a+b;
		   }
		   alert(typeof sum);//function
		   
		   var obj=new Object();
		   alert(typeof obj);
		</script>

Undefined

			Undefined类型只有一个值,这个值就是Undefined
			当一个变量没有手动赋值,系统默认赋值Undefined
			或者也可以手动赋值
		<script type="text/javascript">
		   var i;
		   var k=undefined;
		   var y="undefined";
		</script>

Number

1、Number类型包括哪些值?
-1 0 1 2.2 3.14 100 NaN infinity
整数、小数、正数、负数、不是数字、无穷大都是Number类型。
2、关于isNaN函数?
用法:isNaN(数据),true表示不是一个数字,false表示是一个数字
3、parseInt()函数
4、parseFloat()函数
5、Math.ceil()函数(Math是一个数学类,数学类当中有一个函数叫做ceil()),ceil()向上取整
//什么情况下是NaN呢?
//运算结果本来是一个数字,最后算完不是一个数字的时候,结果是NaN

		<script type="text/javascript">
			var a=100;
			var b="中国人";
			alert(a/b)
			
			var e="abc";
			var f=10;
			alert(e+f);//abc10
			alert(f+e);//10abc
			
			alert(10/0);//infinity;
			
			alert(10/3);//3.333333333333333333333335
			
			//关于isNaN函数?
			//用法:isNaN(数据),true表示是一个数字,false表示不是一个数字
			alert(isNaN(a))
			
			//parseInt();
			//将字符串转换为int
			alert(parseInt("3.99999"))//3
			//parseFloat();
			alert(parseFloat("3.14")+1)//4.14
			//Math.ceil();
			alert(Math.ceil(4.15));
		</script>

Boolean

		1、JS中的布尔类型永远只有两个值:true和false
		2、在Boolean类型中有一个函数叫做:Boolean()
			语法格式:
				Boolean(数据)
			Boolean()函数的作用将非布尔类型转换为布尔类型
		<script type="text/javascript">
			var username="jack";
			if(username){
				alert("欢迎你"+username);
			}else{
				alert("用户名不能为空")
			}
			
			alert(Boolean(1));//true
			alert(Boolean(0));//false
			alert(Boolean(""));//false
			alert(Boolean("abc"));//true
			alert(Boolean(null));//false
			alert(Boolean(NaN));//false
			alert(Boolean(undefined));//false
			alert(Boolean(Infinity));//true
			
			for(var i=0;i<10;i++){
				alert("i=" +i);
			}
		</script>

String

String类型:
1、在JS中字符串可以使用单引号也可以使用双引号
2、JS当中怎么创建字符串对象?
第一种:var s=“abc”;
第二种:(使用内置的支持类)var s2=new String(“abc”);
String是一个内置类,可以直接用,String的父类是Object。
3、无论是小string还是大String,他们的属性和函数都是通用的
4、关于String类型的常用属性和函数?
常用函数:
indexOf();返回第一次出现该字符串的索引
replace();返回根据正则表达式进行文字替换后的字符串的复制。
split();将一个字符串分割为子字符串,然后将结果作为字符串数组返回。
substr();返回一个从指定位置开始的指定长度的子字符串。
substring();返回位于 String 对象中指定位置的子字符串。
toLowerCase();返回一个字符串,该字符串中的字母被转换为小写字母。
toUpperCase();返回一个字符串,该字符串中的字母被转换为大写字母。
//小string(属于原始类型)
/*
var x=“abc”;
alert(typeof x);//string

	   //大String 属于Object类型
	   var y=new String("abc");//Object
	   alert(typeof y)
	   */
		<script type="text/javascript">
			var x="Hello JavaScript"
		   var y="Java"
		   
		   //indexOf();
		   alert(x.indexOf(y));//6
		   alert(x.indexOf("world"))//-1
		   
		   //replace();
		   var xReplace=x.replace("Java","J");
		   alert(xReplace);
		   
		   //split();
		   var xSplit=x.split(" ");
		   alert(xSplit);
		   
		   //substr();
		   var xSubstr=x.substr(6,10);
		   alert(xSubstr);
		   
		   //substring();
		   var xSubstring=x.substring(6,16);//不包含16
		   alert(xSubstring);
		   
		   //toLowerCase();
		   var xtoLowerCase=x.toLowerCase();
		   alert(xtoLowerCase);
		  
		   //toUpperCase();
		   var xtoUpperCase=x.toUpperCase();
		   alert(xtoUpperCase);
		   
		</script>

Object

		Object类型:
			1、Object类型是所有类型的超类,自定义的任何类型,默认继承Object
			2、Object类包括哪些属性呢?
				prototype属性(常用):作用:给类动态的扩展属性和函数、
				constructor属性
			3、Object类包括哪些函数?
				toString();
				valueof();
				toLocaleString();
			4、在JS当中定义的类默认继承Object,会继承Object类中的所有属性以及函数。
			5、在JS中怎么定义类?怎么new对象?
				定义类的语法:
					function 类名(形参){
						
					}
				创建对象的语法:
					new 构造方法名(实参);//构造方法名和类名一致。
	function sayHello(){
			   
			}
			//把sayHello当做一个普通的函数来调用
			sayHello();
		   
			//把sayHello当做一个类来创建对象
			var obj=new sayHello();//obj是一个引用,保存内存地址在堆内存对象中.
			
			//定义一个学生类
			function Student(){
				alert("Student1!!");
			}
			
			//当做普通函数来调用
			Student();
			
			//当做类来创建对象
			var stu=new Student();//创建对象时执行了alert("Student1!!");
			alert(stu);//[object Object]
			
			//JS中的类的定义,同时又是一个构造函数的定义
			//在JS中类的定义和构造函数的定义是放在一起定义的.
			function User(a,b,c){
				//声明属性(this表示当前对象)
				//User中有三个属性sno\sname\sage
				this.sno=a;
				this.sname=b;
				this.sage=c;
			}
			//创建对象
			var u1=new User(1,"zhangsan",25);
			alert(u1.sno);
			alert(u1.sname);
			alert(u1.sage);
			
			var u2=new User(2,"lisi",55);
			alert(u2.sno);
			alert(u2.sname);
			alert(u2.sage);
			
			//访问一个对象的属性
			alert(u2["sno"]);
			alert(u2["sname"]);
			alert(u2["sage"]);
			
			//定义类的另一种语法
			Emp=function(ename,sal){
				//属性
				this.ename=ename;
				this.sal=sal;
			}
			
			var e1=new Emp("SMITH",800);
			alert(e1["ename"]+","+e1.sal);
			
			Product=function(pno,pname,price){
				//属性
				this.pno=pno;
				this.pname=pname;
				this.price=price;
				//函数
				this.getPrice=function(){
					return this.price;
				}
			}
			var product=new Product(1,"nike",1000);
			var productPrice=product.getPrice();
			alert(productPrice);
			
			//可以通过prototype这个属性给类动态的扩展属性以及函数
			Product.prototype.getPname=function(){
				return this.pname;
			}
			//调用后期扩展的getPname()函数
			alert(product.getPname());
			
			//给String扩展一个函数
			String.prototype.suiyi=function(){
				alert("这是给String类扩展的一个函数");
			}
			//调用扩展函数
			"abc".suiyi();

javascript 帮助文档

链接:https://pan.baidu.com/s/130K9P6U49l-6cizKHi9GgQ
提取码:zsy0
复制这段内容后打开百度网盘手机App,操作更方便哦

  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值