[JavaScript知识库]初识JavaScript基础

1 初识javascript

1. 1

   目录

   1 初识javascript

   1.2 浏览器执行js的过程

   1.3 js的组成

   1.4 js的三种书写位置

   1.5 js注释

   1.6 js输入输出语句

   2. 变量的使用

   2.1 什么是变量

   2.2 变量的使用

   2.3 变量案例

   2.4 变量案例弹出用户名

   2.5 变量语法扩展

   2.6 变量的命名规范

   2.7 变量案例：交换两个变量的值

   3. 数据类型

   3.1 数据类型简介

   3.2 基本数据类型之数字Number

   3.3 isNaN

   3.4 基本数据类型之字符串String

   3.5 弹出网页警示框

   3.6 字符串长度以及拼接

   3.7 字符串拼接加强案例

   3.8 显示年龄案例

   3.9 boolean,undefeind和null

   3.10 typeof检测数据类型

   3.11 字面量

   4. 转换数据

   4.1 转换为字符串类型

   4.2 转换为数字类型的parseInt和parseFloat

   4.3 转换为数字类型的其他方法

   4.4 计算年龄案例

   4.5 简单加法器案例

   4.6 转换为布尔型

   ---

   js是什么？js语言的特点是什么？js能做什么事情？

   • js是一门解释型高级编程语言，是一种运行在客户端的脚本语言

   • 不需要编译，运行过程中由 js 解释器( js 引擎）一句一句来进行解释并执行

   • 最初用来做表单校验，后来越来越强大，只要是客户看到的东西，js都能做处理。

1.2 浏览器执行js的过程

1. 浏览器中的渲染引擎是用来做什么的？JS引擎是用来做什么的？

   • 渲染引擎 用来解析和渲染html/css

   • js引擎 用来读取和执行js代码，js引擎会一句一句读取js代码，并一句一句进行执行

1.3 js的组成

1. js由哪些内容组成？我们在js基础阶段要学习什么？

   • js由 ECMA Script , DOM, BOM 这三个部分组成

   • 我们在js基础阶段主要学习 ECMA Script，这部分内容包含了js语言的基础语法，语言规范等内容

1.4 js的三种书写位置

1. js代码可以写在哪些地方？

   1. 可以写在<script></script>标签中间，叫做内嵌式js

   2. 可以写在.js文件里面，然后通过 <script src="index.js"></script>的形式外链到网页中

   3. 可以在标签内容编写行内式的js代码，不推荐使用

1.5 js注释

1. js注释的形式有哪几种？

   • 单行注释 // 这种注释 'ctrl+ /'

   • 多行注释 /* 这种注释 */

1.6 js输入输出语句

1. js的输入语句是什么？js的输出语句是什么？

   • js的输入语句有 prompt，confirm

   • js的输出语句有 alert 还有在console中输出的语句 console.log() console.dir() 等

练习5分钟 使用内嵌js的形式打印一句 helloworld 使用外链js的形式打印依据 i'm come in

2. 变量的使用

2.1 什么是变量

1. 什么是变量？

   • 变量就是在js中创建一个可以保存数据的地方

   • 变量名就是这个地方的名字，通过变量名我们可以访问到变量保存的数据

2.2 变量的使用

1. 变量的使用有哪几个步骤？

   1. 声明： var num;

   2. 赋值： num = 100;

   3. 使用： 打印也好，计算也好，我们可以使用变量来做事情 console.log(num)

   补充： =号的意思： 1).在小学数学中，等于号是相等的意思： 1+2=3 2).在js编程中，=号的意思不是相等的意思，是赋值的意思(保存数据) var num = 998;// 将998这个数据保存到num变量里面去 var a; num = a = 110;

2.3 变量案例

1. 在本案例中，我们将卡卡西的信息逐个的保存到了变量中，如果想要保存其他人的信息，该怎么做？

   • 应该重新再声明一组变量来保存其他人的信息

   • 如果直接使用保存卡卡西的变量来保存其他人的信息，会造成覆盖的效果

练习3分钟完成变量案例

2.4 变量案例弹出用户名

1. 通过该案例，我们知道可以使用变量来保存prompt输入的数据，如果我们还想得到迪丽热巴的年龄信息该怎么做？

   • 再声明一个变量，并接收prompt的结果

   • var age = prompt('请输入年龄')

练习3分钟完成案例

2.5 变量语法扩展

1. 在本小节我们学习了哪些新的变量语法？

   1. 变量值的覆盖，变量赋值以最后一次赋值为准，记得一句话，js代码是一句一句执行的

   2. 同时声明多个变量： var a,b,c=111;

   3. 只声明不赋值，变量值为undefined 只赋值不声明，正常使用 不声明不赋值，报错

建议： 同学们可以在console中看到自己的红字报错信息 通过网址 i5ting_ztree_toc:报错总结 你可以找到相关的报错信息的解决方案

2.6 变量的命名规范

1. 变量取名字也有规则，请问变量取名字有哪些规则？

   1. 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name

   2. 严格区分大小写。var app; 和 var App; 是两个变量

   3. 不能 以数字开头。 18age 是错误的

   4. 不能 是关键字、保留字。例如：var、for、while

   建议：

   1. 变量名必须有意义

   2. 遵守驼峰命名法，首字母小写，后面单词的首字母需要大写，myFirstName这样

2.7 变量案例：交换两个变量的值

1. 如何将两个变量之间的数据进行交换呢？有没有其他的写法？

   • 课程中老师的写法是可以进行变量的交换的

   • 但是不借助变量，我们也可以实现两个变量数据的交换，有一种比较容易理解的，还有一种不容易理解，但是简单的写法 A. var num1=10,num2=20; num1 = num1 + num2; num2 = num1 - num2; num1 = num1 - num2;

     B. var num1=10,num2=20; [num1,num2] = [num2,num1];

3. 数据类型

3.1 数据类型简介

1. 在计算机中，不同的数据占用的存储空间是不同的，为了合理分配存储空间，需要根据数据来使用不同的数据类型， 对于js来说，则不必太过担忧，因为js的数据类型是动态变化的，由赋值的数据决定数据类型，再进行内存空间的分配。 如：var age=19,myName='jack'; 请问age变量是什么类型，myName变量是什么类型？

3.2 基本数据类型之数字Number

1. js中的数据类型可以分为哪两类？

2. 简单数据类型中有哪些数据类型？

3. NaN是什么

   • 分为简单数据类型和复杂数据类型

   • 简单数据类型中分为Number，Boolean，String，Null，Undefined

   • NaN是一组单词的缩写 not a number, 意思是 非数字（不是一个数字）

3.3 isNaN

1. isNaN有什么用？

   • 可以用来判断变量保存的数据是否为 非数字

   • var res = isNaN(变量);// 变量如果是一个数字就是false，变量如果是一个非数字就是true

   • var name = prompt('请问您叫什么名字')

3.4 基本数据类型之字符串String

1. 在使用字符串的时候需要注意什么？

   • 在js中，单引号双引号都可以声明一个字符串，但是要注意 内单外双，内双外单的形式。

   • 在字符串中，可以使用\n等转义字符来添加换行等效果

   • 在字符串中，也可以使用反引号创建一个字符串

3.5 弹出网页警示框

1. 该案例使用了\n实现字符串换行的效果，请问在创建字符串的时候能不能不使用\n，直接换行？

   • 单引号，双引号不支持换行

   • 反引号字符串支持换行

3.6 字符串长度以及拼接

1. 如何获取字符串里有多少个字符？

2. 字符串拼接变量是如何操作的？

   • 通过字符串的 length 属性，我们可以得知字符串的长度

   • 使用 + 号，我们可以进行字符串的拼接 使用反引号字符串的特殊写法，也可以实现字符串的拼接。

3.7 字符串拼接加强案例

1. 如何使用反引号字符串改写pink老师所写的案例？改写之后，你觉得哪一种写法更好呢？

    ? ?console.log('pink老师' + 18); // pink老师18
    ? ?console.log('pink老师' + 18 + '岁');
    ? ?var age = 19;
    ? ?console.log('pink老师age岁');
    ? ?// 我们变量不要写到字符串里面，是通过和 字符串相连的方式实现的
    ? ?console.log('pink老师' + age + '岁');
    ? ?// 变量和字符串相连的口诀：  引引加加
    ? ?console.log('pink老师' + age + '岁');

3.8 显示年龄案例

1. 请问如何使用反引号字符串改写显示年龄案例？练习3分钟，完成这个案例

   • var age = prompt('请输入您的年龄')

   • var str = 您今年已经${age}岁了

   • alert(str)

3.9 boolean,undefeind和null

1. 该如何理解undefined和null？

   • undefined 是未定义的意思，如果一个变量的值为undefined，那么可以理解为这个变量不知道存储的是啥

   • null 是什么都没有的意思，如果一个变量的值为null，可以理解为变量里面什么都没有存储

3.10 typeof检测数据类型

1. typeof能检测出来的数据类型有哪些？typeof检测出来的结果是怎样的？

   • typeof能检测出来的数据类型有 number，string，boolean，undefined，object

   • typeof检测出来的结果都是字符串。

3.11 字面量

1. 啥是字面量？

   • 一眼看上去就能知道 类型和数据值 的数据就是字面量

4. 转换数据

4.1 转换为字符串类型

1. 其他数据类型如何转换为字符串类型？

   • 不用记那么多，直接用字符串拼接就可以将其他数据类型转换为字符串类型

补充： 隐式转换：悄咪咪的转换数据，是js解释器悄咪咪的帮我们去完成数据转换的操作，程序员不需要操心 显式转换：需要程序员编写代码完成转换

推荐使用隐式转换来转换数据

4.2 转换为数字类型的parseInt和parseFloat

1. parseInt和parseFloat有什么区别？

   • 一个是将数据转换为整数

   • 一个是将数据转换为小数

4.3 转换为数字类型的其他方法

1. 还有其他将数据转换为数字的方法，但是大家觉得哪一种比较适合你？

   • 用隐式转换最方便，如：var a = '1.23'; var b = a - 0; var c = +a;

4.4 计算年龄案例

1. 如何使用反引号字符串的形式替代字符串++的写法？

   • alert(您今年已经${age}岁了)

练习3分钟，完成计算年龄案例

4.5 简单加法器案例

1. 加法器能做出来，如果这个时候，要你把加减乘除的结果都算出来，怎么办？

    ? var num1 = +prompt('请输入第一个数');
    ? var num2 = +prompt('请输入第二个数');
   ?
    ? var jia = num1 + num2;
    ? var jian = num1 - num2;
    ? var chen = num1 * num2;
    ? var chu = num1 / num2;
   ?
    ? alert(`加的结果是${jia},减的结果是${jian},乘的结果是${chen},除的结果是${chu}`);

练习5分钟，完成该案例

4.6 转换为布尔型

1. 如何将一个数据转换为布尔型呢？

   • 最简单的做法 !!数据 就可以了

补充： 哪些数据会被转换为false：0,'',NaN,undefined,null

?

第一次写博客，希望能帮助到大家

让大家能认识

1. 编程基础
2. js入门
3. 变量的使用
4. 数据类型
5. 转换数据类型