【Javascript】慢慢进入javascript的大门~~~
JavaScript入门
一、基本概念：
01. 是什么？
一门脚本语言，运行在客户端，现在也可以基于 Node.js 技术进行服务器端编程
不需要编译，解释一行就执行一行
02. 浏览器怎么执行？
-
浏览器分成两部份
-
渲染引擎：解析HTML+CSS，俗称内核
-
JS引擎：也称JS解释器，读取并执行JS代码
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 .
JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行.
所以 JavaScript 语言归为脚本语言，会逐行解释执行.
-
03. JS的组成
-
ECMAScript
规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准
-
DOM（Document Object Model）
文档对象模型，可以对页面上的各种元素进行操作（大小、位置、颜色等）。
-
BOM（Browser Object Model）
浏览器对象模型，提供独立于内容的、可以与浏览器窗口进行互动的对象结构
可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
04. JS的书写位置
- 行内式：直接写到元素内部
<button onclick="alert('弹窗')"> 弹窗 </button>
- 内嵌式：写在
<script> </script>标签内
<script>
alert('弹窗');
</script>
- 外部式：需要引入
<script src="*.js"></script>
//写在 *.js 文件中
alert('弹窗');
二、JS的语法
01. JS的注释方法
-
单行注释：
//这是单行注释 -
多行注释：
/* 这是 多行 注释 */
02. JS的输入输出
//由浏览器弹出一个输入框，用户可以输入
prompt('请输入：');
//由浏览器弹出一个警示框
alert('警告！！！');
//在浏览器的控制台打印输出内容
console.log(msg);
03. JS变量
- 变量：是一个用于存放数据的容器，本质是程序在内存中申请的一块用来存放数据的空间
（1）变量的使用
用var(variable：变量)声明一个变量（声明变量后，计算机会自动为变量分配一个内存空间）
//这里声明了一个变量名为 name 的变量.
var name;
（2）变量的赋值
用等号=代表赋值，表示将右边的数据赋值给左边的变量
//这里将右边的 Ruovan 赋值给左边的变量 name.
name = 24;
（3）变量的初始化
声明一个变量并赋值，我们称之为变量的初始化
//这里直接在声明 name 变量的同时，赋值为 Ruovan.
var name = Ruovan;
（4）变量的更新
一个变量被重新复赋值后，它原有的值被覆盖，变量值将以最后一次赋的值为准
//这里先将变量值初始化为 18，然后通过再次赋值，改变了原有的变量值为 24.
var age = 18;
age = 24;
（5）变量的同时声明
可同时声明多个变量，只需要写一个 var， 多个变量名之间使用英文逗号 ,隔开，但还是要以;结尾
//这里声明了两个变量 age 和 name ，并分别初始化
var age = 24, name = Ruovan;
（6）变量的命名
- 可以由字母、数字、下划线、美元符号组成
- 不能以数字开头
- 严格区分大小写
- 不能是关键字
- 必须有意义
- 遵循驼峰命名
（7）特殊情况
-
不声明、不赋值，结果：报错
console.log(age); -
只声明、不赋值，结果：undefined
var age; console.log(age); -
不声明、只赋值，结果：赋的值
age = 18; console.log(age);
04. JS的数据类型
-
数据类型
-
变量是用来存储数据的地方，它们有名字和数据类型。变量的数据类型决定了如何将代表这些数据存储到计算机的内存中
-
不同的数据类型占用的存储空间不同，定义不同的数据类型，可以分成内存大小不同的数据，从而充分利用存储空间
-
JavaScript 是一种弱类型或者说动态语言，可以不用提前声明变量的类型，类型会被自动确定
在代码运行时，变量的数据类型由【 JS引擎】根据
=右边变量值的数据类型自动判断.运行完毕之后，变量就可以确定数据类型.
-
（1）简单数据类型
| 数据类型 | 说明 | 默认值 |
|---|---|---|
| Number | 数字类型，包括整型数字、浮点型数字 | 0 |
| String | 字符串类型 | “” |
| Boolean | 布尔值类型，true、false，等价于0、1 | false |
| Undefined | 声明了变量未赋值（var a），则变量值为：a = undefined | undefined |
| Null | 声明变量为空值，即var a = null; | null |
（a）数字类型——Number
-
数字型进制：二进制、八进制（0开头）、十进制、十六进制（0X开头）
-
特殊值：
-
Infinity：代表无穷大，大于任何数值
-
-Infinity：代表无穷小，小于任何数值
-
NaN：Not a Number，不是一个数字，代表一个非数值的数据
isNaN(x)，用来判断一个变量是否为数字类型是数字类型返回
false，不是数字类型返回true
-
（b）字符串类型——String
-
表示方法：字符串类型的数据可以用**双引号
“”或者单引号‘’**表示，推荐使用单引号字符串的嵌套：外双内单，外单内双
-
转义符：都是用
\开头\n：换行符\\：斜杠\\'：单引号\"：双引号\t：缩进\b：空格 -
字符串长度：
*.length -
字符串拼接：
多个字符串之间可以使用
+进行拼接，其拼接方式为：字符串 + 任何类型 = 拼接之后的新字符串拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
//字符串相加 console.log('hello' + ' ' + 'world');//hello world //数值字符串相加 console.log('123' + "456");//123456 //字符串+数字 console.log('123' + 456);//123456 //字符串+变量 var age = 18; console.log("小明已经" + age + "岁了！");字符串和变量拼接，变量不用添加引号
（c）Undefined和Null
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
var variable = null;
console.log('你好' + variable); // 你好null
console.log(11 + variable); // 11
console.log(true + variable); // 1
（2）如何获取变量的数据类型？
（a）typeof
var number = 24;
console.log( typeof number); //number
/*
各类型的返回值：
Number-------number
String-------string
Boolean------boolean
Undefined----undefined
Null---------object
*/
（b）字面量
直接观察数据本身如何表达，或者观察控制台的数据显示颜色
数字类型：1，2，3；控制台显示为蓝色
字符串类型：“Hello”，‘World’；控制台显示为黑色
布尔类型：true，false；控制台显示为深蓝色
（3）如何进行数据类型的转换？
从表单、prompt中获取过来的数据默认都是字符串类型的数据
对于获取到的数据，，如果要进行运算，需要把一种数据类型的变量转换成另外一种数据类型
（a）转换为字符串类型
-
toString()var num = 18; conosle.log( num.toString() ); -
强制转换：
String()var num = 18; console.log( String(num) ); -
隐式转换：加号
+拼接字符串和字符串拼接的结果都是字符串
var num = 18; console.log(num + "现在是字符串了！");
（b）转换为数字类型
-
parseInt()，parseFloat()console.log(parseInt('18')); // 18 console.log(parseInt('18.123')); // 18，取整 consol.log(parseInt('18px')); // 18，只取数字，但必须以数字开头，遇到其他参数则终止 console.log(parseFloat('18.123')); // 18.123 console.log(parseFloat('18')); // 18 -
强制转换：
Number()console.log(Number('123')); // 123 -
隐式转换：算术运算（
-、*、/）console.log('123' - 123); // 0
（c）转换为布尔类型
-
Boolean()代表空、否定的值会被转换为
false，如 " "、0、NaN、null、undefined其余值都会被转换为
trueconsole.log(Boolean('')); // false console.log(Boolean(0)); // false console.log(Boolean(NaN)); // false console.log(Boolean(null)); // false console.log(Boolean(undefined)); // false console.log(Boolean('hello')); // true console.log(Boolean(12)); // true
05. JS的运算符
- 由数字、运算符、变量等组成的式子称为：表达式
- 表达式的结果称为：返回值
（1）算术运算符
-
加
+、减-、乘*、除\、取余%【注意】
- 浮点数的运算中会有精度问题
- 浮点数不能直接拿来进行比较（有误差）
（2）递增递减运算
-
前置递增：
++num;num先自加1，然后返回自加1后的值
var num = 1; var a; //前置递增 a = ++ num; //等价于 num = num + 1; //先让 num 自加 1 a = num; //后把 num 赋值给 a //即，最终结果为：a = 2, num = 2; -
后置递增：
num++;先返回 num，然后让num自加1
var num = 1; var a; //后置递增 a = num++; //等价于 a = num; //先把 num 赋值给 a num = num + 1; //再让 num 自加 1 //即，最终结果为：a = 1, num = 2;
（3）比较运算符
-
大于
>、小于<、等于====会默认转换数据类型，会把字符串类型的数据转换为数字类型 -
大于等于
>=、小于等于<=、不等于!= -
全等于
======要求值和数据类型完全相同
（4）逻辑运算符
-
与或非（
&&、||、!）返回的是布尔值：true、false
如果是具体的数值，则返回数值
与：一假全假
或：一真全真
-
短路运算（逻辑中断）
-
当进行“逻辑与”运算时，如果检测到第一个表达式为假，则不再进行后面表达式的判断
-
当进行“逻辑或”运算时，如果检测到第一个表达式为真，也不再进行后面表达式的判断
-
（5）赋值运算符
-
num = 5; -
num += 5;等价于num = num +5; -
num -= 5;等价于num = num - 5; -
num *= 5;等价于num = num * 5; -
num /= 5;等价于num = num / 5; -
num %= 5;等价于num = num % 5;
（6）优先级
- 小括号 > 一元运算符 > 算术运算符 > 比较运算符 > 逻辑运算符 > 赋值运算符>逗号运算符
- 一元运算符里面，“逻辑非”
!优先级很高 - 逻辑运算符中：“逻辑与”
&&的优先级要大于“逻辑或”||
- 一元运算符里面，“逻辑非”
06. 条件语句
（1）if语句
-
语法结构:
if (条件表达式) { 语句1 ; } else { 语句2; } -
结果：
- 如果条件表达式为真，执行语句1，否则，执行语句2
（2）三元表达式
-
语法结构：
条件表达式 ？ 表达式1 ： 表达式2； -
结果：
- 如果【条件表达式】结果为【真】，则返回【表达式1】的值 ，否则，返回【表达式2】的值
（3）switch
-
语法结构：
switch (表达式) { case value1: 语句1; break; case value2: 语句2; break; default: 最后的语句; } -
利用我们的【表达式的值】和
case后面的【选项值】相匹配 ： -
【注意】
- 在匹配的时候，是进行【全等于】的匹配，即数据的值和类型必须完全相等
- 如果匹配到当前的
case里面没有break，则不会退出switch，而是继续执行下一个case，直到遇到break
07. 循环语句
（1）for循环
-
语法结构
for（初始化变量；条件表达式；操作表达式）{ 循环体 }for(var i = 1; i <= 10; i++){ console.log(i); } // 1. 执行初始化变量语句：var i = 1 ，（这句话在 for 里面只会执行一次） // 2. 执行条件表达式： i <= 10 ，来判断变量是否满足条件 // 3. 如果满足条件，就执行【循环体】，---->第4步（正常情况下） // 如果不满足条件，则退出循环 // 4. 执行操作表达式： i++ ，用于控制变量递增 // 第一轮到这里结束。 // 下一轮从第2步开始执行循环
（2）while循环
-
语法结构
while (条件表达式) { // 循环体 }var i = 0; while (i < 10){ console.log(i++); } // 1. 进入条件表达式：i < 10 ，判断变量是否满足条件 // 2. 满足条件，则进入while循环内部，执行循环体 ， // 不满足条件，则退出循环 // 3. while循环里面也必须要有 计数器的 更新，防止死循环
（3）do while循环
-
语法结构
do { // 循环体 } while (条件表达式) -
区别：
do while循环会先执行一次循环体，再判断条件是否继续执行循环while循环是先判断条件，再决定是否执行循环
（4）注意
- 【注意】
- 遇到
break，则直接跳出循环 - 遇到
continue，则跳过本轮循环，进行下一次循环
- 遇到
08. 数组
（1）概念
- 数组：一组数据的集合，其中的每个数据被称为【元素】，可以存放【任意类型】的元素
（2）语法结构：
//1. 利用 new 创建数组
var arr = new Array();
//2. 利用数组字面量创建数组
var arr = [];
var arr1 = [1,2,3,4,5]; //数组里面的元素用逗号 ， 分隔
（3）如何获取数组元素？
-
通过【索引（下标）】访问数组元素，数组的索引号从【0】开始，超出数组长度的元素为：
undefined -
访问方式：
arr[index]，（ 数组名[索引号] ） -
遍历数组：
for循环
（4）获取数组的长度
- 数组的长度即数组元素的个数
- 获取方法：
arr.length，（ 数组名.length ）
（5）增加数组元素
-
直接修改数组
length【长度】- 增加的元素默认是
undefined
- 增加的元素默认是
-
直接调用【索引号】追加元素
var arr = [1,2,3]; arr[3] = 4; console.log(arr); //arr = [1,2,3,4]【注意】不要直接给数组名赋值，否则，数组就会被覆盖掉
（6）冒泡排序
-
从前到后，让相邻的元素之间进行比较，然后将大的元素往后排（沉底）
var arr = [78, 56, 89, 2, 35, 62, 24, 8, 63, 32, 68, 12, 13, 94, 54]; for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length - i - 1; j++) { if (arr[j] > arr[j + 1]) { var temp; temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } }
09. 函数
（1）概念
- 函数：封装了一段可以被重复执行调用的代码块
- 作用：让大量代码重复使用
（2）使用方式
-
声明函数
function muFunction(){ //函数体 }函数名通常是【动词】
-
调用方式
muFunction();【注意】函数不调用，自己不执行
（3）函数的参数
-
形参：在声明函数的小括号里面是【形参】，作用同变量
function 函数名(形参1，形参2，...){ } -
实参：在函数调用的小括号里面是【实参】
函数名(实参1，实参2，...); -
形参与实参的匹配问题
-
如果实参的个数和形参的个数一致，则正常输出结果
-
如果实参的个数多于形参的个数，则只会取到形参的个数 ，多余的实参传不进去
-
如果实参的个数小于形参的个数，则多于的形参的值为
undefined这是因为：形参可以看做是没有声明的变量，由于没有接受值，其结果就是
undefined
-
（4）函数的返回值
-
return语句function 函数名(){ return 结果： } 函数名() = return的结果 -
【注意】
return会终止函数，即后面的代码不会被执行return只能返回一个值- 如果函数没有
return，则调用函数返回的值是undefined
（5）伪数组arguments
- 只有函数才有
arguments对象，每个函数都内置好了这个arguments - 在不确定实参的情况下，用
arguments代替形参，可以存储所有传递过来的实参 - 并不是真正意义上的数组，但具有数组的一些属性
- 具有数组的
length属性 - 按照数组索引的方式进行存储
- 没有真正数组的一些方法：
pop()、push()等
- 具有数组的
（6）函数的互相调用
- 可以在一个函数内部调用另一个函数
（7）函数的两种声明方式
-
关键字自定义函数（命名函数）
function myFunction(){ } -
函数表达式定义函数（匿名函数）
var myFunction = function(){ };
4790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
