JavaScript基础

JavaScript基础

JavaScript 是一个解析型、弱类型语言：解释器逐行解释运行、变量数据类型由赋的值决定

JavaScript 是一种轻量级的编程语言

JavaScript 是可插入 HTML 页面的编程代码

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行

JavaScript 很容易学习

JavaScript的引入方式

1. 通过script来将JavaScript代码直接写入到head或者body中

   <script>
   	JavaScript代码
   </script>
   

2. 通过script标签引入外部JavaScript文件

   <script src="../js/xxx.js"></script>
   

3. 在标签中写入JavaScript属性：

   <input name="btn" type="button" value="弹出消息框"  onclick="javascript:alert('欢迎你');"/>
   

JavaScript数据类型

在Js中，创建变量统一使用**var**关键字，其变量的数据类型取决于赋值的数据类型

变量的数据类型可以使用 typeof() 方法来查看

基本数据类型

因为Js是弱类型的语言，定义的变量类型取决于赋值的类型，在Js中，有四中基本类型

1. Number：数字类型：整数，浮点数和科学计数法(通常用来写极大或者极小的数字)
2. String：字符串类型，可以用单引号或者双引号
3. Boolean：布尔类型
4. Undefined：未定义类型，如果变量定义了没赋值就是这种类型
5. Null：空类型，和未定义类型差不多，所以暂且归为一类

引用数据类型

1.JavaScript 对象：

由花括号分隔，在括号内部，对象的成员变量以名称和值对的形式 (name : value) 来定义。成员变量之间由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

空格和折行无关紧要。声明可横跨多行：

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

如果想要调用person对象中的成员变量，那么有两种方式：

var name = person.lastname;//推荐使用第一种
var name = person["lastname"];

2.数组：new Array()

常用方法有：

方法名称	效果
length	返回数组长度
join()	传入一个分隔符，将数组中所有元素用分隔符连接起来成一个字符串
push()	添加一个元素进入数组
sort()	排序，字典序

3.函数：

格式：不用特别说明返回值类型，但可以有返回值，直接return;

function 函数名称 (参数列表){

​ 方法体

}

实例：

function caculate() {
			var num1 = parseFloat(prompt("请输入第一个数字"));
			var num2 = parseFloat(prompt("请输入第二个数字"));
			var char = prompt("请输入运算符号");

			switch (char) {
				case '+':
					document.getElementById("answer").innerHTML = num1 + char + num2 + " = " + (num1 + num2);
					break;
				case '-':
					document.getElementById("answer").innerHTML = num1 + char + num2 + " = " + (num1 - num2);
					break;
				case '*':
					document.getElementById("answer").innerHTML = num1 + char + num2 + " = " + (num1 * num2);
					break;
				case '/':
					document.getElementById("answer").innerHTML = num1 + char + num2 + " = " + (num1 / num2);
					break;
			}
		}

函数调用：在事件中调用函数即可

实例：在按钮的点击事件中调用函数caculate

<p>运算结果:</p>
<p id="answer"></p>
<button onclick="caculate()">运算按钮</button>

特殊数据类型

1. 正则表达式 （RegExp）
2. 日期（Date）

JavaScript的变量和常量

在 2015 年以前，我们使用 var 关键字来声明 JavaScript 变量。

在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字 来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量。

JavaScript字面量

在编程语言中，一般固定值称为字面量，如 3.14。

数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。

• 3.14
• 1001
• 123e5

字符串（String）字面量 可以使用单引号或双引号:

• “John Doe”
• ‘John Doe’

表达式字面量 用于计算：

• 5 + 6
• 5 * 10

数组（Array）字面量 定义一个数组：

• [40, 100, 1, 5, 25, 10]

对象（Object）字面量 定义一个对象：

• {firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}

函数（Function）字面量 定义一个函数：

• function myFunction(a, b) { return a * b;}

JavaScript常用方法

方法名称	效果
isNaN()	判断其参数是否为非数字，如果是字符串也会判断其含义是否为数字
parseInt()	将参数转化为Number
parseFloat()	将参数转化为浮点数
prompt	提示用户输入信息，返回的是字符串类型变量
alert()	在当前页面弹出信息框，并显示内容
document.write()	在html中打印信息
document.getElementById(元素id).innerHTML = “内容”	首先根据元素id获取元素，然后将内容写入到元素中
console.log()	向控制台打印信息

JavaScript常用事件

事件名称	含义
onclick	鼠标点击事件
ondbclick	鼠标双击事件
onmouseover	鼠标悬停事件
onmouseout	鼠标移出事件
onmousmove	鼠标移动事件
onkeydown	键盘按下某个键时的事件
onkeyup	键盘按键弹起时的事件
onkeypress	就按盘按下时产生有效字符时的事件
onload	加载事件：可以在body标签中调用
onresize	窗体大小改变时的事件
onfocus	文本框获得焦点事件
onblur	文本框失去焦点事件
onchange	文本框内容改变时的事件，下拉列表或单选按钮、复选框选择改变事件
onsubmit	表单提交时的事件
onscroll	滚动条滚动时的事件

JavaScript输出方式

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

JavaScript字符集

Unicode