轻松玩转JavaScript基础01

顾伊
331 阅读3分钟

JavaScript基础语法

本章内容:

1.JavaScript简介

2.JavaScript 书写位置

3.JavaScript 结束符

4.JavaScript 输入输出语法

5.JavaScript 代码执行顺序：

6.变量

7.常量

8.数据类型

9.类型转换

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

11.银行卡余额案例

JavaScript是什么？

JavaScript 是一种运行在 客户端（浏览器） 的编程语言

JavaScript组成是什么？

ECMAScript( 基础语法 )、web APIs （DOM、BOM）

JavaScript基础

JavaScript 书写位置

内部 JavaScript

直接写在html文件里，用script标签包住

规范 ：script标签写在上面

image.png

外部 JavaScript

代码写在以.js结尾的文件里

语法：  通过script标签，引入到html页面中。

image.png

内联 JavaScript

代码写在标签内部

image.png

JavaScript 注释 单行注释 符号： // 作用： //右边这一行的代码会被忽略 快捷键： ctrl + /

image.png

块注释

符号：  /* */

作用：  在/* 和 */ 之间的所有内容都会被忽略

快捷键：  shift + alt + A

image.png

JavaScript 结束符

结束符

作用： 使用英文的 ; 代表语句结束

实际情况： 实际开发中，可写可不写, 浏览器(JavaScript 引擎) 可以自动推断语句的结束位置

现状： 在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符

约定： 为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）

JavaScript 输入输出语法

输出语法：

语法1：

image.png

作用：  向body内输出内容

注意：  如果输出的内容写的是标签，也会被解析成网页元素

语法2：

image.png

作用：  页面弹出警告对话框

语法3：

image.png

作用：  控制台输出语法，程序员调试使用

输入语法：

语法：

image.png

作用：  显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

效果:

image.png

JavaScript 代码执行顺序：

按HTML文档流顺序执行JavaScript代码

alert() 和 prompt() 它们会跳过页面渲染先被执行（目前作为了解，后期讲解详细执行过程）

变量是什么？

变量是计算机存储数据的“ 容器 ”

白话：变量就是一个装东西的盒子。

通俗：变量是计算机中用来 存储数据 的“ 容器 ”，它可以让计算机变得有记忆。

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

  1. 声明变量：

要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）

语法：

let 变量名

声明变量有两部分构成：声明关键字、变量名（标识）

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

  1. 变量赋值：

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。

image.png

3. 更新变量：

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

image.png

  1. 声明多个变量： 变量赋值后，还可以通过简单地给它一个不同的值来更新它。

语法： 多个变量中间用逗号隔开。

image.png

说明： 看上去代码长度更短，但并不推荐这样。为了更好的可读性，请一行只声明一个变量。

image.png

变量命名规则与规范

  1. 规则： 不能用关键字

关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等

只能用下划线、字母、数字、$组成，且数字不能开头

字母严格 区分大小写 ，如 Age 和 age 是不同的变量

  1. 规范： 起名要有意义

遵守小驼峰命名法

第一个单词首字母小写，后面每个单词首字母大写。例：userName

let 和 var 区别：

在较旧的JavaScript，使用关键字 var 来声明变量 ，而不是 let。

var 现在开发中一般不再使用它，只是我们可能再老版程序中看到它。

let 为了解决 var 的一些问题。

var 声明:

可以先使用 在声明 (不合理)

var 声明过的变量可以重复声明(不合理)

比如变量提升、全局变量、没有块级作用域等等

现在不用var

数组 (Array) —— 一种将 一组数据存储在单个变量名下 的优雅方式

数组是按顺序保存，所以每个数据都有自己的编号

计算机中的编号从0开始

在数组中，数据的编号也叫 索引或下标

数组可以存储任意类型的数据

image.png

 <script>
 
    let arr = ['王德发', '王安邦', '厚礼蟹']
    console.log(arr)
    console.log(arr[0])
    console.log(arr[2])
    console.log(arr.length)
  </script>

常量的基本使用

概念： 使用 const 声明的变量称为“常量”。

使用场景： 当某个变量永远 不会改变 的时候，就可以使用 const 来声明，而不是let。

命名规范： 和变量一致

注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）

小技巧： 不需要重新赋值的数据使用const

let — 现在实际开发变量声明方式。

var — 以前的声明变量的方式，会有很多问题。

const — 类似于 let ，但是变量的值无法被修改。

数据类型

JS 数据类型整体分为两大类：

基本数据类型:

number 数字型

string 字符串型

boolean 布尔型

undefined 未定义型

null 空类型

引用数据类型:

object 对象

数据类型 – 数字类型（Number）:

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

JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认

Java是强数据类型 例如 int a = 3 必须是整数

数字可以有很多操作，比如，乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

数学运算符也叫 算术运算符 ，主要包括加、减、乘、除、取余（求模）。

求和

 <script>
    let num1 = +prompt('请输入第一个数字')
    let num2 = +prompt('请输入第二个数字')
    let num = num1 + num2
    // document.write(`两个数字的和是:${num1 + num2}`)
    document.write(`两个数字的和是:${num}`)
  </script>
</body>

优先级 顺序

同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。

JavaScript中 优先级越高越先被执行， 优先级相同时以书从左向右执行 。

乘、除、取余优先级相同

加、减优先级相同

乘、除、取余优先级大于加、减

使用 () 可以提升优先级

总结： 先乘除后加减，有括号先算括号里面的

计算球的体积

<script>
    let r = prompt('请输入球的半径')
    let bor = 4 / 3 * 3.14 * r * r * r
    document.write(bor)
  </script>

image.png

image.png

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

数据类型 – 字符串类型（string）:

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

注意事项：

  1. 无论单引号或是双引号必须成对使用
  2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
  3. 必要时可以使用转义符 \，输出单引号或双引号
 <script>
    let str = '王德发'
    let str1 = "王德发1"
    let str2 = `王德发2`
    console.log(str2)
    let num = '10'
    let num2 = 20
    console.log(num)
    console.log('王德发很帅')
    console.log('王德发很"帅"')
    let str3 = '王德发 '
    console.log(str3.length)
    console.log(1 + 2)
    console.log(1 + '2')
    let age = 22
    document.write('我今年' + age + '岁了')
    console.log('我叫' + '王德发')
    // 模板字母串
    let uname = '厚礼蟹'
    document.write(`我叫${uname}, 今天${age}了`)
  </script>

数据类型 – 布尔类型（boolean）

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

它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

数据类型 – 未定义类型（undefined）

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

什么情况出现未定义类型？

只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

工作中的使用场景：

我们开发中经常声明一个变量，等待传送过来的数据。

如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传 递过来。

数据类型 – null（空类型）

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

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

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：

  1. 作为运算符： typeof x （常用的写法）

  2. 函数形式： typeof(x)

换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用 运算符 的写法。

类型转换

1.隐性转换

规则：

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

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

缺点：

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

小技巧：

+号作为正号解析可以转换成数字型

任何数据和字符串相加结果都是字符串

<script>
    console.log(1 + 1)//2
    console.log('1' + '1')//11
    console.log('1' + 1)//11
    console.log(1 - 1)//0
    console.log(1 - '1')//0
    console.log(+'15')//数字15
    console.log('1' * 1)//1
    console.log(10 / '5')//2
  </script>

2.显性转换

概念：

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

转换为数字型

Number(数据)

转成数字类型

如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字

NaN也是number类型的数据，代表非数字

parseInt(数据) 只保留整数

parseFloat(数据) 可以保留小数

<script>
    //转换为数字
    let str = '123'
    console.log(typeof Number(str))//number
    console.log(Number('dj'))//NaN
    console.log(Number('舞曲'))//NaN
    console.log(parseInt('12px'))//12
    console.log(parseInt('12.556'))//12
    console.log(parseInt('dj12.556'))//NaN
    console.log(parseFloat('12.556'))//12.556
    console.log(parseFloat('12.556px'))//12.556
    console.log(parseFloat('dj12.556px'))//NaN
    console.log(parseFloat('12.00'))//12
    //转换为字符串
    let num = 10
    let str1 = num.toString()
 
  </script>

计算银行卡余额案例

html部分

<h2>2022年4月消费支出</h2>

css部分

<style>
    h2 {
      text-align: center;
      margin: 100px auto;
    }
 
    table {
      border-collapse: collapse;
      text-align: center;
      height: 80px;
      margin: 0 auto;
 
    }
 
    th {
      padding: 5px 30px;
    }
 
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>

js部分

<script>
    let zonge = prompt('请输入总额')
    let shuifei = prompt('请输入水费')
    let dianfei = prompt('请输入电费')
    let wangfei = prompt('请输入网费')
    let yue = zonge - shuifei - dianfei - wangfei
    document.write(`
       <table>
      <tr>
        <th>银行卡总额</th>
        <th>水费</th>
        <th>电费</th>
        <th>网费</th>
        <th>银行卡余额</th>     
      </tr>
      <tr> 
        <td>${zonge}</td>
        <td>${shuifei}</td>
        <td>${dianfei}</td>
        <td>${wangfei}</td>
        <td>${yue}</td>
      </tr>
    </table>
    `)
  </script>

image.png

image.png

最后是原图(●ˇ∀ˇ●)

wallhaven-k7elm6.jpg

avatar
文章
阅读
粉丝
相关推荐
# JavaScript 基础（二）
483阅读
 · 
9点赞
Python 高级编程之网络编程 SocketServer（七）
2.7k阅读
 · 
26点赞
JavaScript深入系列、JavaScript专题系列、ES6系列、React系列
451阅读
 · 
1点赞
测试平台系列(89) 编写执行测试计划功能
1.1k阅读
 · 
4点赞
什么是 IPv6？IPv6有哪些优势？
861阅读
 · 
1点赞