javascript移动开发项目教程题库 javascript开发基础

转载

liutao988 2023-08-10 20:14:27

文章标签 javascript 前端开发语言运算符赋值 文章分类 JavaScript 前端开发

一、引入方式：

1、行内式：

<input type="button" value="点我试试" onclick="alert('Hello World')" />

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读；
引号易错，引号多层嵌套匹配时，非常容易弄混；
特殊情况下使用

2、内嵌式：

<script>
    alert('Hello  World~!');
</script>

3、外部文件式：

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

利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码
适合于JS 代码量比较大的情况

二、JavaScript输出语句：

方法                     	说明                      	归属
alert(msg)	           浏览器弹出警示框	               浏览器
console.log(msg)	浏览器控制台打印输出信息	           浏览器
prompt(info)	  浏览器弹出输入框，用户可以输入	       浏览器

三、变量：

1、变量声明：

//  声明变量  
var age; //  声明一个 名称为age 的变量

var 是一个 JS关键字，用来声明变量( variable 变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

2、变量赋值：

age = 10; // 给 age  这个变量赋值为 10

= 用来把右边的值赋给左边的变量空间中此处代表赋值的意思
变量值是程序员保存到变量空间里的值

3、变量初始化：

var age  = 18;  // 声明变量同时赋值为 18
// 声明一个变量并赋值， 我们称之为变量的初始化。

4、变量扩展

更新变量
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

var age = 18;
age = 81;   // 最后的结果就是81因为18 被覆盖掉了

同时声明多个变量
同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开。

var age = 10,  name = 'zs', sex = 2;

声明变量特殊情况

情况											说明								结果
var age ;console.log (age);				只声明 不赋值						undefined
console.log(age)					不声明 不赋值 直接使用					报错
age = 10; console.log (age);			不声明 只赋值						10

5、变量命名规范：

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

四、数据类型：

1、数字型范围

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-32

2、数字型三个特殊值：

Infinity ，代表无穷大，大于任何数值
Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值

3、isNaN：

用来判断一个变量是否为非数字的类型，返回 true 或者 false

4、Undefined和 Null：
一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

5、获取变量的数据类型：

typeof 可用来获取检测变量的数据类型

var num = 18;
console.log(typeof num) // 结果 number

javascript移动开发项目教程题库 javascript开发基础_运算符

6、数据类型转换：

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型

（1）转换为字符串：

javascript移动开发项目教程题库 javascript开发基础_运算符_02

toString() 和 String() 使用方式不一样。
三种转换方式，更多第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

（2）转换为数字型：

javascript移动开发项目教程题库 javascript开发基础_开发语言_03

注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

（3）转换为布尔型：

javascript移动开发项目教程题库 javascript开发基础_运算符_04

代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined
其余值都会被转换为 true

console.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('小白')); // true
console.log(Boolean(12)); // true

五、关键字和保留字

1、标识符：

标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。
标识符不能是关键字或保留字。

2、关键字：

关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。
包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

3、保留字：

保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。
包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。
注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。

五、运算符（操作符）

1、算术运算符

概念：算术运算使用的符号，用于执行两个变量或值的算术运算

javascript移动开发项目教程题库 javascript开发基础_开发语言_05

浮点数精度问题
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。

var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001
所以：不要直接判断两个浮点数是否相等 !

2、递增和递减运算符

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ -- ）运算符来完成。
在 JavaScript 中，递增（++）和递减（ -- ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。
注意：递增和递减运算符必须和变量配合使用。

（1）递增运算符

前置递增运算符
++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。
使用口诀：先自加，后返回值

var  num = 10;
alert(++num + 10);   // 21

后置递增运算符
num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。
使用口诀：先返回原值，后自加

var  num = 10;
alert(10 + num++);  // 20

3、比较运算符

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

javascript移动开发项目教程题库 javascript开发基础_开发语言_06

4、逻辑运算符概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

javascript移动开发项目教程题库 javascript开发基础_javascript_07

逻辑与&&
两边都是 true才返回 true，否则返回 false
逻辑或 ||
两边都是 true才返回 true，否则返回 false
逻辑非！
逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

var isOk = !true;
console.log(isOk);  // false

（1）短路运算（逻辑中断）

逻辑与
语法：表达式1 && 表达式2

如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

console.log( 123 && 456 );        // 456
console.log( 0 && 456 );          // 0
console.log( 123 && 456&& 789 );  // 789

逻辑或
语法：表达式1 || 表达式2

- 如果第一个表达式的值为真，则返回表达式1
- 如果第一个表达式的值为假，则返回表达式2

console.log( 123 || 456 );         //  123
console.log( 0 ||  456 );          //  456
console.log( 123 || 456 || 789 );  //  123

5、赋值运算符

javascript移动开发项目教程题库 javascript开发基础_前端_08

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

6、运算符优先级

javascript移动开发项目教程题库 javascript开发基础_运算符_09

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

六、流程控制

简单理解：流程控制就是来控制代码按照一定结构顺序来执行

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序

javascript移动开发项目教程题库 javascript开发基础_运算符_10

1、分支流程控制：

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
JS 语言提供了两种分支结构语句：if 语句、switch 语句

if语句

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
    // 条件成立执行的代码语句
}

if else 语句

// 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}

if else if 语句(多分支语句)

// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码
}

2、三元表达式：

表达式1 ? 表达式2 : 表达式3;

如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
简单理解：就类似于 if else （双分支）的简写

3、switch分支流程控制

switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}