JavaScript（JS）简介

时间：2023-03-08 15:15:40
JavaScript（JS）简介

历史背景介绍

(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript。

JavaScript的组成

  • ECMAScript :定义了js的语法标准： 包含变量 、表达式、运算符、函数、if语句 for循环 while循环、内置的函数，对象 (封装 继承 多态) 基于对象的语言.使用对象

  • 文档对象模型（DOM） Document object model :操作网页上元素的API。比如让盒子显示隐藏、变色、动画 form表单验证

  • 浏览器对象模型（BOM） Broswer object model:操作浏览器部分功能的API。比如刷新页面、前进后退、让浏览器自动滚动

JavaScript基础

js的引入方式

<!--内接式-->

<script type="text/javascript">

</script>

<!--外接式-->

<script type="text/javascript" src="../index.js">

<!--相当于引入了某个模块-->

</script>

　　

注释

单行注释的快捷键ctrl+/.多行注释的快捷键是ctrl+shift+/

　　

调试语句

alert(''); 弹出警告框

console.log('');  控制台输出

　　

变量的声明

在js中使用var关键字 进行变量的声明,注意 分号作为一句代码的结束符

var i=100

　　

  • 定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。

  • 变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。

  • 一行可以声明多个变量.并且可以是不同类型
  • 变量命名,首字符只能是字母,下划线,$美元符 三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写，x与X是两个变量
var colors = ['red','green','yellow'],name_k='w',age=20;

var $x='w'

　　

  • 变量要先定义，才能使用。比如，我们不设置变量，直接输出：
<script type="text/javascript">

console.log(a);

</script>

　　控制台将会报错：

JavaScript（JS）简介

  • 变量不能使用JS保留字

JS保留字

JavaScript（JS）简介

JS基本数据类型

数值类型:number

如果一个变量中，存放了数字，那么这个变量就是数值型的，不区分整型数值和浮点型数值;

<script type="text/javascript">

			var a = 100; //定义了一个变量a，并且赋值100

			console.log(typeof a); //输出a变量的类型 使用typeof函数 检测变量a的数据类型number

			//特殊情况

			var b = 5 / 0;

			console.log(b); //Infinity 无限大

			console.log(typeof b); //number 类型

			var num = .1;

			console.log(num); //0.1

			console.log(typeof num); //number 类型

			var num = 1.3 ;

			console.log(num) ;//1.3

			console.log(typeof num); //number 类型

			var num = 10.;

			console.log(num) ;//10.0

			console.log(typeof num); //number 类型

		</script>
字符串类型（string）:

是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；JavaScript中没有字符类型；常用特殊字符在字符串中的表达；
字符串中部分特殊字符必须加上右划线\；常用的转义字符 \n:换行 \':单引号 \":双引号 \\:右划线

	<script type="text/javascript">

			var a = "abcde";

			var b = "路飞";

			var c = "123123";

			var d = "哈哈哈哈哈";

			var e = ""; //空字符串

			var f = '\n\\';//回车+\

			console.log(f);

		</script>

连字符和+号的区别

键盘上的+可能是连字符，也可能是数字的加号。如下：

console.log("我" + "爱" + "你");   //连字符，把三个独立的汉字，连接在一起了

console.log("我+爱+你");           //原样输出

console.log(1+2+3);             //输出6

总结：如果加号两边都是数值，此时是加。否则，就是连字符（用来连接字符串）

布尔类型：boolean

boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0

	<script type="text/javascript">

			var isShow = false;

			console.log(typeof isShow);//boolean

			console.log(isShow);//false

		</script>

　

空对象：null
<script type="text/javascript">

			var c1 = null; //空对象. object

			console.log(typeof c1);

		</script>

　　

未定义：undefined
<script type="text/javascript">

			var d1;

			//表示变量未定义

			console.log(d1);//undefined

		</script> 
NaN：

NaN 即 Not a Number ，不是一个数字。 在 JavaScript 中，整数和浮点数都统称为 Number 类型 。除此之外，Number 类型还有一个很特殊的值，即 NaN 。它是 Number 对象上的一个静态属性

100 - '2a' ; // NaN

'100' / '20a'; // NaN

'abc' - 3   // NaN

parseInt('abc')  // NaN

parseFloat('abc') // NaN

Number('abc')    // NaN

数字+字符

5 + 4 + '6' = '96';

1 + '2' + 3 =  '123'

　　

运算符

赋值运算符

以var x = 12,y=5来演示示例

JavaScript（JS）简介

JavaScript（JS）简介

逻辑运算符：

&&    ||  ！

算术运算符：

+ - * / % ++ --

++i:先计算后赋值

i++：先赋值后计算
		<script type="text/javascript">

			var x=1,y=5;

			x=y++;

			console.log(x,y);//5,6

			x=++y;

			console.log(x,y);//7,7

			x=y--;

			console.log(x,y);//7,6

			x=--y;

			console.log(x,y);//5,5

		</script>

　　

数据类型转换

将number类型转换成string类型

隐式转换

	<script type="text/javascript">

			var n1 = 1234;

			var n2 = '1234';

			var n3 = n1 + n2;

			// 隐式转换

			console.log(typeof n3);

			console.log(n3);//'12341234'

		</script>

强制转换

<script type="text/javascript">

// 强制类型转换String(),toString()

			var n1 = 1234;

			var n2 = String(n1);

			console.log(typeof n2);//string

			var n3 = n1.toString();

			console.log(typeof n3);//string

			console.log(n3);//'1234'

		</script>

　　

将string类型转换成number类型

<script type="text/javascript">

			var stringNum = '789.123wadjhkd';

			var num2 = Number(stringNum);

			console.log(num2);//NaN  Not a Number 但是一个number类型

               //属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据

			// parseInt()可以解析一个字符串 并且返回一个整数

			console.log(parseInt(stringNum)); //789

			console.log(parseFloat(stringNum));//789.123

		</script>

　　

任何的数据类型都可以转换为boolean类型

		<script type="text/javascript">

			var b1 = '123'; //true

			var b2 = 0; //false

			var b3 = -123 //true

			var b4 = Infinity; //true

			var b5 = NaN; //false

			var b6; //false

			var b7 = null; //false

			//使用Boolean(变量) 来查看当前变量的真假

			console.log( Boolean(b1));

			console.log( Boolean(b2));

			console.log(Boolean(b3));

			console.log( Boolean(b4));

			console.log( Boolean(b5));

			console.log( Boolean(b6));

			console.log(Boolean(b7));

		</script>

	</body>

　　

流程控制

if

	<script type="text/javascript">

			var age = 20;

			if(age > 18) {

				//{}相当于作用域

				console.log('可以喝酒');

			}

			alert('alex'); //下面的代码照样执行

		</script>

　　

if-else

	<script type="text/javascript">

			var age = 20;

			if(age > 18) {

				//{}相当于作用域

				console.log('可以去喝酒');

			} else {

				console.log('可以去喝水');

			}

			alert('alex'); //下面的代码照样执行

		</script>

　　

if-else if -else

<script type="text/javascript">

			var age = 18;

			if(age == 18) {

				//{}相当于作用域

				console.log('已经成人');

			} else if(age == 30) {

				console.log('该娶媳妇了！！');

			} else {

				console.log('随便你了')

			}

			alert('alex'); //下面的代码照样执行

		</script>

　　

逻辑与&&、 逻辑或||

//1.模拟  如果总分 >400 并且数学成绩 >89分 被清华大学录入

			//逻辑与&& 两个条件都成立的时候 才成立

			var sum = 420,

				math = 99;

			if(sum > 400 && math > 90) {

				console.log('清华大学录入成功')

			} else {

				alert('高考失利')

			}

			//2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入

			//逻辑或  只有有一个条件成立的时候 才成立

			var sum = 550,

				english = 80;

			if(sum > 500 || english > 85) {

				alert('被复旦大学录入')

			} else {

				alert('高考又失利了')

			}

　　

switch 语句

<script type="text/javascript">

			var gameScore = 'good';

			switch(gameScore) {

				//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止

				case 'good':

					console.log('玩的很好')

					//switch语句 case表示一个条件，满足这个条件就会输出，直到遇到break跳出，如果你的break不写，那么程序会遇到下一个break停止。这个就是‘case穿透’

					//break; //不加break，程序执行到case better，会输出‘玩的老牛逼了’

				case 'better':

					console.log('玩的老牛逼了')

					break;

				case 'best':

					console.log('恭喜你 吃鸡成功')

					break; 

				default:

					console.log('很遗憾')

			}

			//注意：switch相当于if语句 但是玩switch的小心case穿透

		</script>

　　

while循环

<script type="text/javascript">

			// 例子：打印 1~9之间的数

			var i = 1; //初始化循环变量

			while(i <= 9) { //判断循环条件

				console.log(i);

				i = i + 1; //更新循环条件

			}

		</script>

　　

for循环

for循环遍历列表是最常用的对数据的操作，在js中希望大家熟练使用for循环的书写方式

<script type="text/javascript">

			// 例子：输入1~100之间所有数之和

			var i, sum; //初始化变量

			for(i = 1, sum = 0; i <= 100; i++) { //for

				sum += i;

			}

			console.log(sum);

		</script>

　　

for循环嵌套的练习

<script type="text/javascript">

			// 例子：1.在浏览器中输出直角三角形

			//*

			//**

			//***

			//****

			//*****

			//******

			var i, j; //初始化变量

			for(i = 1; i <= 6; i++) { //控制的行数

				for(j = 1; j <= i; j++) {

					document.write("*"); // 往浏览器文档中写*

				}

				document.write("<br>"); // 往浏览器文档中写<br>

			}

		</script>

　　

for循环嵌套的练习二

实现乘法口诀表

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			*{

				margin: 0;

				padding: 0;

			}

			div{

				margin: 10px;

			}

			span{

				margin: 5px;

				display: inline-block;

				border: red 2px solid;

				width: 60px;

				height: 30px;

				line-height: 30px;

				text-align: center;

				font-size: 14px;

			}

		</style>

	</head>

	<body>

		<div id='box'></div>

		<script type="text/javascript">

			var oBox = document.getElementById('box');

			for (var i=1;i<10;i++){

				for(j=1; j<=i;j++){

					oBox.innerHTML += "<span>"+i+"*"+j+"="+i*j+"</span>"

				}

				oBox.innerHTML +="<br>"

			}

		</script>

	</body>

</html>

　　

JavaScript（JS）简介

　　

数组Array

//创建方式一

var colors = ['red','green','yellow'];

//创建方式二

var colors = new Array();

//通过下标进行赋值

colors[0] = 'red';

colors[1] = 'green';

colors[2] = 'yellow';

console.log(colors);

　　

JavaScript（JS）简介

			//数组的合并 concat()

			var north = ['北京', '山东', '天津'];

			var south = ['东莞', '深圳', '上海'];

			var newCity = north.concat(south)

			console.log(newCity) //['北京', '山东', '天津','东莞', '深圳', '上海']

			//join() 将数组中元素使用指定的字符串连接起来， 它会形成一个新的字符串

			var score = [98, 78, 76, 100, 101];

			var str = score.join("|")

			console.log(str); //"98|78|76|100|0"

			//slice(start, end); 切片，返回数组的一段记录， 顾头不顾尾

			var arr = ['张三', '李四', '王文', '赵六'];

			var newArr = arr.slice(1,3);

			console.log(newArr); //["李四", "王文"]

			//pop 移除数组的最后一个元素

			var arr = ['张三', '李四', '王文', '赵六'];

			arr.pop();

			console.log(arr); //["张三", "李四"，"王文"]

			//push() 向数组最后添加一个元素

			var arr = ['张三', '李四', '王文', '赵六'];

			arr.push('小马哥');

			console.log(arr); //["张三", "李四"，"王文"，"赵六"，"小马哥"]

			//shift() 移除数组第一个元素

			var arr = ['张三', '李四', '王文', '赵六'];

			arr.shift();

			console.log(arr); //["李四"，"王文"，"赵六"]

			//unshift() 向数组开头添加一个元素

			var arr = ['张三', '李四', '王文', '赵六'];

			arr.unshift('小马哥');

			console.log(arr); //["小马哥","张三", "李四"，"王文"，"赵六"]

			//reverse() 翻转数组

			var names = ['alex', 'xiaoma', 'tanhuang', 'angle'];

			//反转数组

			names.reverse();

			console.log(names);

			//sort对数组排序

			var names = ['alex', 'xiaoma', 'tanhuang', 'abngel'];

			names.sort();

			console.log(names); // ["alex", "angle", "tanhuang", "xiaoma"]

			//判断是否为数组： isArray()

			//布尔类型值 = Array.isArray(被检测的值);

　　

字符串string

JavaScript（JS）简介

	<script type="text/javascript">

			//chartAt() 返回指定索引的位置的字符

			var str = 'alex';

			var charset = str.charAt(3);

			console.log(charset); //x

			//concat 返回字符串值， 表示两个或多个字符串的拼接

			var str1 = 'al';

			var str2 = 'ex';

			console.log(str1.concat(str2, str2)); //alexex

			//replace(a, b) 将字符串a替换成字符串b

			var a = '1234567755';

			var newStr = a.replace("456", "****");

			console.log(newStr); //123****7755

			//indexof() 查找字符的下标， 如果找到返回字符串的下标， 找不到则返回 - 1。 跟seach() 方法用法一样

			var str = 'alex';

			console.log(str.indexOf('e')); //2

			console.log(str.indexOf('p')); //-1

			//slice(start， end) 左闭右开 分割字符串

			var str = '小马哥';

			console.log(str.slice(1, 2)); //马

			//split('a', 1) 以字符串a分割字符串， 并返回新的数组。 如果第二个参数没写， 表示返回整个数组， 如果定义了个数， 则返回数组的最大长度

			var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';

			console.log(str.split('a')); //["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]

			//substr(statr, end) 左闭右开

			var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';

			console.log(str.substr(0, 4)); //我的天呢

			//toLowerCase() 转小写

			var str = 'XIAOMAGE';

			console.log(str.toLowerCase()); //xiaomage

			//toUpperCase() 转大写

			var str = 'xiaomage';

			console.log(str.toUpperCase()); //XIAOMAGE

			//特别：

			//1.将number类型转换成字符串类型

			var num = 132.32522;

			var numStr = num.toString()

			console.log(typeof numStr)

			//四舍五入

			var newNum = num.toFixed(2)

			console.log(newNum)

		</script>

　　

字符串练习题：

对“hello world”进行翻转处理 要求变为："dlorw olleh"

<script type="text/javascript">

			var s = 'hello world';

			var arr = s.split('');

			console.log(arr.reverse().join("")) //dlrow olleh

</script>

　　

Math内置对象

JavaScript（JS）简介

<script type="text/javascript">

			//Math.ceil() 向上取整，'天花板函数'

			var x = 1.234;

			//天花板函数  表示大于等于 x，并且与它最接近的整数是2

			var a = Math.ceil(x);

			console.log(a); //2

			//Math.floor 向下取整，'地板函数'

			var x = 1.234;

			// 小于等于 x，并且与它最接近的整数 1

			var b = Math.floor(x);

			console.log(b); //1

			//求两个数的最大值和最小值

			//求 两个数的最大值 最小值

			console.log(Math.max(2, 5)); //5

			console.log(Math.min(2, 5)); //2

			//随机数 Math.random()

			var ran = Math.random();

			console.log(ran);//[0, 1)

			//如果让你取100-200之间的随机数，怎么做？

			//背过公式：min - max之间的随机数： min+Math.random()*(max-min);

			var ran = 100 + Math.random()*(200-100);

			console.log(ran);//[100 ,200)

		</script>

　　

Date日期对象

创建日期对象只有构造函数一种方式，使用new关键字

//创建了一个date对象

var myDate = new Date();

JavaScript（JS）简介

<script type="text/javascript">

			//创建了一个date对象

			var myDate = new Date();

			//返回本地时间

			console.log(new Date().toLocaleString());//2018/11/26 下午10:33:41

			console.log(myDate.getFullYear().toString()+(myDate.getMonth()+1).toString()+myDate.getDate().toString());//20181126

		</script>

　　

JSON

概念简介

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

在JSON中，有两种结构：对象和数组。

                       //对象

			var packJSON = {

				"name": "alex",

				"password": "123"

			};

			//一个对象以“{”开始，“}”结束，“key/value”之间运用 “,”分隔。

			//数组

			var packJSON = [{

				"name": "alex",

				"password": "123"

			}, {

				"name": "wusir",

				"password": "456"

			}];

			//数组是值的有序集合。一个数组以“[”开始，“]”结束。值之间运用 “,”分隔。

　　

JSON对象和JSON字符串转换

在数据传输过程中，JSON是以字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如：

<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>

		<script type="text/javascript">

			//JSON字符串:

			var jsonStr = '{"name":"alex", "password":"123"}';

			//JSON对象：

			var jsonObj = {

				"name": "alex",

				"password": "123"

			};

			//JSON字符串转换JSON对象

			var jsonObject = jQuery.parseJSON(jsonStr);

			console.log(jsonObject);

			//JSON对象转化JSON字符串

			var jsonstr = JSON.stringify(jsonObject);

			console.log(jsonstr);

　　

遍历JSON对象和JSON数组
//遍历JSON对象代码如下：

			var packAlex = {

				"name": "alex",

				"password": "123"

			};

			for(var k in packAlex) { //遍历packAlex 对象的每个key/value对,k为key

				alert(k + " " + packAlex[k]);

			}

			//遍历JSON数组代码如下

			var packAlex = [{

				"name": "alex",

				"password": "123"

			}, {

				"name": "wusir",

				"password": "456"

			}];

			for(var i in packAlex) { //遍历packJson 数组时，i为索引

				alert(packAlex[i].name + " " + packAlex[i].password);

			}

　　

函数

函数：就是把将一些语句进行封装，然后通过调用的形式，执行这些语句。

函数的作用：

  • 解决大量的重复性的语句
  • 简化编程，让编程模块化
# python 中声明函数

def add(x,y):

    return x+y

# 调用函数

print(add(1,2))

//js中声明函数

function add(x,y){

    return x+y;

}

//js中调用函数

console.log(add(1,2));

解释如下：

  • function：是一个关键字。中文是“函数”、“功能”。
  • 函数名字：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。
  • 参数：后面有一对小括号，里面是放参数用的。
  • 大括号里面，是这个函数的语句

　

对象Object

1.使用Object或对象字面量创建对象

2.工厂模式创建对象

3.构造函数模式创建对象

4.原型模式创建对象

使用Object或字面量方式创建对象
//                  1.原始模式，对象字面量方式

			var person = {

				name: 'alex',

				age: 18,

				sayName: function() {

					alert(this.name);

				}

			};

			console.log(person);

			//1.原始模式，Object构造函数方式

			var person1 = new Object();

			person1.name = '小马哥';

			person1.age = 28;

			person1.sayName = function() {

				alert(this.name);

			};

			console.log(person1);

　当我们要创建批量的person1、person2……时，每次都要敲很多代码

工厂模式

工厂模式就是批量化生产，简单调用就可以进入造人模式, 指定姓名年龄就可以造一堆小宝宝啦，解放双手。但是由于是工厂暗箱操作的，所以你不能识别这个对象到底是什么类型、是人还是狗傻傻分不清（instanceof 测试为 Object）.

//2.工厂模式创建对象

			function createPerson(name, age) {

				var person = new Object();

				person.name = name;

				person.age = age;

				person.sayName = function() {

					alert(this.name);

				};

				return person;

			}

			var person1 = createPerson("easy1", 18);

			var person2 = createPerson("easy2", 20);

			console.log(person1);

			console.log(person2);

　　

构造函数模式创建对象
			//3.构造函数模式，为对象定义一个构造函数

			function Person(name, age) {

				this.name = name;

				this.age = age;

				this.sayName = function() {

					alert(this.name);

				};

			}

			function Fruit(name, color) {

				this.name = name;

				this.color = color;

				this.alertName = function() {

					alert(this.name)

				};

			}

			var p1 = new Person('Jack', 18); //创建一个p1对象

			var f1 = new Fruit('apple', 'red')

			//区分不同类型的对象

			alert(p1 instanceof Person); //true

			alert(p1 instanceof Fruit); //false

			alert(f1 instanceof Person); //false

			alert(f1 instanceof Fruit); //true

			console.log(p1);

			console.log(f1);

使用new操作符调用构造函数时，会经历

(1)创建一个新对象；

(2)将构造函数作用域赋给新对象（使this指向该新对象）；

(3)执行构造函数代码；

(4)返回新对象；4个阶段。　　

工厂模式解决了无法区分对象类型的尴尬,我们会发现Student和Fruit对象*有同样的方法，当我们进行调用的时候这无疑是内存的消耗.

原型的模式创建对象
//4.原型模式，直接定义prototype属性

			function Person() {}

			Person.prototype.name = 'Jack';

			Person.prototype.age = 18;

			Person.prototype.sayName = function() {

				alert(this.name);

			};

			//4.原型模式，字面量定义方式

			function Fruit() {}

			Person.prototype = {

				name: 'apple',

				color: 'red',

				sayName: function() {

					alert(this.name);

				}

			};

			var p1 = new Person(); //name='Jack'

			var p2 = new Person(); //name='Jack'

		    alert(p1.sayName == p2.sayName);  //true 二者共享同一函数

　　需要注意的是原型属性和方法的共享，即所有实例中都只是引用原型中的属性方法，任何一个地方产生的改动会引起其他实例的变化。

相关文章