JavaScript（JS）基础知识

1、JavaScript概述

1.1、什么是JavaScript (JS)

JavaScript是一种属于网络的脚步语言，已经被广泛用于Web应用开发，常用来为网页添加各种各样的动态功能。为用户提供更流畅的浏览效果。通常JavaScript脚步是通过嵌入在HTML中来实现自身的功能。

JavaScript是写给浏览器的一门脚步语言，目前所有的浏览器都支持JavaScript。

HTML称为超文本标记语言

CSS样式语言，专门用来负责HTML页面外观样式的。

JavaScript属于一门编程语言。

JavaScript也是一门面向对象的编程语言

livescript简介，百度百科

不止JavaScript
   ●JScript微软支持 IE
   ●VBScript微软

JavaScript的组成部分
  ●ECMAScript，它是JavaScript的标准
    ■ECMAScript欧洲计算机制造联合会
    ■指定脚步语言的规范，这个规范称为ECMAScript
    ■规范：语法、变量、关键字、对象。。。。。。

1.2、JavaScript的日常用途

1. 嵌入动态文本内容在HTML页面
2. 对浏览器事件做出响应
3. 读写HTML元素
4. 在数据被提交到服务器之前验证数据
5. 检测访客浏览器的信息
6. 控制cookie，包括创建和修改等

1.3、JavaScript的引入

在HTML文件中引入JavaScript有两种方式：
   ●一种是在HTML文档之间嵌入JavaScript脚本，称为内嵌式
   ●另一种是在链接外部JavaScript脚步文件，称为外联式

内嵌式，在HTML文档任意位置中，通过标签引入，如下：

<script type="text/javascript">
	//写javaScript代码
</script>

外联样式，在HTML文档中通过标签引入外部.js的文件，如下：

<script src="外部js文件的路径" type="text/javascript"></script>

script标签必须提供一个结束标签，否则引入的js无效

如果在script标签使用src引入了一个文件，那么当前script标签内的代码全部作废，不执行

2、JavaScript基础

线上学习网站：
https://www.w3school.com.cn

JavaScript语法规则：
   ●JS严格区分大小写
   ●语句需要使用分号结束
   ●JS中的命名规则，按照Java标识符来
   ●JS中的关键字不能用来作为标识符的名字

2.1、变量

JS是弱类型语言，Java是强制类型语言

弱类型语言：并不是没有数据类型，而是定义变量时不需要明确具体的数据类型。

JS变量定义，关键字 var ，语法格式：var 变量名=值;

//定义变量
var num=100;
//字符串可以使用单引号也可以使用双引号
var name="zhangsan";
var address='beijing';
var score=69.5;
var flag=true;
//使用alert方法，弹出一个对话框
alert(num);
alert(name);
alert(address);
alert(score);
alert(flag);

2.2、JS的数据类型

数字类型 number：表示任意数字

布尔类型 boolean：有两个值true和false

字符串类型string：字符串由双引号或单引号声明的，javaScript没有字符类型

引用类型object：表示JS中的引用类型
   ●空值null，只有一个专用值null，表示空，属于object类型
   ●值undefined实际上是从值null派生出来的，因此ECMAScript把它们定义为相等的。

未初始化undefied：当声明的变量未初始化时，该变量的默认值是undefied。

Java中通过instanceof关键字，来验证对象是否属于某个类或接口

在JS中使用typeof(变量)来显示变量的真实类型

//定义变量
var num=100;
//字符串可以使用单引号也可以使用双引号
var name="zhangsan";
var address='beijing';
var score=69.5;
var flag=true;
//使用alert方法，弹出一个对话框
alert(typeof(num));//number
alert(typeof(name));//string
alert(typeof(address));//string
alert(typeof(score));//number
alert(typeof(flag));//boolean

var n=null;
alert(typeof(n));
var u;
alert(typeof(u));
var date=newDate();
alert(typeof(date));
//值undefied实际上是从Null派生的，它俩相等
alert(undefined==null);

2.3、 JS的三种输出方式

window.alert("")，弹窗效果，window可以省略，弹出比较突然，用户体验不好，都是用来进行代码测试用

console系列，会在控制台(一般使用F12打开)输出内容，开发时经常使用

<script>
	console.log('控制台，日志信息');
	console.warn('控制台，警告信息');
	console.error('控制台，错误信息');
</script>

document.write()，直接在页面上输出内容

/**
*document指的是当前HTML文档
*write()就是把内容输出到页面
*/
document.write('<h3>这是要在页面上显示的内容</h3>');

2.4、运算符

算术运算符 | 赋值运算符 | 比较运算符 | 逻辑运算符

算术运算符：+，-，*，/，%，++，–

赋值运算符：=、+=、-=、*=，/=，%=

比较运算符：= =、!=、<、>、<=、>=、===

逻辑运算符：&&、||、!

/**
*==与===区别
*==运算符：只比较值是否相等，值相等就为true
*===运算符：比较值与数据类型是否相等，都相等就为true
*/
varnum='10';
console.log(num+"2")//102
console.log(num-2);//8
console.log(num*2)//20
if(10==num){
	console.log("相等");
}else{
	console.log("不相等");
}
var num2=10;
console.log(num==num2);
console.log(num===num2);

2.5、Boolean类型运算

JS中的布尔类型运算与Java不同：
   ●数字类型：非0就是true
   ●字符串类型：非""就是true，长度>0就是true
   ●0，null，undefined等理解为false

//布尔类型运算
var t1=0;
if(t1){
	console.log("真的");
}else{
	console.log("假的");
}
var t2="zhangsan";
if(t2){
	console.log("真的true");
}else{
	console.log("假的false");
}

2.6、JS的流程控制语句

JS的流程控制语句与java一样。

JS中也存在if，if-else ，switch，for，while，do/while等逻辑语句，与java使用方式一致。

<script>
	if(5<3){
		console.log("你真聪明");
	}else if(5>4){
		console.log("你聪明");
	}else{
		console.log("太笨了");
	}vari='1';
	switch(i){
		case 1:console.log(i);
		break;
		case 2:console.log(i);
		break;
		default:console.log(3);
	}
	for(var j=0;j<10;j++){
		console.log(j);
	}
</script>

2.7、函数

JS的函数：就是方法，是JS非常重要的组成部分，JS最常用的函数的定义方式有两种：

普通函数

//定义函数
//参数列表中定义参数时，不要写var，数据类型都是var来表示；而且函数不管有没有返回值，都不需要定义返回值类型
function函数名(参数列表){
	//方法体代码
	//如果有返回值就写return，不写就没有返回值
}

<script>
	functiondemo1(){
		document.write("这是JS中的一个普通函数<br/>");
	}
	//注意：函数只有被调用了才会执行
	/**
	*参数列表中的参数，不需要写var
	*@parama
	*@paramb
	*/
	functiondemo2(a,b){
		returna+b;
	}
	var sum=demo2(10,20);
	document.write("10+20="+(sum)+"<br/>");
	functiondemo3(){
		document.write("调用无参数的demo3方法<br/>");
	}functiondemo3(a,b){
		document.write("调用有参数的demo3方法<br/>");
	}
	//注意：JS函数没有重载的概念，如果方法名一致，后面的函数会把前面的给覆盖掉
	demo3();
	//注意：如果函数需要参数，我就是不传，不会报错，正常执行
	//注意：如果函数不需要参数，我就给它传参数，不会报错，正常执行
	demo1(1,2,3,34,4,5);
</script>

匿名函数

//定义匿名函数也就是没有名字的函数
function(参数列表){
	//js代码
}

匿名函数没有办法直接调用，一般情况下结合事件使用。

//匿名函数
var fn=function(a,b){
	console.log(a+b);
}
//通过变量名调用函数
fn(11,22);

2.8、事件

事件概述：
JavaScript使我们有能力创建动态页面，事件可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比如说，我们可以在用户点击某个按钮时产生一个click点击事件来触发某个函数。事件在HTML页面中定义的

事件三要素：
事件源：在页面中，用户可以操作的元素，称为事件源，例如：按钮、文本框、浏览器窗口

事件：用户怎么操作事件源，例如：鼠标（点击、双击、悬浮、离开），键盘操作（按下，弹起）

监听器：监听事件，并且在事件发生时，调用相应的方法来处理事件。
   ●为事件源安装监听器，鼠标监听器，键盘监听器
   ●只要有操作，就会被监听器捕获到，调用相应的处理方式
   ●处理方式：函数

事件通常和函数配合使用，这样就可以通过发生事件来驱动函数执行。

常用事件:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS事件</title>
	<script>
		function loadMethod(){
			alert('加载页面');
		}
		function clickMethod(){
			alert("你还真敢点我");
		}
		function changeMethod(){
			alert("你更改了内容");
		}
		function focusMethod(){
			alert("你获取了焦点");
		}
	</script>
</head>
<body onload="loadMethod()">
	<!--
		事件编写的步骤：
		1.为标签元素绑定事件监听器，添加相应的事件属性onXxx="函数名()"
		2.编写js函数
		3.访问浏览器页面，触发某个元素的事件
	-->
	<input type="button" value="点我试试" onclick="clickMethod();">
	<input type="text" onchange="changeMethod()" onfocus="focusMethod()">
</body>
</html>