JavaScript基础(速通)
-注: 此文章会持续保持更新。并非完整。
关于JavaScript语言的简介。
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。
1.JavaScript的特点:
1.是一种解释性脚本语言（代码不进行预编译）。
2.主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
3.可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
4.跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
5.Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
6.可以实现web页面的人机交互。
2.JavaScript的常用用途:
1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。
6.控制cookies，包括创建和修改等。
7.基于Node.js技术进行服务器端编程。
好了。因为是速通。这些覆盖的也算是全面，我们大致只需要了解一下就可以了。
1. 基础部分。(基础语法和理论)
1.JavaScript的数据类型
如果是学过其他编程语言，有一定基础的朋友们，可能对数据类型有一定的了解。 比如Java有八种常用数据类型，分别是什么? 无非就是 byte，short， int，long， double， float，char，boolean八大数据类型；在加上一些特殊的引用数据类型，Class(类)，Interface(接口)， Array(数组)。
但是值得一提的是什么呢，Java是一种强类型语言。而与之不同的JavaScript则是一门弱类型语言。
在这里就不得不提及一下强类型语言和弱类型语言分别是什么。
熟悉Java的朋友，可能经常会在代码里看到 int number = 10;
或者在一个循环控制语句里看到 for (int i = 0; i < 5; i++) {} ， 欸，这时候你会很好奇，这个int，到底起到了一个什么作用。这就是我们今天要谈的强类型语言和弱类型语言的区别了。
在Java里，要求，在创建变量的时候，必须给变量赋予初始的数据类型。不管你有没有给他赋值，必须给他一个对应的数据类型，(你希望这个变量接受一个什么样的数据，你就给他一个对应的数据类型)。比如我希望你给我一个整数，呢么我可能就是int i；(未赋值) 这种一般都是强类型语言。
但是弱类型语言就不一样了。
弱类型可以将字符串 12 和整数 3 进行连接得到字符串 123，然后可以把它看成整数 123，而不需要显式转换。弱类型有时显得很方便，有时却又极易出错。
下面演示一串JavaScript代码。
var a = 123;
var b = "abc";
var c = a + b;
alert(c); // "123abc"
如上，变量a里定义了一个数字，123。 而变量b里却定义了一个字符串，“abc”，然后我让他去做一个运算。 请问。按照一个正常的运算思路，一串文字，和一组数字。有什么运算关联吗？答案是:毫无关联。 但是就是这么毫无关联的两个东西。你可以对他进行运算。 其实说的在准确一点，这个应该属于拼接。如果这个时候你去用typeof(); 方法去查看一下变量c。你可能会发现他会返回给你一个string类型。
…
有过了解后，可以正式开始。
1.JavaScript的数据类型
在上面我也有说过。JavaScript是一种弱类型语言，他大抵分为了以下几类。
| 数值类型 | 字符类型 | 对象类型 | 布尔类型 | 函数类型 |
|---|---|---|---|---|
| Number | String | Object | boolean | function |
数值类型代表: Number，它包含了一切数字，浮点数，整数。
字符类型代表: String, 其实只要你拿双引号抱起来，呢么他就一定是字符类型…
对象类型: Object，工厂模式、构造函数模式、原型模式、组合模式（构造函数与原型）、动态原型模式、寄生构造函数模式、稳妥构造函数模式。这几种创建方式并没有绝对的好与坏，不同的方式适合于不同的应用场景。
布尔类型:boolean， 只包含了两个值 true(真) 和 false(假)。
函数类型: 用于函数的创建，Function。
在这里不得不提起一下JavaScript中的一些特殊的值:
1. undefined
2. null
3. NaN
这三个值在JavaScript里属于比较特殊的几个值。
第一个 undefined 的意思是，未定义，所有JavaScript在定义变量未赋予初始值的时候，默认值都是undefined。
第二个 null 的意思是，空值。 就是字面意思，里面什么都没有，空的。
第三个 NaN的意思是，非数字，非数值的意思，它的全称是: Not a number; (不是一个数字)
JavaScript中定义变量的格式:
var a; // var 声明变量名。 格式: var 变量名;
var b = 10; // var声明变量名，但是可以在声明的时候直接赋值。
var a, b, c, d; // 可以同时声明多个变量，但不建议这样做。可阅读性不高。
JavaScript关系比较运算
等于: == 是做简单的字面比较
全等于: === 除了做字面值的比较之外还会比较两个变量的数据类型 全部相等才行
// == 运算
var a = 123;
var b = "123";
if (a == b){
alert("这是一个==的运算")// 最终会执行这一条语句，就是说返回了True
} else {
alert("我俩不相等");
}
// === 运算
var num = 123;
var str = "123";
if (num === str) {
alert("我是一个===的运算");
} else {
alert("我们不相等");// 最终会执行这一条语句，就是说返回了false
}
JavaScript的逻辑运算
且运算: &&
或运算: ||
取反运算: !
// 逻辑且 &&
var number = 8;
if (number > 5 && number < 10) {
alert("Number 大于五且小于 10"); // 最后会执行这个。
} else {
alert("他只有一个条件符合或者两个条件全部符合才会执行我");
}
// 逻辑或
var num = 15;
if (num < 10 || num > 13) {
alert("num 小于十或者大于十三"); // 最后会执行这个
} else{
alert("只需要有一个条件满足即可返回true，两个条件全不满足才会执行我");
}
// 取反运算
var num2 = 10;
if (num2 != 10) {
alert("!= 我喜欢叫他不等于，当num2不等于10的时候才会返回true");
} else {
alert("所以这一次是执行我咯"); // 会执行它
}
上面的代码大致了解了一下，这边我们讲一下具体什么是逻辑且，逻辑于，和取反。
1. 逻辑且 &&
字面意思，在判断两个条件的时候， 我们可以这样去读，当 a 大于 10 并且 a 还得小于15 才会返回true。if(a > 10 && a < 15) 只有当这两个条件全部满足的时候，才会执行代码块里的语句。
有两种返回情况（第一种情况: 当表达式全为真的时候。返回最后一个表达式的值 第二种情况: 表达式里有一个为假的时候，返回第一个为假的值）
2.逻辑或 ||
字面意思，当条件一或者条件二里有一个满足，即返回true。
3.取反
取反运算，我感觉按我的读法读一遍就可以走了，取一串代码。 var a = 10; if(a != 10){代码块} 定义一个变量a， 并且赋初值为10，如果 a 不等于 10。 呢么就返回true，反之a 等于 10 就返回false。
2.JavaScript数组
如何定义数组:
var array = []; // 空的数组。 方法: var 数组名 = [];
var array1 = [1, 2, 3] // 可以赋予初始值。在定义的同时对它赋值。
JavaScript中的数组操作其实和Java的数组操作很相似。
var array = []; // 定义一个空数组。
array[0] = 1; // 可以通过下标给数组赋值。
array[2] = 3;
// 可以通过length来查看列表元素的个数。
alert(array.length); // 请问这里应该返回几。 答案是 3
观看上述代码， 我们应该会有一个疑惑，为什么我明明通过下标添加了两个元素，但是他却给我返回列表里有三个元素的长度呢。 这里就得提及一下JavaScript列表的自动扩容模式了。 JavaScript语言中的数组，只要我们通过数组下标赋值，呢么最大的下标值，就会自动的给数组做扩容操作；
在JavaScript中。 列表也是可以做遍历的。 和Java的方法差不多。
var array = [0, 1, 2, 3, 4, 5, 6, 7];
for (var i = 0; i < array.length; i ++) {//应该没人对array.length疑惑吧
alert(array[i]); // 根据弹窗依次输出 0 - 7 通过下标获取的。
}
3.JavaScript中的函数
关于函数的定义：
可以使用function关键字来定义函数。
// 定义一个函数。
function 函数名(形参列表) {
函数体
}
// 第二种定义函数方式
var 函数名 = function(形参列表) {
函数体
}
// 定义一个无参函数
function fun() {
alert("这是一个无参函数");
}
fun(); // 提示窗输出 "这是一个无参函数"
// 带有参数的函数
function fun1(a, b){
alert(a + b);
}
fun1(2, 5); // 提示窗输出 a + b 的值。 7
// 函数可以自带返回值。 直接加return就好
function fun2(){
return 0;
}
fun2(); // 2
对于函数了解的差不多后，我们来重点谈谈 函数的 arguments 隐形参数 (只在function函数内)；
什么是arguments 隐形参数，其实这个也是好理解的，就跟Java的可变长参数一样。public void fun(Object …args);
可变长参数其实就是一个数组。
呢么操作也类似于数组。
function fun() {
alert(arguments);
}
fun(1, 2, 3, 4, 5); // 返回[Object Arguments]
// 既然说 跟列表操作相似，我是不是可以用 length方法 来查看它的参数数量呢。
function fun1(){
alert(arguments.length); // 6
}
fun1(0, 1, 2, 3, 4, 5);
// 呢我是不是可以同样去获取下标所对应的参数呢。
// 动手试试 是最有效的方法。
function fun2(){
alert(arguments[0]); // 1
alert(arguments[3]); // 4
}
fun2(1, 2, 3, 4, 5, 6);
// 呢他是不是也和列表一样 可以遍历呢 答案是， 是的
function fun3() {
for (var i = 0; i < arguments.length; i ++) {
alert(arguments[i]); // 依次窗口输出 所有参数。
}
}
fun3(1, 2, 3, 4, 5, 6, 7);
学了这么久了，咱们出几个题目来综合巩固一下吧。
- 计算BMI指数。
具体要求分为: 定义两个变量来存储你的身高和体重。然后根据以下公式来计算BMI（体重除以身高的平方）。
BMI<18.5：您太瘦了，体重过轻！
BMI为：18.5-25：恭喜您，您的身材非常好！
BMI为：25-28：您的身材有点偏胖！
BMI为：28-32：您是一个小胖子！
BMI>32:您严重肥胖！
2.要求编写一个函数，计算所有参数相加的和并返回.
~
~
~
// BMI
var height = 1.8; // 定义身高 并赋值 1.8 (单位: m)
var weight = 62; // 定义体重 并赋值 62 (单位: kg)
// 定义一个变量，来存储计算好的值 公式(体重除以身高的平方)
var bmi = weight / (1.8 ** 2);
// 进行条件判断BMI<18.5：您太瘦了，体重过轻！
if (bmi < 18.5) {
alert("您太瘦了，体重过轻！");
} else if (bmi >= 18.5 && bmi < 25) {
alert("恭喜您，您的身材非常好！"); // 最终执行了这一句。
} else if (bmi >= 25 && bmi < 28) {
alert("您的身材有点偏胖！");
} else if (bmi >= 28 && bmi < 32) {
alert("您是一个小胖子！");
} else {
alert("您严重肥胖! ");
}
~
// 计算参数和
function sum(sum1, sum2){
var result = 0; // 用来接受值
for (var i = 0; i < arguments.length; i++) {
result += arguments[i]
}
return result; //
}
alert(sum(1, 2, 3, 4, 5, 6)); // 21
~
~
JavaScript中的自定义对象(扩展)
定义:
var 变量名 = new Object(); // 空对象(对象实例化)
变量名.属性名 = 值; // 定义属性。
变量名.函数名 = function(){} // 定义函数
访问:
变量名.属性名/函数名();
截止到现在字数为: 5651字，239段落…
正在持续保持更新中…
JavaScript中的自定义对象(扩展内容):
// object 形式自定义对象
var obj = new Object();
obj.name = "Alen";
obj.age = 18;
obj.fun = function(){
alert("姓名: " + this.name + " , 年龄: " + this.age );
}
alert(obj.name); // Alen
alert(obj.age); // 18
// 调用函数>
alert(obj.fun()); // 姓名: Alen， 年龄: 18
/*
花括号的形式自定义对象。 */
var 变量名 = {
属性名: 值, // 注意是英文字符。
属性名: 值,
函数名: function() {
// 空对象
}
}
var obj = {};
alert(typeof(obj)); // object
var obj = {
name = "Alen",
age = 18,
fun: function(){
alert("姓名是: " + this.name + ", 年龄是: " + this.age);
}
};
alert(obj.name); // Alen
alert(obj.age); // 18
obj.fun(); // 姓名是: Alen, 年龄是: 18
JacaScript事件
什么是事件？事件是电脑输入设备与页面进行互交的响应，我们称之为事件。
常用的事件:
onload 加载完成事件； // 页面加载完成后，常用于做页面js代码初始化操作。
onclick 单击事件； // 常用于按钮的点击响应操作
onblur 失去焦点事件； // 常用于输入框离开或者失去焦点后 验证其输入内容是否合法
onchange 内容发生改变事件； // 常用于下列表和输入框内容发生改变后操作。
onsubmit 表单提交事件。 // 常用于表单提交前验证所有表单项是否合法操作
我们如何去使用事件，首先我们需要干一件事叫做 事件的注册，也可以叫绑定。
什么叫事件注册(绑定);
其实就是告诉浏览器，当事件响应后要执行那些操作代码。
动态注册:
先通过js代码得到标签的DOM对象，然后在通过DOM对象.事件名 = function(){}这种赋予响应式的代码叫做动态注册。
动态注册基本步骤:
1. 获取标签对象。
2. 标签事件.对象名 = function(){}
onload 事件(加载完成事件):
<!-- 静态注册onload事件。
onload事件是浏览器解析完页面之后就会自动触发的事件。
-->
<!-- 动态注册 onload是固定写法
window.onload = function() {}
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onloadFun(){
alert("静态注册。");
}
</script>
</head>
<body onload="onloadFun()">
</body>
</html>
Onclick 事件(单击事件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 静态注册
function onclickFunStatic(){
alert("onclick静态注册");
}
// 动态注册
window.onclick = function () {
// 获取标签对象
/* document 是JavaScript语言提供的一个对象(文档)
* get 获取
* Element 元素(就是标签)
* By 通过
* Id id属性
* */
let btn = document.getElementById("btn");
alert(btn); // [object HTMLButtonElement] 对象
// 通过标签名.事件名 = function(){}
btn.onclick = function () {
alert("这是一个动态注册");
}
}
</script>
</head>
<body>
<button onclick="onclickFunStatic()">静态按钮</button>
<button id="btn">动态按钮</button>
</body>
</html>
明天在写。
878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
