javascript基础之一

田小田、

已于 2023-06-16 23:34:02 修改

阅读量61

点赞数 3

分类专栏： javascript 文章标签： javascript

于 2023-03-14 21:16:07 首次发布

本文链接：https://blog.csdn.net/TZJ999919/article/details/129540298

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.什么是JavaScript

是一种运行在客户端（浏览器）的编程语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画等交互效果

2.JavaScript 的书写位置

2.1 内部

<body>
    <!-- 内部js -->
    <script>
        // 弹出警示框 alert
        alert('我是小田')
    </script>
</body>

2.2 外部

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

// demo.js
document.write('嗨，你好！我是小田!!')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	alert(666);  
  </script>
</body>
</html>

3. JavaScript 输入输出语句

3.1 输出语句

语句1 alert(‘页面警示框输出的内容’)

作用 : 页面输出警示框

// 1. 输出语句
//  1.1 alert 页面弹出警示框
// alert('你好,js')

语句2 document.write(‘向页面文档输出内容’)

作用 : 在body标签内输出内容

提示 : 如果输出的内容是标签也会被解析成网页元素

// 1.2 document.write 向页面文档输入内容 显示到页面body标签之内, 可以正常的解析标签
document.write('今日特价')
document.write('<h4>今日特价</h4>')

语句3 console.log(‘控制台输出内容’)

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


// 1.3 console.log 给我们程序员调试使用的   console 控制台
console.log('给我们自己看的')

3.2 输入语句

对话框 prompt (‘请用户输入的内容’)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户输入</title>
</head>
<body>
  
  <script> 
    // 1. 输入的任意数字，都会以弹窗形式展示
    document.write('要输出的内容')
    alert('要输出的内容');

    // 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
    prompt('请输入您的姓名:')
  </script>
</body>
</html>

交互 : 用户输入数据 -> 数据处理 -> 输出给用户结果

4.变量

4.1 什么是变量

理解为装数据的"容器"

变量是计算机中用来存储数据的“容器”，变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

在这里插入图片描述

变量的使用场景存储数据

4.2 变量的基本使用

变量的声明 (创建变量 = 声明的关键字(let) 变量名)

let : 允许许可让要
```
let 变量名
```

变量的赋值(把数据存储到声明的变量里面)

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

=   //赋值号

 	例如 给 age赋值并打印

 <script>
        // 1.声明一个变量
        let age
        // 2.给变量赋值
        age = 19
        // 3.控制台打印输出
        console.log(age)


        // 或者连写
        // 声明并赋值
        let uname = '小田'
        // 打印
        console.log(uname)
    </script>变量的命名规则和规范

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

// 1.更新变量
let age = 18
age = 19
// 注意: 不要多次声明同一个变量
// let age = 19
console.log(age)

5.变量的命名规范和规则

<script>
    // 规则: 必须遵守, 不遵守就报错, 法律
    // 1. 不能用关键字
    // 2. 必须是 _ 字母 数字 $组成, 而且不能以数字开头
    // 3. 区分大小写
    // let let = 10
    let age123 = 18
    // let 123age = 18
    // let age = 18
    // let Age = 18

    // 规范: 建议遵守, 业内规则, 不遵守就是小白
    // 1. 见名知意
    // 2. 小驼峰命名
    let startTime = 19
    let starttime = 19 // 不要这样干, 因为对后期项目是毁灭性的打击
  </script>

6.常量

<script>
    // 常量: 不可变的数据存储在常量中, 常量也是一个容器
    // 与变量的区别仅仅是不可变
    // 注意事项:
    // 1. 不允许重新赋值 (无法修改)
    // 2. 声明时必须赋值
    // 拓展: 一般情况下常量大家都习惯用全大写, _ 连接
    const PI = 3.1415926
    console.log(PI)
    PI = 3.14 // Assignment to constant variable. 不允许给常量赋值
    // 在运行的过程中一旦报错, 会终止代码的执行, 所以
 console.log(PI)打印不会出现
    console.log(PI)
  </script>

7.数据类型的分类

7.1基本数据类型

1.number 数字型

2.string 字符串型

3.boolean 布尔型

4.undefined 未定义型

5.null 空类型

7.2 引用数据类型

object 对象

function

Array

7.3 typeof 专门用于检查变量的类型

  <script>
    // number 类型, 一般用于计算: 加减乘除模(取余)
    let age = 18
    let price = 88.88
    // typeof 专门用于检查变量的类型
    console.log(typeof age)
    console.log(typeof price) //age 和 price后台打印number型

    // string 类型, 在 js 中用引号包裹的数据
    // 引号: 单引号'' 双引号"" 反引号(重音符)``
    // 注意: 必须成对出现, 不能用 ' 开头 " 结尾
    let uname = '小田'
    let box = "盒子"
    let address = `深圳`
    console.log(typeof uname) // 后台打印的nuame 是string型
  </script>

8.模板字符串

8.1 使用场景

拼接 字符串 和变量

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

9.2 语法

`` 反引号

内容拼接变量时用**${变量}**包住变量

 		let age = 20
        // 模板字符串 外面用 `` 里面 ${变量名}
        document.write(`我今年${age}岁了`)

9.运算符

9.1赋值运算符

对变量进行赋值的运算符 =

= 赋值运算符的执行过程：

将等号右边的值赋予给左边要求左边必须是一个容器

 <script>
        let num = 2
        // num = num + 3  等于    num += 3
        num += 3
        console.log(num);
        // for (let i = 0; i < 5; i++) {
        // }

    </script>

9.2 一元运算符

例 : 正负号

只需要一个表达式就可以运算的运算符叫做一元运算符

使用场景 : 经常用于计算多少次 (算数的时候)

一般开发中常用的是后置++ 单独使用

<body>
    <!-- 一元运算符 正负号 -->
    <script>
        let num = 10
        // num = num + 1
        // num += 1
        //     自增            自减      一元运算符 
        // 符号 ++             --
        // 作用 让变量 +1     让变量 -1

        // 1.前置自增
        // let i = 1
        // ++i
        // console.log(i)



        // 2.后置自增
        // let i = 1
        // i++
        // console.log(i)

        // 每次执行 当前变量数值加 1  相当于  num + 1


        // 3. ++i 和 i++ 区别   (了解)
        // 单独使用没有区别
        // 前置自增 ++i  先自加 再使用 
        // 例如
        // let i = 1
        // console.log(++i + 1) //结果是 3
        // 控制台打印出来就就是 3  这里先++i自增 再与 1 相加

        // 后置自增 i++ 先使用再自加     后置自增 后期开发常用
        let i = 1
        console.log(i++ + 1) //结果是 2
        // 此时的i 是 1
        // 先和 1 相加 ,先运算输出完毕后,i再自加是 2 
    </script>
</body>

9.3比较运算符

比较运算符:

使用场景比较两个数据大小、是否相等

比较运算符控制台,比较结果为 boolean类型; 返回的要么是 true 要么是 false

切记只要是判断就写三等 ===

在这里插入图片描述

 <script>
        console.log(3 > 5)    //后台打印出来为false
        console.log(3 >= 5)   //后台打印出来为 false

        // 比较运算符有隐式转换 把'2' 转换为 2  双等号 只判断值
        console.log(2 == '2')
        // 全等 判断 值 和 数据类型 都一样才行   常用
        // 以后判断是否相等  请用  ===  三等      全等  类型 和   值 都一样
        console.log(2 === '2')  //后台打印 为 false

        console.log(NaN === NaN) // NaN 不等于任何人  包括他自己
    </script>

]

 <script>
        console.log(3 > 5)    //后台打印出来为false
        console.log(3 >= 5)   //后台打印出来为 false

        // 比较运算符有隐式转换 把'2' 转换为 2  双等号 只判断值
        console.log(2 == '2')
        // 全等 判断 值 和 数据类型 都一样才行   常用
        // 以后判断是否相等  请用  ===  三等      全等  类型 和   值 都一样
        console.log(2 === '2')  //后台打印 为 false

        console.log(NaN === NaN) // NaN 不等于任何人  包括他自己
    </script>