Javascript--Ecmascript

Javascript–Ecmascript

1.Javascript的定义:是基于对象和事件驱动的脚本语言,主要是嵌入到HTML中,应用在客户端,动态操作网页元素,也可以作用于服务端。文件扩展名:.js

2.Javascript的作用:
(1)作表单验证-》减轻服务器端的压力。
(2)增加页面动态特效-》吸引客户。
(3)增加动态交互。

3.Javascript的执行特点:边解释边执行的语言。

4.Javascript的组成部分:Ecmascript,DOM,BOM.

5.JavaScript 是一种弱类型语言。

6.JavaScript使用方式三种:
(1)行内样式:
<input type="button" value="hello" "javascript:alert('hello js!');"/>
点击hello按钮,弹窗显示"hello js!";
(2)内部样式:

eg:`<script type="text/javascript">`
	document.write("Hello World!");/*网页输出*/
	console.log("我是好学生");/*在浏览器的控制台输出*/
</script>

(3)外部样式:<script type="text/javascript" src="1.js"></script>
外部建立xx.js文件 src
值 描述
URL
规定图像的 URL。
可能的值:
绝对 URL - 指向其他站点(比如 src=“http://www.example.com/”)
相对 URL - 指向站点内的文件(比如 src="/i/image.gif")

7.JavaScript的数据类型:number,string,boolean,null,undefined.

8.javaScript的变量声明和赋值:
(1)var 变量名; 变量名=值;
(2)var 变量名=值;

9.变量数据类型的判断:number,string,boolean,undefined,object
(1)typeof 变量名
(2)typeof(变量名) 一种是加空格,一种是加括号。

10.javascript符号:

(1)=赋值运算符, ==比较等于号两边值,===比较等于号两边的值和类型
	(2)+,如果加号两边是数字类型,就作为运算符;如果加号有一边是字符类型,就作为连接符。
	(3)-,*,/可以将字符串转换为数字进行运算。
	var num1=11;
	var str1="11";
	var str2="abc";
	var num2=11;
	document.write(num1==str1);//true
	document.write(num1===str1);//false
	document.write(num1===num2);//true
	
	document.write(num1+2);//13
	document.write(str1+2);112
	
	document.write(num1-3);//8
	document.write(str1-3);//8
	document.write(str2-3);//NaN非数字
	document.write(str1*2);//22
	document.write(str1/1);*/11

11.数组:

eg:/*声明数组用法一
var arr1=[1,3,9];
document.write(arr1[2]);*/
/*声明数组用法二
var arr2=new Array();
arr2[0]=2;
arr2[1]=3;
for(var i=0;i<arr2.length;i++){
	document.write(arr2[i]+"<br/>");
}*/

/*声明数组用法三
var arr3=new Array(3);
arr3[0]=2;
arr3[1]=3;
for(var i=0;i<arr3.length;i++){
	document.write(arr3[i]+"<br/>");
}

var arr4=[1,4,9];
//向数组中添加值方式1
arr4[3]=11;
arr4[4]=22;       按照下标
//向数组中添加值方式2
arr4.push(18,30);     固定加在末尾
//修改数组中值
arr4[0]=2;           按照下标
//删除数组中的元素,方式1
//delete arr4[6];//删除当前数组空间中的值,空间还在
//删除数组中的元素,方式2
//arr4.pop();//删除当前数组空间包括值  最后一位数
//删除数组中的元素,方式3
//arr4.shift();//删除数组中第一个空间包括值
//删除数组中的元素,方式4
arr4.length=0;//将数组中值清空
for(var i=0;i<arr4.length;i++){
	document.write(arr4[i]+"<br/>");
}*/

var arr5=[[1,3,6],[8,9]];
for(var i=0;i<arr5.length;i++){
	var arr=arr5[i];
	for(var j=0;j<arr.length;j++){
		document.write(arr[j]);
	}
	document.write("<br/>");
}
 //JavaScript中的对象即Json对象
var stu={"name":"李郑强","age":18,"id":17};
document.write(stu.name);
document.write("<br/>");
//JavaScript中的对象数组即Json对象数组
var arr=[{"name":"张三","age":18},{"name":"李四","age":28}];
document.write(arr[0].name);

12.在javaScript中,0,null,false,"",undefined,NaN默认是false.

13.选择结构:

(1)if(boolean表达式){

	}

(2)if(boolean表达式){

	}else{

	}

(3)if(boolean表达式1){
	  document.write("今天是星期1");
}else if(boolean表达式2){
	document.write("今天是星期2");
}else{
	document.write("今天是星期"+today);
}

(4)switch(today){
	case 1:
		document.write("今天是星期1");
		break;
	case 2:
		document.write("今天是星期2");
		break;
	default:
		document.write("错误");
		break;
}

(5)嵌套的选择结构
	if(time<10){
	if(sex=="女"){
		document.write("恭喜你参加女子组决赛");
	}else{
		document.write("恭喜你参加男子组决赛");
	}
}else{
	document.write("谢谢参与");
}

14.循环结构:

(1)var arr=[2,1,4,6];
	for(var i=0;i<arr.length;i++){
		document.write(arr[i]+"<br/>");
	}

(2)for-in:在JavaScript中,for-in中a代表的是遍历的每个元素的下标,遍历用in
	for(var a in arr){
		document.write(arr[a]+"<br/>");
	}

	   (3)var i=0;
	while(i<10){
		document.write("good good study,day day up<br/>");
		i++;
	}

 (4)var j=0;
	do{
		document.write(" **** good good study,day day up<br/>");
		j++;
	}while(j<10);

15.函数(相当于Java中的方法)

语法:function 函数名(参数列数){
      }
eg:/*无参函数*/
function show1(){
	document.write("这是一个无参函数");
}
//show1();

/*有参函数*/
function show2(name,age){
	document.write("我叫"+name+",年龄:"+age);
}

/*有返回值的函数*/
function show3(){
	return "这是一个有返回值的函数";
}

/*有参数有返回值的函数*/
function show4(num1,num2){
	return num1+num2;
}

/*匿名无参函数*/
var f1=function(){
			alert("这是一个匿名函数");
		}
		
//document.write(typeof f1);//function

/*匿名无参函数*/
var f2=function(a,b){
			alert("这是一个匿名函数,a="+a+",b="+b);
		}
/*匿名有返回值函数*/
var f3=function(a,b){
			return "这是一个匿名函数,a="+a+",b="+b;
		}

document.write(typeof f3);//function

<body>
<input type="button" value="无参函数" "show1()"/>     
<input type="button" value="有参函数" "show2('张三',18)"/>     

<input type="button" value="有返回值的函数" "alert(show3())"/> 
<input type="button" value="有参数有返回值的函数" "alert(show4('Hello','world'))"/>
<input type="button" value="匿名无参函数" "f1()"/> 
<input type="button" value="匿名有参函数" "f2(1,2)"/>  
<input type="button" value="匿名有返回值函数" "alert(f3(1,2))"/>   

16.系统函数:

(1)parseInt():试图将其收到的任何输入值转换成整数类型,转换失败则返回NaN
	eg:parseInt("")进行类型转换
	var str1="11";
	document.write(typeof(str1));
	var str2=parseInt(str1);
	document.write("<br/>");
	document.write(typeof(str2));*/
	
	/*第一参数是进制数,第二参数就是进制,parseInt("","")将其它进制的数转化为十进制数
	var a= parseInt("11", 16)
	var b=parseInt("11",2);
	var c=parseInt("11",8);
	var d=parseInt("11",5);
	document.write(d);
(2)parseFloat():同上类似
定义和用法
parseFloat() 函数可解析一个字符串,并返回一个浮点数。
该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。
语法
parseFloat(string)
参数	描述
string	必需。要被解析的字符串。
提示和注释
注意: 字符串中只返回第一个数字。
注意: 开头和结尾的空格是允许的。
注意: 如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。

实例
实例
使用 parseFloat() 来解析不同的字符串:
<script>
document.write(parseFloat("10") + "<br>");
document.write(parseFloat("10.33") + "<br>");
document.write(parseFloat("34 45 66") + "<br>");
document.write(parseFloat(" 60 ") + "<br>");
document.write(parseFloat("40 years") + "<br>");
document.write(parseFloat("He was 40") + "<br>");
</script>
以上实例输出结果:
10
10.33
34
60
40
NaN
	eg:var str1="11";
	var str2="abc";
	document.write(parseFloat(str1));
	document.write("<br/>");
	document.write(parseFloat(str2));
(3)isNaN():判断是否为非数字,判断是变量里面存原本的值的类型。
	eg:var a=11;
	var b="abc";
	var c="11";
	document.write(isNaN(a));//false
	document.write("<br/>");
	document.write(isNaN(b));//true
	document.write("<br/>");
	document.write(isNaN(c));//false
(4)isFinite():判断输入的是否是一个既非Infinity也非NaN的数字   
无法使用 for/in 循环来枚举 Infinity 属性,也不能用 delete 运算符来删除它。
Infinity 不是常量,可以把它设置为其他值。
	eg:document.write(isFinite(88));
(5)eval():会将其输入的字符串当作javascript代码来执行
eg:eval("alert('你好吗?')");

===========

定义和用法
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
语法
eval(string)
参数 描述
string 必需。要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句。
返回值
通过计算 string 得到的值(如果有的话)。
说明
该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性,并通过该属性调用它,则 ECMAScript 实现允许抛出一个 EvalError 异常。
抛出
如果参数中没有合法的表达式和语句,则抛出 SyntaxError 异常。
如果非法调用 eval(),则抛出 EvalError 异常。
如果传递给 eval() 的 Javascript 代码生成了一个异常,eval() 将把该异常传递给调用者。
提示和注释
提示:虽然 eval() 的功能非常强大,但在实际使用中用到它的情况并不多。
例子 1

在本例中,我们将在几个字符串上运用 eval(),并看看返回的结果:

<script type="text/javascript">

eval("x=10;y=20;document.write(x*y)")

document.write(eval("2+2"))

var x=10
document.write(eval(x+17))

</script>
输出:

200
4
27

例子 2
看一下在其他情况中,eval() 返回的结果:

eval("2+3")	// 返回 5
var myeval = eval;	// 可能会抛出 EvalError 异常
myeval("2+3");	// 可能会抛出 EvalError 异常
可以使用下面这段代码来检测 eval() 的参数是否合法:

try  {
     alert("Result:" + eval(prompt("Enter an expression:","")));
     }

catch(exception) {
     alert(exception);
     }
TIY
eval()
如何使用 eval()。

补充:
首先提下两个概念:行间样式与非行间样式
行间样式:行间样式就是写在标签体内的样式:如,

,在这里color样式就是行间样式。
非行间样式:非行间样式就是指不是写在标签体内的style属性的样式。如内的定义的样式或引用的外部css文件都是非行间样式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>行间样式与非行间样式</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		#box{ font-size:20px; color:black;}
	</style>
</head>
<body>
	<div id="box" style="color:red;">China</div>
</body>
<script>
	//js代码
</script>
</html>

js中获取CSS样式有以下两种方法:

1、获取行间样式 (可读可写)

var oBox = document.getElementById('box');
console.log(oBox.style.color);     // red
console.log(oBox.style.fontSize);  // ''   obj.style[attr] 只能获取行间样式,不能获取非行间样式 
oBox.style.color = 'black';   

2、获取非行间样式 只读 (返回的是当前元素应用的最终CSS属性值(包括外链CSS文件,标签中嵌入的style属性等))

function getStyle(obj,attr){    //获取非行间样式,obj是对象,attr是值
   if(obj.currentStyle){       //针对ie获取非行间样式
       return obj.currentStyle[attr];
   }else{
       return getComputedStyle(obj,false)[attr];   //针对非ie
   };
};

3、行间样式(ele.style) 与 非行间样式(getComputedStyle或currentStyle) 的区别
a、ele.style 只能读取行间样式,而getComputedStyle或currentStyle获取的是 元素最终的css样式;
b、ele.style 是可读可写的,而getComputedStyle或currentStyle 是只读的;
console.log(getStyle(oBox,‘color’))

猜你喜欢

转载自blog.csdn.net/weixin_43905026/article/details/88831542