JavaScrip基础

JavaScrip基础&BOM

1.JavaScrip简介

		(1)JavaScript是一种解释性脚本语言(代码不进行预编译),由浏览器解释执行,用来向页面添加交互行为;
		(2)Java Script由三个主要组成部分:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型);
			ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本语言的所有属性、方法和对象,DOM把整个页面规划成由节点层构成的文档,它不与浏览器、平台、语言相关,为web开发者提供一个标准可以访问站点中的数据、脚本和表现层对象。BOM是浏览器的一种特性,它可以对浏览器窗口进行访问和操作,例如移动、关闭窗口,调整窗口的大小,支持cookie等。
		(3)构建网站的三大技术
			①HTML:支撑网页的骨架
			②CSS:层叠样式打扮一下
			③JS:js动态脚本
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200731223945875.png)

2.JavaScrip三种写法

		JavaScrip是弱类型、强语法(与Java不同)

(1)行内JS

			1.行内JS使用几率较少,只有针对某些标签的特殊操作:
				语法:<a href="javascript:alert('点你就点你');">点我,点我...</a>
			2.上述代码中,我们将JS代码写在href属性中,这样我们在点击链接的时候,执行的就不是跳转地址,而是其中的JS代码;
			3.javascript:这是伪协议的意思,类似咱们http:,伪协议是为了告诉浏览器接下来的代码是JS代码,当然部分地方可以省略,但建议写上伪协议;
			4.alert(参数值)是用来弹出一个提示框,弹框中的提示信息即为传入的参数值,弹框是JS的重要调试手段之一;
			5.console.debug()也是JS的一种调试手段,但此种调试手段在IE上不支持;
			6.使用场景:非常简单的Js代码

(2)内部JS

			1.页面内的JS是写在一组<script>标签内,这组标签可以写在页面内的任意位置:
				语法:
<script type="text/javascript">
									JS代码
								</script>
								示例代码:
							<script type="text/javascript">
								alert(“不点我也来”);
								</script>
			2.使用场景:仅仅被当前页面共享的js代码

(3)外部JS

1.外部JS方式,其实就是先单独定义一个JS文件,然后将这个JS文件与要使用的网页将关系关联起来;
引入外部JS文件:

2.引入CSS文件使用标签,引入JS文件而是使用

<!--写法1不推荐的原因,2.它会修改你当前url地址3.它会跳转到当前页面的最顶部-->
<a href="#" onclick="alert(1);">写法1</a>	
<!--href="javascript:void(0);":我当前a标签不再超链接到一个新的界面,而是作为JS触发源而存在;
javascript伪协议-->
<a href="javascript:void(0);" onclick="alert(2);">写法2</a>
<a href="javascript:;" onclick="alert(3);">写法3</a>

3.JavaScrip变量

1.使用var关键字,无论是何种数据类型的变量,均可以使用var关键字来进行声明;弱类型
2.变量官方概念?系统为之设置一个标识,程序可以用变量名来指向具体的对象内存,并通过变量名来获得对应的对象;

var 变量名;                        //声明变量【推荐方式】
var 变量名=;                     //声明变量并赋值【推荐方式】
已声明赋值的变量 = 另一种类型值;   //【不推荐】
不声明变量 =;                   //不事先声明变量直接使用

1.如果按照Java的语法去声明JS变量,那么大家一定会使用推荐的两种方式去做;
2.事实上,JS的语法校验规则并不严密,在JS的语法中允许给已声明且赋值的变量赋值另外类型的值;

var name=”字符串类型”;
console.debug(name);            //在控制台输出打印name变量
name = 19;
console.dubug(name);

1.上述代码中,我们声明了一个name变量,并赋值了一个字符串,但随后我们给name变量赋值了一个数字类型;
讨论:这样的操作在Java语法中会报错吗?
2.答案是毋庸置疑的,Java语法一定会报错,但在JS的语法中,此种操作不会;
3.JS中还可以不使用var关键字,直接写一个符合命名规范的名字作为变量使用,例如:

age = 18;
console.debug(age);

4.上述操作中,我们直接使用了一个名字并赋值,JS中是允许此类操作的,但不推荐使用;
5.综上所述,我们可以得出一个结论:JS的语法规则并不如Java那么严格,所以在学习JS的过程中,请按照Java的语法风格要求自己;

4.JavaScrip原始数据类型

1.JavaScript中的原始数据类型相当于Java的基本数据类型,在js中可以使用typeof 和typeof()判断当前变量属于那种数据类型;
例子:var a = true; alert(typeof a);//boolean alert(typeof(a));//true

(1)number(数值类型)

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

① 常用十进制

0x8a     //十六进制以0x或0X开头
0123     //八进制必须以0开头
1        //十进制首位不能为0
5E7      //科学计数法

② 无穷数

1.在JS语法中,数字是有取值边界的,超出最大数取值为Infinity【正无穷】,超出最小数取值为-Infinity【负无穷】,无穷数不能用于数值运算,一般使用isFinite()函数对一个数字进行判断是否是有穷的【有限的】,若传入的数据是无穷数,那么返回false,若传入的数据是有穷数,则返回为true;

isFinite(1/0);                        //Infinity
console.debug(isFinite(1/0));      //false

2.在JS中,1/0并不会报错,因为JS语法中0是取值了一个无限趋近于0的一个数字

③ 非数

1.非数:不是数字,在JS中采用NAN来表示,同样在JS中采用了isNaN()函数来判定当前字符是否真的不是数字;

var n1=123;
var n2=’aaa’;
console.debug(n1/n2);             //NaN
console.debug(isNaN(n1/n2));    //true

2.NaN这个特殊字符比较有意思的地方在于:
(1)与任何值均不相等,包括自己本身;
(2)任何涉及NaN的操作都会返回NaN;

(2)boolean(布尔类型)

1.布尔类型和Java一样,采用true和false表示;
2.注释:在JS语法中,0、NaN、Undefined、空字符串、null均可以表示为false;

(3)string(字符串类型)

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

(4)null(空对象)

1.表示一个不存在的对象,只有一个值null;

(5)undefined(未定义或未初始化)

1.表示声明但未赋值的对象,Undefined派生自null;
2.如果我们做 *、/如果有字符串,它会尝试去转换成number来进行运算,如果转换失败(NaN);

5.JavaScrip运算符

1.在JS中同样存在算术运算符、等性运算符、逻辑运算符的操作,这些运算符的操作和JAVA一样,接下来我们演示与JAVA不一样的地方;

(1)赋值运算符

在这里插入图片描述
注:赋值运算符的使用和Java一样;

(2)算术运算符

在这里插入图片描述
注释:在JS中+运算符中有字符串的应用,会演变为字符串的拼接;

var x=3 +3;
console.debug(x);  //33

(3)比较运算符(关系运算符)

1.比较运算符用于判断两个变量大小关系:>、<、、<=、>=、=、!=、!=,其中:
(1)
:代表相等(它只比较内容,不比较类型)
(2)=:绝对相等(先比较类型,再比较内容)
(3)!
:绝对不等

var x=10;
var y=10;
console.debug(x==y);  //true
console.debug(x===y);  //false
console.debug(x!==y);  //true

(4)逻辑运算符

&& :逻辑AND运算符,一假遍假
|| :逻辑OR运算符 ,一真遍真
! :逻辑NOT运算符,真为假,假为真

var x=0||1;
console.debug(x);  //1

1.逻辑或运算符从第一个值开始找,如果找到一个值代表true,那么就返回这个值
2.JS中0、""、false、null、undefined、NaN均表示false;

6.JavaScrip流程控制

JS中同Java一样存在流程控制语句,用法一样:
1.分支:
(1)if语句
(2)switch语句
2.循环:
(1)while语句
(2)do-while语句
(3)for循环
3.break/continue语句
4.三目表达式

7.JavaScrip函数

1.函数是一组可以随时运行的代码语句,此处大家可以理解为方法;
2.函数作用:可以避免载入时执行,可以被多次调用;

function 函数名( [参数列表] ){
JS代码
[return 返回值;]
}

1.JS中函数的定义使用function关键字,这一点是和Java不一样的地方,同时允许函数具备返回值,返回值采用关键字return,如果函数没有定义返回值,接收到的将是一个undefined;

function $action(){
	console.debug(“函数定义测试”);
}
var x = $action();   //使用函数名完成函数调用,并定义一个变量接收返回值
console.debug(x);    //输出undefined,因为函数中并没有定义返回值

2.上述代码中我们可以看到直接使用函数名即可完成针对函数的调用;
3.针对带参数的函数,个数与类型对它没有任何影响(都可以调用)。只要调用的函数名称是对的(函数名称不可以重名),但推荐如何定义就如何使用;
JS中函数传参不需要声明;

(1)全局变量和局部变量

var msg="显示全局变量";
function show(){
	msg="隐式全局变量";
}
show();
console.debug(msg);  //隐式全局变量,需要先调用方法才能访问该变量

var msg2="全局变量";
function show2(){
	var msg2="局部变量";	
}
show2();
console.debug(msg2);//全局变量

(2)匿名函数语法

匿名函数顾名思义就是一个没有定义名称的函数:

function (参数列表){
	JS代码
	[return 返回值;]
}
var action = function(){
	console.debug(“前方高能,请非战斗人员迅速撤离”);
}
action();

8.JavaScrip对象

1.本地对象就是 ECMA-262 定义的类(引用类型),相当于Java中类的概念;
2.这些引用类型在运行过程中需要通过new来创建所需的实例;
3.包括: Object、Boolean、Number、Date、String、Array等,重点掌握Date、String和Array对象;

(1)Date(日期对象)

//1.创建一个对象
var date = new Date();
//2.给这个对象添加方法
date.dateFormat = function() {
	var d = new Date();
	var year = d.getFullYear();
	var month = d.getMonth() + 1; //返回的月份是从0开始11结束
	var day2 = d.getDate(); //月中的天数是从1到31
	var hour = d.getHours(); //取值范围0到23
	var minute = d.getMinutes(); //取值范围是0到59
	var second = d.getSeconds(); //取值范围是0到59
	//yyyy/MM/mm HH:mm:ss
	console.debug(year + '/' + month + '/' + day2);
}

(2)String(字符串对象)

var str = "a.b.c.D.e.F";
console.debug(str.split('.'));
console.debug(str.toLowerCase());
console.debug(str.toUpperCase());
需求:截取字符串
var str="01234567"; //主要是为了能和下标相对应
console.debug(str5.substr(3));//34567
console.debug(str5.substring(3));//34567			
console.debug(str5.substr(3,2));//34
console.debug(str5.substring(3, 2));
需求:连接字符串
var str1 = "hello";
var str2 = "world";
var str3 = str1.concat(str2);
console.debug(str3);//helloworld
需求:获取指定位置的unicode值,将一个unicode值转换为字符
var str1 = "abcde";
console.debug(str1.charCodeAt(0));//取到对应索引处的unicode码
console.debug(String.fromCharCode(65));

(3)Array(数组对象)

//1.声明数组
var arr = new Array();
var arr2 = new Array(3);
var arr3 = new Array(1, '2', 3);
console.debug(arr);
console.debug(arr2);
console.debug(arr3);
//1.1针对空数组赋值
arr[0] = 1;
arr[1] = 'aaa';
arr[2] = 2;
console.debug(arr);

//1.2针对固定长度的数组赋值,可以超出吗
arr2[0] = 1;
arr2[1] = 'aaa';
arr2[2] = 2;
arr2[3] = 'hahaha';
console.debug(arr2); //Array [ 1, "aaa", 2, "hahaha" ]
console.debug(arr2.length); //4

//1.3 简化声明
var arr4 = ['aa', 'asdfew', 1, 2, 'sdfasdfa'];
console.debug(arr4);
需求:数组转换为字符串,且使用指定内容分隔,倒序
console.debug(arr4.join());
console.debug(arr4.join('¥'));
console.debug(arr4.reverse());
需求:针对数组的增加、删除的一些操作
//1针对数组开头的一些操作
console.debug(arr4.shift()); //sdfasdfa
console.debug(arr4); //删除掉了'aa'
console.debug(arr4.unshift('aaa')); //5
console.debug(arr4);

//2针对数组结尾的操作:pop删除和push添加
console.debug(arr4.pop()); //sdfasdfa
console.debug(arr4); 
console.debug(arr4.push('aaaaa'));
console.debug(arr4);

//3针对数组中间部分的操作  splice
//splice演示删除
arr4.splice(0);
console.debug(arr4); //清空数组
//演示了添加
arr4.splice(0, 0, "aaa", "asdfew", 1, 2, "aaaaa"); //重新将数组添加回来
console.debug(arr4);
//演示了替换
arr4.splice(1, 1, 34);
console.debug(arr4);
arr4.splice(1, 2, 21);
console.debug(arr4);
需求:遍历数组
//1  for循环来进行遍历  第一种方式  推荐使用
for(var i = 0; i < arr4.length; i++) {
	console.debug(arr4[i]);
}
//2  for...in来遍历数组
//此类方式遍历的是数组中的下标  适合遍历json、对象
for(var i in arr4) {
	console.debug(i);//输出的是数组的下标
	console.debug(arr4[i]); //
}

(4)系统函数

1.定义:全局属性和函数可用于所有内建的 JavaScript 对象。
2.系统函数就是JS给我们准备或者说封装好的一些函数(方法),实现了很多功能。让咱们可以直接使用。
系统函数我们记住重要的几个,其它的到api里去找即可

需求:编码和解码:
//encodeURI和decodeURI搭配
var url = "http://www.baidu.com?arg=百度";
console.debug(encodeURI(url));
console.debug(decodeURI("www.baidu.com?arg=%E7%99%BE%E5%BA%A6"));
//使用encodeURICommponent和decodeURICommponent
console.debug(encodeURIComponent(url));
console.debug(decodeURIComponent('www.baidu.com%3Farg%3D%E7%99%BE%E5%BA%A6'));
需求:eval函数:
//eval函数的使用:计算JS的字符串,并将其作为脚本执行
var a = "console.debug('eval函数实例')";
console.debug(a); //输出:console.debug('eval函数实例')
eval(a);//字符串就会当做函数使用
需求:将字符串转换为number类型:
//parseInt()函数的使用
var b = '123';
console.debug(typeof b);               //string
console.debug(typeof(parseInt(b))); //number
b = '123aaa';                  //当遇到不能解析的内容的时候,parseInt会直接从该处放弃
console.debug(parseInt(b));           //123
console.debug(typeof(parseInt(b))); //number
			
var c='aa123aa';
console.debug(parseInt(c));//NaN
console.debug(typeof(parseInt(c)));//number

(5)Math(数学计算对象)

需求:绝对值、最大值和最小值
console.debug(Math.abs(1));
console.debug(Math.abs(-1));
console.debug(Math.max(1, 2, 3, 4, 5, -1)); //5
console.debug(Math.min(1, 2, 3, 4, 5, -1)); //-1
需求:获取随机数
console.debug(Math.random());
for(var i = 0; i < 10; i++) {
	console.debug(Math.random());
}
console.debug("---------");
需求:当前我要取出1-10的随机数    取整((随机数*10))+1
for(var i = 0; i < 10; i++) {
	console.debug(parseInt(Math.random() * 10) + 1);
}
规律公式:取整(随机数*取值范围)+起始值
需求:获取1-100之间的随机数
for(var i = 0; i < 100; i++) {
	console.debug(parseInt(Math.random() * 100) + 1);
}
需求:舍入取整
//1向上舍入  举例:假设数字为5.1  向上舍入的结果为6
//使用场景  分页  假设现在有11组数据,每两条数据分为一个部分,请问会有多少个部分?
console.debug(Math.ceil(5.1));  //6
console.debug(Math.ceil(11/2));//6
			
//2向下舍入  举例:假设数字为5.6  向下舍入的结果为5
console.debug(Math.floor(5.6));  //5
			
//3四舍五入
console.debug(Math.round(5.5));//6
console.debug(Math.round(5.4));//5
面试题:
Math.round(11.5)的结果是多少?;//12
Math.round(-11.5)的结果是多少?;//-11

注:Math类中提供了三个与取整有关的方法:ceil,floor,round,这些方法的作用于它们的英文名称的含义相对应,例如:ceil的英文意义是天花板,该方法就表示向上取整,Math.ceil(11.3)的结果为12,Math.ceil(-11.6)的结果为-11;floor的英文是地板,该方法就表示向下取整,Math.floor(11.6)的结果是11,Math.floor(-11.4)的结果-12;最难掌握的是round方法,他表示“四舍五入”,算法为Math.floor(x+0.5),即将原来的数字加上0.5后再向下取整,所以,Math.round(11.5)的结果是12,Math.round(-11.5)的结果为-11

(6)自定义类

1.在ES5中没有像Java中一样专门的class关键字定义对象,JavaScript中创建类其实和创建函数【函数也是一种对象】是一样的语法:

function 名称(){}
/*通过new对象来添加方法*/
	function Foo(){};
	var f = new Foo();
	f.sar = function(){
		console.debug(20);
	}
	console.debug(f);
	/*调用方法*/
	f.sar();
	/*使用prtotype属性*/
	Foo.prototype.say = function(){
		console.debug(11);
	}
	var f = new Foo();
	f.say();

2.一种语法代表了多重含义,在JavaScript中若想清楚的区分定义的到底是方法还是类,那么建议方法名称小写,创建类名称首字母大写;
3.对象中定义方法,有下列形式:
(1)在对象中使用this关键字;
(2)通过new的实例化对象添加方法;
通过prototype添加方法;

9.BOM

1.BOM是browser object model的缩写,简称浏览器对象模型,这个BOM有如下内容:
(1)打开一个窗口就是一个window对象;
(2)窗口里面使用location表示地址栏;
(3)窗口的历史记录使用history来表示;
(4)浏览器的信息使用navigator来表示;
(5)窗口里面的内容使用document来表示;
2.这里重点讲下window对象和location对象;

(1)window

1.window对象是BOM中的顶级对象,默认可以省略(即调用其函数时可以省略window.);
2.window对象是相对于web浏览器而言的,依赖于浏览器,在浏览器中全局对象指的就是window对象;
3.window对象可以获取其他BOM对象;
注意:全局函数和window对象的函数不一样。全局函数不属于任何一个内置对象;

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页