JavaScript

最新推荐文章于 2024-08-30 20:29:15 发布

Cookiesyyyy

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量209

点赞数

文章标签： javascript java

本文链接：https://blog.csdn.net/wd571241461/article/details/107722541

版权

1.JavaScript的概念

1.1构建网站的三大技术:

	1.HTML : 网页的骨架;
	2.BOM : 样式管理;
	3.DOm : 动态脚本;

1.2概念

JavaScript是一种解释性脚本语言,浏览器进行解析;

1.3JavaScript由三部分组成:

	1. CMAScript :  JavaScript的语法,定义了脚本语言的所有属性、方法和对象
	2. BOM  :   代表浏览器,可以对浏览器进行访问和操作;
	3. DOM  :  文档对象模型;

1.4JavaScript的关系图:

在这里插入图片描述

2.JavaScript的三大引入方式

2.1 行内JS

语法：<a href="javascript:alert('点你就点你');"> 点我，点我...</a>
href 中的Javascript是伪协议,当浏览器解析至此处时,就会知道不跳转,而是执行JS代码;

2.2 内部JS

语法：<script type="text/javascript"> JS代码 </script>
放置位置:
① 写在一组script标签内部,该标签可以放在任意位置
② 官方: 推荐head标签内部写js
③ 码农: body标签结束位置写js
注意:script标签不能写成单标签;

2.3 外部引入JS

语法：<script type="text/javascript" src="JS文件位置"></script>
注意:
①引入外部JS代码后,script标签内部不能写其他JS代码;
②注意每一句JS代码后面都要写分号;

2.4 代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--引入js代码,该标签做了引入操作后,标签内部不能写js代码-->
		<script type="text/javascript" src="js/_01.js" />
		<!--script 标签声明,内部js代码:加载顺序至上而下-->
		<!--注意: script标签不能写成单标签形式-->
		<script type="text/javascript">	
		window.alert(10);	
		</script>
	</head>
	<body>
		<div style="background-color: pink;">
			555555555555555555	
		</div>
			<!--行内js代码,JavaScript是伪协议,浏览器执行至此处时,知道接下来执行的是js代码-->
			<a href="javascript:alert(1)">alert</a>
			<a href="#" onclick="alert(2)">onclick#</a>
			<a href="javascript:void(0)" onclick="alert(3)">onclick</a>
	</body>
</html>

3.JavaScript的变量

JavaScript是一种弱数据类型的语言,所以JS的语法中允许给已声明且赋值的变量赋值另外类型的值
语法：
① var 变量名; //声明变量【推荐方式】
② var 变量名=值; //声明变量并赋值【推荐方式】
③ 已声明赋值的变量 = 另一种类型值; //【不推荐】
④ 不声明变量 = 值; //不事先声明变量直接使用
代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
		<script type="text/javascript">
			var num;
			num = 10;
			alert(num);
			console.debug(num);
			var name ="二狗";
			console.debug(name);
			name=3.14;
			console.debug(name);
			age=33;
			console.debug(age);	
		</script>	
	</head>
	<body>
	</body>
</html>

4.JavaScript的原始数据类型

JavaScript中可以使用 typeof/typeof()来判断变量的数据类型;

4.1Number数值类型

JS数字类型可以采用10进制\8进制\16进制以及科学计算法等形式表示;
代码示例:

/*不会像java代码一样报错,输出结果为 Infinity 无穷大*/
console.debug(1/0);
/*isFinite  判断该值是否有穷,输出结果为 false*/
console.debug(isFinite(1/0));
/*new 一个对象*/
var n = new Number(15)
console.debug(n)	
/*判断类型*/	
var num = 10;
console.debug(typeof num);//普通数字为Number类型
console.debug(typeof n); //其他类型都是Object类型
console.debug(typeof(n));	
//输出结果为NaN,因为字符串内容不是数字,所以底层无法将其中转换为数字
console.debug(123/"abc");
console.debug(123/"123");//输出结果为1.底层将字符串转换为数字

4.2Boolean类型

与java一样,采用true和false表示;
在JS语法中，0、NaN、Undefined、空字符串、null均可以表示为false;
代码示例:

var f = false;
console.debug(f);
f = new Boolean();
console.debug(f);
if(!f){
console.debug("大傻逼");
}

4.3String类型

JS语法中不存在char类型，所以由单引号或双引号括起来的字符序列，任何字符串的长度都可以通过访问length属性获得.
代码示例:

var str = "小豆豆";
console.debug(str);
console.debug(str.length);	
/*没有初始化的变量,打印输出结果为 undifined (没有定义)*/
var aaa;
console.debug(aaa);
/*null值,代表没有对象*/
var age = null;
console.debug(age);

5.JavaScript的运算符

JavaScript中的赋值、算术、逻辑运算符与java一致;

5.1关系运算符

== ：代表相等(它只比较内容，不比较类型)
===：绝对相等(先比较类型，再比较内容)
!==：绝对不等

<script type="text/javascript">
var num = 10;
var num2 = "10";
/*	==  只比较内容,不比较类型;
 *  === 先比较类型,在比较类型;
 * !==  绝对不相等为 true 	 
 * */
console.debug(num==num2);//true
console.debug(num===num2);//false
console.debug(num!==num2);//true	
/*for循环与java中类型,只不过变量的声明关键字换为 var*/
for(var i=1;i<=10;i++){
console.debug(i);
}
</script>

6.JavaScript流程控制

JS中同Java一样存在流程控制语句，用法一样;
代码示例 :

/*for循环与java中类型,只不过变量的声明关键字换为 var*/
			for(var i=1;i<=10;i++){
				console.debug(i);
			}
/*for in 遍历数组  取出来的i值表示数组的索引编号*/
			for(var i in arr){
				console.debug(arr[i]);
				
			}

7.JavaScript函数

7.1语法

语法: function 函数名( [参数列表] ){ JS代码 [return 返回值;] }
[ ] 表示可以不写;
代码示例 :

/*JS中的函数用 function关键字 与java类似不调用不执行*/
function eat(){
	console.debug(10);
}
eat();

/*有参数的函数,调用时不是必须要传入相同个数的参数*/
function run(num1,num2){
	console.debug(num1+num2);
}
 run(10,20);
 run(10);
 run();
 
 /*Js中的函数也可以有返回值,用return返回即可*/
 function sleep(num1,num2){
 	return num1+num2;
 }
  var sum = sleep(10,20);
  console.debug(sum);
  console.debug(sleep(55,10));
  console.debug(run(10,20));

7.2 全局变量和局部变量

代码示例

var name = "全局变量";
var xxx="憨批憨批";
function walk(){
	name = "小花花";
}
walk();
console.debug(name);
function smile(){
	var xxx = "憨批";
}
console.debug(xxx);

7.3 匿名函数语法

语法:function (参数列表){ JS代码 [ return 返回值; ] }
代码示例:

var action = function(){
	console.debug(“前方高能，请非战斗人员迅速撤离”);
}
action();

8. JavaScript对象

8.1 本地对象

本地对象就是 ECMA-262 定义的类（引用类型），相当于Java中类的概念；
这些引用类型在运行过程中需要通过new来创建所需的实例;

8.1.1 Date

日期对象
代码示例:

var date = new Date();
console.debug(date);
/*给对象添加一个函数,让输出的时间按指定格式输出*/
date.dateFormat = function(){
	var year = this.getFullYear();
	var mouth = this.getMonth();
	var day = this.getDate();
	var hour = this.getHours();
	var min = this.getMinutes();
	var sec = this.getSeconds();
	return year+"/"+mouth+"/"+day+" "+hour+":"+min+":"+sec;
}
var frm = date.dateFormat();
console.debug(frm);

8.1.2 String

字符串对象
代码示例:

var str = "两情若是长久时,又岂在朝朝暮暮";
/*将字符串以 , 分割成一个数组,数组的长度为后面输入的值*/
var s = str.split(",",2);
console.debug(s);
/*根据ASCII编码表将整数转换为字符*/
var word = String.fromCharCode(65);
console.debug(word);

8.1.3 Array

数组对象
代码示例:

var arr = new Array();
console.debug(arr);
arr=(10);
arr = new Array(10);
console.debug(arr);
arr = new Array(10,12,34,56);
console.debug(arr);

console.debug(arr[1]);

/*JS中的数组没有长度限制,数据类型的限制*/
arr[66]=696969;
console.debug(arr);
console.debug(arr[66]);

/*for in 遍历数组  取出来的i值表示数组的索引编号*/
for(var i in arr){
	console.debug(arr[i]);
	
}

8.2 系统函数

定义：全局属性和函数可用于所有内建的 JavaScript 对象；
系统函数就是JS给我们准备或者说封装好的一些函数(方法)，实现了很多功能;

8.2.1 编码解码

代码示例:

var ss = "百度";
var str = "www.baidu.com?url = "+ss;
/*编码,将中文编译成地址可接受的字节码*/
var u = encodeURI(str);
console.debug(u);
/*解码*/
var i =decodeURI(u);
console.debug(i);

/*会将字符串中的特殊字符编码成可以发送的参数*/
str ="www.baidu.com?url=http://www.qq.com";
var se = encodeURIComponent(str);
console.debug(se);
/*解码*/
var de = decodeURIComponent(se);
console.debug(de);

8.2.2 eval函数

在JS中,计算代码,将字符串装换为可执行的脚本;
代码示例:

/*eval 会计算Js的字符串,当成脚本执行*/
var a = "console.debug('eval函数示例')";
console.debug(a);
eval(a);

8.2.3 parseInt函数

在JS中,将数字取整;
代码示例

/*parseInt取整数,若字符串以数字开头也可以转成该数字*/
var num = 3.42323;
num = parseInt(num);
console.debug(num);

num = "123abc";
num = parseInt(num);
console.debug(num);

8.2.4 Math函数

数学计算对象;
代码示例

/*向上取整*/
var v= Math.ceil(1.1);
console.debug(v);

/*Math.random()表示0~1的随机数*/
var word = parseInt(Math.random()*32)+65;
console.debug(word);
console.debug(String.fromCharCode(word));

8.3 自定义函数

JavaScript中创建类其实和创建函数【函数也是一种对象】是一样的语法；
语法:function 名称( ) { }
区分函数和对象 : 建议方法名称小写，创建类名称首字母大写;
对象中定义方法，有下列形式：
(1) 在对象中使用this关键字；
(2) 通过new的实例化对象添加方法；
(3) 通过prototype添加方法

/*function  关键字,用来创建方法或类*/
function Person(){
	console.debug("豆豆爱吃肉");
}
/*创建Person类的对象*/
var pson = new Person();
console.debug(typeof pson);
Person();

/*设置字段  字段不需要写类型*/
function Person(name,age){
	this.name=name;
	this.age=age;	
}
var p = new Person("小花花",2);
console.debug(p);
console.debug(p.age);
/*设置动态行为,即成员方法*/
/*一个普通函数*/
function eat(){
	console.debug("不吃小鱼干");
}
function Cat(){
	/*将普通方法赋予给Cat类中的eat方法*/
	this.eat=eat;
	//在类中写一个成员方法drink
	this.drink=function(){
		console.debug("喝水");
	}
}
var cat = new Cat();
cat.eat();
cat.drink();
/*part2 对象添加属性的方式详解*/
function Animal(name,age){
	this.name = name;
	this.age = age;
	this.toString = function(){
		console.debug(this.name+"--"+this.age);
	}
}
var aml = new Animal("豆豆",2);
console.debug(aml);
console.debug(aml.name);
console.debug(aml.age);
aml.toString();	
var vml = new Animal("花花",2);
console.debug(vml);
/*part 2.1 给类的一个对象添加属性 ,只在添加的对象中生效*/
aml.sex="小公猫";
aml.run=function(){
	console.debug("爱拆家");
}
console.debug(aml);
aml.run();
	
/*	part2.2   给类中添加静态属性和动态行为 必须要用  [类名.prototype.字段名/方法名] 
 
 * 	类中添加后,对象中都会多出该属性;
 * */

Animal.prototype.song=function(){
	console.debug("天天在家嚎");
}

Animal.prototype.sleep="爱睡觉";

aml.song();
vml.song();
console.debug(aml.sleep);
console.debug(vml.sleep);

9.BOM

BOM是browser object model的缩写，简称浏览器对象模型；
BOM中有:
1.window窗口对象
2.location地址对象
3.document文档对象
4.form表单对象
打开一个窗口就是一个window对象;
窗口里面使用location表示地址栏;
窗口的历史记录使用history来表示;
浏览器的信息使用navigator来表示;
窗口里面的内容使用document来表示

9.1 window

window对象是BOM中的顶级对象，默认可以省略；
window对象是相对于web浏览器而言的，依赖于浏览器，在浏览器中全局对象指的是window对象
window对象可以获取其他BOM对象;
全局函数和window对象的函数不一样。全局函数不属于任何一个内置对象;
代码示例:

/*弹窗*/
ar value = {"name":"么么哒","age":18};
value.sex = "女";
alert(value.name);
console.debug(value);
var v = prompt("你爱不爱我"," ");
console.debug(v);
var res = confirm("你确定么")
console.debug(res);

/*定时器*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var res;
			function start(){
				res = setInterval("document.getElementById('text2').value=new Date()",1000);	
			}
			function stop(){
				clearInterval(res);
			}
			function change(){
				var pass = document.getElementById("pass");
				if(pass.type=="password"){
					pass.type ="text";
				}else{
					pass.type = "password";
				}
			}
			
			
		</script>
	</head>
	<body>
		<input type="button" value="开始" onclick="start()">
		<input id="text2" type="text" value="">
		<input type="button" value="结束" onclick="stop()" />
		
		password:<input id="pass" type="password" >
		<input  type="button" value="密码" onclick="change()"/>
	</body>
</html>

9.2 location

当前访问的网址的相关信息；

var loc = window.location;
for(var name in loc) {
	console.debug(name, loc[name]); //查看对象信息(了解内容)
}
window.location.href = "http://www.baidu.com";

Cookiesyyyy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

初识JavaScript1.JavaScript的概念1.1构建网站的三大技术:1.2概念1.3JavaScript由三部分组成:1.4JavaScript的关系图:2.JavaScript的三大引入方式2.1 行内JS2.2 内部JS2.3 外部引入JS2.4 代码实现3.JavaScript的变量4.JavaScript的原始数据类型4.1Number数值类型4.2Boolean类型4.3String类型5.JavaScript的运算符5.1关系运算符6.JavaScript流程控制7.JavaScr
复制链接

扫一扫