js基础一

249 阅读7分钟

目录

1. 理解变量是存储数据的"容器"
2.理解什么是数据并知道数据的分类
3.知道JsvsScript数据类型转换的特征

学习目标

1.JavaScript介绍

目录

1. 理解变量是存储数据的"容器"
2.理解什么是数据并知道数据的分类
3.知道JavaScript数据类型转换的特征

学习目标

1.JavaScript介绍

1. JavaScript 是什么
1. 一种运行在客户端浏览器的编程语言
2. JavaScript 组成部分

​ 1.ECMAScript 规范 标准

​ 2.web API (通过js来操作浏览器-网页标签)

2. JavaScript 书写位置
2.写在body结尾上面请看图

JavaScript.png

3. JavaScript 的注释
1. // 单行注释
2.
4. JavaScript的结束符
1.有两种一种是加分号;和不加分号

JavaScript结束符.png

5. JavaScript 引入的方式
1.内联
 <button onclick="alert('逗你玩~~~');"></button>
2.内部
<script>    
   alert (' 你好 js  你也配, 我呸');
</script>
3.外部
<script src="./js/弹出窗口.js"></script>
6. JavaScript 输入和输出
1. 输出

​ console.log()

​ alert()

​ document.write()

2. 输入

​ prompt("你的名字")

7. 子面量
  • 1.小结

JavaScript 介绍小结.png

2.变量

1. 变量是什么?

​ 目标:理解变量是计算机存储数据的"容器"

1. 变量:

​ 1.白话:变量就是一个装东西的盒子。

​ 2.通俗:变量是计算机中用来存储数据的"容器",它可以让计算机变得有记忆。

​ 3.注意:变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

变量是什么.png

  • 变量小结:

JavaScript变量小结.png

2. 变量基本使用(常用)
目标: 掌握变量的声明方式
1. 声明变量:

​ 要想使用变量,首先需要创建变量(专业说法:声明变量)

语法:
let 变量名

​ 声明变量有两部分构成:声明关键字、变量名(标识)

​ let 即关键字(let;允许、许可、让、要),所谓关键字是系统提供的专门用来声明(定义)变量的词语

举例:
let age;

​ age 即变量的名称,也叫标识符

2. 变量赋值:

​ 定义了一个变量后,你就能够初始化它(赋值)。在变量名之后跟上一个"=",然后是数值。

变量.png

​ 注意:是通过变量名来获得变量里面的数据

<script>
    let age = 18
</script>    

变量2.png

3. 更新变量:

​ 变量赋值后,还可以通过简单地给它一个不同的值来更新它。

let age = 18
age = 19
document.write(age)

变量3.png

​ 注意:let不允许多次声明一个变量。

4. 声明多个变量:
let age = 18, uname = 'pink'

变量4.png

  • 变量小结

变量小结.png

3. 变量的本质
目标:能说出变量的本质是什么

​ 内存:计算机中存储数据的地方,相当于一个空间

​ 变量:是程序在内存中申请的一块用来存放数据的小空间

变量的本质.png

4. 变量命名规则与规范
目标:能写出符合规范的变量名

​ **规则:**必须遵守,不遵守报错

​ **规范:**建议,不遵守不会报错,但不符合业内通识

变量规范1.png

以下哪些是合法的变量名?

变量规范png.png

  • 小结

变量规范小结.png

3.数据类型

1. 数据类型(常用)
目标:能说出JS中基本数据类型有哪些

​ 计算机世界中的万事万物都是数据。

​ 计算机程序可以处理大量的数据,为什么要给数据分类?

​ 1. 更加充分和高效的利用内存

​ 2.也更加方便程序员的使用数据

比如:

数据类型.png

JS 数据类型整体分为两大类:
1. 基本数据类型

​ number 数字型

​ string 字符串行

​ boolean 布尔型

​ undefined 未定义型

​ null 空类型

2.引用数据类型

​ object 对象

​ function 函数

​ array 数组

数据类型1.png

1. 数据类型-数字类型(number)
即我们数学中学习到的数学,可以是整数、小数、正数、负数。
let score = 100; //正整数
let price = 12.345; //小数
let temperature = -40; //负数

数字类型.png

JavaScript 中的正数、负数、小数等 统一称为数字类型。

数字类型1.png

2. 数据类型-字符串类型(string)

通过单引号('')、双引号("")或反引号(`)包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号

let user_name = '小明'; //使用单引号
let gender = "男"; //使用双引号
let str = '123'; //看上去是数字,但是用引号包裹了就成了字符串了
let str1 = ''; //这种情况叫空字符串

字符串类型.png

注意事项:

​ 1. 无论单引号或是双引号必须成对使用

​ 2. 单引号/双引号可以互相嵌套,但是不以自己嵌套自己(口诀:外双内单,或者外单内双)

​ 3. 必须时可以转义符\,输出单引号双引号

字符串拼接:
document.write('我叫' + '刘德华')  // 我叫刘德华

let uname = '刘德华'
let song = '忘情水'
document.write(uname + song)   //刘德华忘情水

字符串拼接.png

模板字符串
1. 作用

​ 拼接字符串和变量

​ 在没有它之前,要拼接变量比较麻烦

document.write('大家好,我叫' + name + ', 今年' + age + '岁')

模板字符串.png

2. 符号

​ ``

​ 在英文输入模式下按键盘的tab键上方那个键(1左边那个键)

​ 内容拼接变量时,用${}抱住变量

document.write(`大家好,我叫${name}, 今年${age}岁`)

模板字符串1.png

字符串类型小结

字符串类型小结.png

3. 数据类型-布尔类型(Boolean)

​ 表示肯定或否定时在计算机中对应的是布尔类型数据。

​ 它有两个固定的值true和false,表示肯定的数据用true(真),表示否定的数据用false(假)。

//pink老师帅不帅?回答是或否
let isCool = true;// 是的,摔死了!
isCool = false;// 不,套马杆的汉子!

布尔类型.png

4. 数据类型 - 未定义类型(undefined)

未定义类型.png

​ 未定义是比较特殊的类型,只有一个值undefined。

​ 总结·使用:

未定义类型1.png

5. 数据类型 - null (空类型)

​ null 表示 值为 空

let obj = null

空类型.png

null 和 undefined 区别:

​ 1. undefined 表示没有赋值

​ 2. null 表示赋值了,但是内容为空

null 开发中的使用场景:

​ 官方解释:把 null 作为尚未创建的对象

​ 大白话:将来有变量里面存放的是一个对象,但是对象还没创建好,可以先给个null

  • 小结

数据类型小结.png

2. 检测数据类型
1. 控制台输出语句:

控制台输出语句.png

​ 控制台语句经常用于测试结果来使用。

​ 可以看出数字型和布尔型颜色为蓝色,字符串和undefined颜色为灰色

2. 通过 typeof 关键字检测数据类型

关键字检测数据类型.png

4.类型转换

1. 为什么要类型转换

​ JavaScript是弱数据类型:JavaScript也不知道变量到底属于那种数据类型,只有赋值了才清楚。

​ 抗:使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算。

console.log('10000' + '2000') // 输出结果  100002000

为什么要类型转换.png

​ 此时需要转换变量的数据类型。

​ 通俗来说,就是把一种数据类型的变量转换成我们需要的数据类型。

2. 隐式转换

​ 某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。

规则:

​ 号两边只要有一个是字符串,都会把另外一个转成字符串

除了 + 以外的算术运算符比如 - * / 等都会把数据转成数字类型

缺点:

​ 转换类型不明确,靠经验才能总结

小技巧:

​ + 号作为正号解析可以转换成Number

隐式转换.png

3. 显示转换

编写程序时过度依靠系统内部的隐式转换是不严禁的,因为隐式转换规律并不清晰,大多是靠经验总结的规律。

为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。

概念:

自己写代码告诉系统该转成什么类型

转换为数字型

显示转换.png

转换为字符型:

String(数据)
变量.toString(进制)
  • 类型转换小结

类型转换小结.png

5.实战案例

1.

综合案例.png

综合案例练习.png