第五次网页前端培训笔记——JavaScript

头秃小程

已于 2022-02-11 16:57:23 修改

阅读量186

点赞数

分类专栏：网页前端文章标签：前端 javascript 开发语言

于 2022-02-08 19:15:59 首次发布

本文链接：https://blog.csdn.net/Maruko_428/article/details/122824688

版权

网页前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.JS的基本使用

1. 简介

JavaScript是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。它的主要目的是，验证发往服务器端的数据、增加Web互动、加强用户体验度等

2.JavaScript的组成

Javascript由ECMAscript、DOM和BOM组成

ECMAScript定义的只是这门语言的基础，与Web浏览器没有依赖关系，而在基础语法上可以构建更完善的脚本语言。JavaScript的运行需要一定的环境，脱离了环境JavaScript代码是不能运行的，JavaScript只能够寄生在某个具体的环境中才能够工作。JavaScript 运行环境一般都由宿主环境和执行期环境共同构成，其中宿主环境是由外壳程序生成的，如Web浏览器就是一个外壳程序，它提供了一个可控制浏览器窗口的宿主环境。执行期环境则由嵌入到外壳程序中的JavaScript引擎(或称为JavaScript解释器）生成，在这个环境中JavaScript能够生成内置静态对象，初始化执行环境等。
Web浏览器自定义的DOM组件，以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象，是我们用传统的方法(Javascript)获得的对象DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
前面的DOM是为了操作浏览器中的文档，而为了控制浏览器的行为和操作，浏览器还提供了BOM(浏览器对象模型)。

ECMAscript（基础语法) 描述了该语言的语法和基本对象
DOM（文档对象模型）描述了处理网页的方法和接口
BOM（浏览器对象模型）描述了与浏览器进行交互的方法和接口

2.基本用法

JS需要和HTML一起使用才有效果，我们可以通过直接或间接的方式将JS代码嵌入在HTML页面中。

行内JS :写在标签内部的js代码

<button onclick="alert( 'you clicked hered! ! ! ' )">click here</button>

内部JS:定义在script标签内部的js代码（建议放在body标签最后）

我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。由于页面的加载方式是从上往下依次加载的，而这个对我们放置的js代码运行是有影响的。
放在<head>部分，最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
放在<body>部分，JavaScript代码在网页读取到该语句的时候就会执行。

<script type= "text/javascript" charset="utf-8">
    alert( 'this is inner js code ')
</script>

外部JS:单独的js文件，在HTML 中通过script标签引入

hello.js

alert( 'this is a outter js document ' );

hello.html

<! --在需要使用js的html页面中引入-->
<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>

注:如果script标签设置了src属性，则在script双标签之间的JS代码不会生效，外部文件中不建议用alert建议用console.log

3.基本语法

1.变量

变量即一个带名字的用来存储数据的内存空间，数据可以存储到变量中，也可以从变量中取出数据。

1.变量的声明

JavaScript是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。

变量声明和赋值：

//先声明再赋值
var a ;
a = 10;
//声明同时赋值
var b = 20 ;

2.变量的注意点

如果变量只声明而末赋值，则显示undefined

var box;
console.log(box);

如果变量末声明就使用，则会报错

console.log(box2)

可以使用var同时声明多个变量

var a,b,c=10;
console.log(a,b,c);

结果显示：undefinded 、undefinded 、10

若使用var重新声明—个已存在的变量，是无效的

var box=10;
var box;

若使用var重新声明—个已存在的变量并赋值，是覆盖

var box=10;
var box=25;

JavaScript是一种动态的、弱类型语言，可以声明任意数据类型的变量

var box='hello world';
box =10;

结束要打印结果

console.log（）

3.变量名提升

变量提升只对var命令声明的变量有效，如果变量不是用var命令声明的，就不会发生变量提升

2.数据类型

数值(Number) :整数和小数（比如1和3.14)

字符串(String):字符组成的文本(比如"Hello World ")

布尔值（Boolean) : true(真)和false(假)两个特

定值Undefined :表示“未定义"或不存在，即此处目前没有任何值

Null :表示空缺，即此处应该有一个值，但目前为空

对象(object)(引用)︰各种值组成的集合
1)、对象(object) {name : " zhangsan" , age: "18"}

2)、数组(array) [ 1,2,3]

3)、函数(function) function test() {}

1.underfined

变量只声明未赋值

var a;
console.log(a)

当定义函数需要形参，调用函数未传递实参时（定义函数使用function）

function fn01(str){
	console.log(str);
}
fn01()

函数没有返回值

function fn02(){
	console.log("fn02...");
}
var b=fn02();
console.log(b);

2.null

null类型是只有一个值的数据类型，即特殊的值null，它表示空值，即该处的值现在为空，它表示一个空对象引用

使用Null类型值时注意以下几点:

1.使用typeof操作符测试null返回object字符串

typeof操作符：判断变量的类型

2.undefined派生自null，所以等值比较返回值是true。未初始化的变量和赋值为null的变量相等

3.类型转换

1.自动类型转换

转字符串:所有的值转字符串都是加引号
转布尔型:有值为true，无值为false(0为false，非o为true)
转数值型:空值是0，非空的数值型字符串能转换，非数值字符串转换为NaN

2.函数转换

JavaScript提供了parselnt() 和 parseFloat()两个全局转换函数

前者把值转换成整数，后者把值转换成浮点数。只有对string类型调用这些方法，这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)

parseInt()：（转整数型）

在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符

<script type="text/javascript">
			console.log(parseInt("123abc"));//123
			console.log(parseInt("abc123"));//NaN
			console.log(parseInt("123.4abc"));//123
			console.log(parseInt("123"));//123
		
			var a="1";
			var b="2";
			console.log(a+b);//12
			console.log(a+parseInt(b));//3
</script>

parseFloat()：（转浮点型）

该方法与parseInt()方法的处理方式相似，从位置0开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换成数字。不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的，parseFloat()方法会把这个小数点之前的字符串转换成数字

<script type="text/javascript">		
			console.log(parseFloat("123abc"));//123
			console.log(parseFloat("abc123"));//NaN
			console.log(parseFloat("123.4abc"));//123.4
			console.log(parseFloat("123.4.5"));//123.4
</script>

3.显示转换

几乎每个数对象都提供了toString()函数将内容转换为字符串形式，其中Number提供的 toString()函数可以将数字转换为字符串

Number还提供了toFixed()函数将根据小数点后指定位数将数字转为字符串，四舍五入

注：值不能为null

<script type="text/javascript">
					var aa=10;
					console.log(aa);
					console.log(aa.toString());
					var cc=1.346;
					console.log(cc.toFixed(2));//1.35
</script>

JavaScript为Number、Boolean、String对象提供了构造方法，用于强制转换其他类型的数据。此时操作的是整个数据，而不是部分

注：可以转换null

<script type="text/javascript">
		// number 
		var q="1";
        var w="a";
		var e="123abc";
		var r="123.4";
		var t="123.4abc ";
		console.log(Number(q));
		console.log(Number(w));
		console.log(Number(e));
		console.log(Number(r));
		console.log(Number(t));
		
		// Boolean
		console.log(Boolean("a"));
		console.log(Boolean(0));
		console.log(Boolean("1"));
		console.log(Boolean(null));
		
		// String
		console.log(String(10));
		console.log(String("null"));
		
</script>