JavaScript基础

guai_guai_guai

已于 2024-03-31 14:49:44 修改

阅读量1.3k

点赞数 30

文章标签： javascript 开发语言 ecmascript

于 2024-03-12 22:48:13 首次发布

本文链接：https://blog.youkuaiyun.com/guai_guai_guai/article/details/136635823

版权

介绍

JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

作用:

网页特效（监听用户的一些行为让网页做出对应的反馈）（）

表单验证（针对表单数据的合法性进行判断）

数据交互（获取后台的数据，渲染到前端）

服务端编程（node.js）

组成：

ECMAScript：规定了js基础愈发的核心知识。比如：变量、分支语句、循环语句、对象等等

Web APIs:

DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

BOM 操作浏览器、比如页面弹窗，检测窗口宽度、存储数据到浏览器等

JavaScript权威网站: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

JS书写位置：

内部JavaScript:

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

规范：sricpt标签写在</body>上面

拓展：alert('你好，js')页面弹出警告对话框

注意事项：

将script标签写在body元素上方原因：浏览器会按照代码在文件中的顺序加载HTML。如果先加载的JavaScript期望修改其下方的HTML，那么他可能由于HTML尚未加载成功而失效，因此，将js代码放在HTML页面的底部附近通常是最好的策略。

<body>
  <!-- 内部js -->
  <script>
    // 页面弹出警示框
    alert('你好，js')
  </script>
</body>

外部javascript：

<body>
  <!-- 通过src引入js文件 -->
  <script src="./JavaScript基础/js/my.js">
    // 中间不要写内容 写了会被忽略
  </script>
</body>

内联javascript

代码写在标签内部

<body>
  <!-- 内联js -->
  <button onclick="alert('你好js')">点我呀</button>
</body>

javascript注释

单行注释：符号：// 作用：//右边这一行代码均会被忽略

快捷键：ctrl+/

多行注释:符号：/**/ 作用：在/**/之间的所有的内容都会被忽略

快捷键：shift+alt+a

JavaScript结束符

作用:使用英文的;代表结束

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

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

约定：为了风格统一，结束符要么每句都写，要么每句都不写

<body>
  <script>
    alert('第一句话');
    alert('第二句话');
    alert('第三句话');
  </script>
</body>

JavaScript输入输出语法

输出语法:

1. 向body中输入内容，如果输入的内容为标签，也会被解析成网页元素

<body>
  <script>
    // 文档输出内容
    document.write('我是div标签')
    document.write('<h1>我是标题</h1>')
  </script>
</body>

2.页面弹出警示框

alert('输入内容')

3.控制台输出语法，程序员调试使用

<body>
  <script>
    // 控制台打印输入 给程序员
    console.log('控制台打印')
  </script>

变量

当用户输入数据时，可使用变量将其存储起来，变量就是一个装东西的盒子，是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。

变量的基本使用

1.声明变量

语法：

let 变量名

声明变量由两部分构成：声明关键字、变量名（标识）
let即关键字（let：允许、许可、让、要），所谓关键字是系统提供的专门用来声明变量的词语

2.更新变量

直接给声明过的变量直接赋值即可，注意：变量不可以重复声明

3.声明多个变量

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

tip：逗号在css中表示并集选择器

 let age=18,uname='名字'
    console.log(age,uname)

变量案例：弹出姓名

先获取用户输入的姓名，再向屏幕中输出用户输入的数据

let uname = prompt('请输入姓名')
    document.write(uname)

变量的命名规则与规范

规则：

不能使用关键字，如（let，var，if，for）
js中变量只能使用$ _两个特殊字符，其余均不可出现，且数字不能开头
字母严格区分大小写

规范：起名要有意义，遵循小驼峰命名法（第一个单词首字母小写，后面每个单词首字母大写，例如：userName）

输入姓名年龄案例：

<script>
    let uname=prompt('请输入姓名')
    let age=prompt('请输入年龄')
    let gender=prompt('请输入性别')
    document.write(uname,age,gender)
  </script>

var和let的区别：

var声明：

可以先使用后声明（不合理）

var声明过的变量可以重复声明（不合理）

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

数组（array）——一种将一组数据存储在单个变量名下的方式

  <script>
    let arr=[] //变量=数组字面量
    let a=['刘德华','张学友','黎明','郭富城']
    console.log(a[0])// 刘德华 数组名[索引号]从0开始
    console.log(arr)
    console.log(a)
    console.log(arr.length)//3
  </script>

常量的基本使用

概念：使用const声明的变量成为常量

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

命名规范：和变量一致

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

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

<script>
  // 常量
    const PI=3.14
    console.log(PI)
</script>

数据类型

给数据分类的原因：

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

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

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

基本数据类型：

number 数字型

数学中学习到的数字，可以是整数，小数，正数，负数，统一称为数字类型
数字的乘除余优先级相同

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

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

简单案例：

计算圆的面积

  <script>
    // 1.页面弹出输入框
    // 2.计算圆的面积
    // 3.页面输出
    let r=prompt("请输入圆的半径:")
    let result=3.14*r*r;
    document.write(result)
  </script>

注意：

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果（not a number）
NaN跟任何数进行操作都返回 NaN
 console.log(NaN+1);

string 字符串型

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

注意：单引号只会找距离其最近的单引号进行匹配，若想在单引号中加入引号，就不可再加单引号，但是可以添加双引号，外双内单或外单内双。

若外面已经有单引号，但是内部还想使用单引号，就需要在内部每个单引号之前添加一个转义字符\,即可实现效果。

console.log('你好,\'js\'')

+号运算符：

可以实现字符串的拼接。
口诀：数字相加，字符相连

  <script>
    let age=22
    document.write('我今年'+age+'岁了')
  </script>

模板字符串：将变量在${变量名}中包括，最外面要用反引号包含

    let age =20
    document.write(`今年我${age}岁了`)

小案例：页面弹出对话框，输入名字和年龄，页面显示：大家好，我是XXX，我今年XX岁了

    let name=prompt('请输入姓名')
    let age=prompt('请输入年龄')
    document.write(`大家好,我是${name},我今年${age}岁了`)

注意外面是反引号

boolean 布尔型

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

它有两个固定的值，表示肯定的数据用true，表示否定的数据用false

undefined 未定义型

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

null 空类型

js中的null仅仅代表一个代表“无”，“空”或“值未知”的特殊值

let obj=null

null和undefined区别：

undefined 表示没有赋值，null表示赋值了，但是内容为空

计算时的区别

    //null和undefined计算有区别
    console.log(undedined+1)//NaN
    console.log(null+1)//1

引用数据类型：object 对象

检测数据类型

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

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

2.函数形式：typeof(x)

    let num=10
    console.log(typeof num)
    let str='pink'
    console.log(typeof str)
    let flag=false
    console.log(typeof flag)

类型的转换

js型prompt,表单，单选框，复选框取过来的值默认都是字符串数据类型，不能直接进行简单的加法，这时就需要经过类型转换

隐式转换

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

规则：

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

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

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

小技巧：

+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

显示转换

编写程序时过度依靠系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

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

转换为数字型

Number(数据)

tip：蓝色为number型，黑色为字符型

parselnt（数据）

只保留整数

    console.log(num)
    console.log(parseInt('12px'))//12
    console.log(parseInt('12.34px'))//12
    console.log(parseInt('12.94px'))//12

parseFloat（数据）

可以保留小数

    console.log(parseFloat('12.px'))//12
    console.log(parseFloat('12.34px'))//12.34
    console.log(parseFloat('12.94px'))//12.94

tip：保留数字时只取前面的数字，若数字在中间则不会识别数字

运算符

===左右两边类型和值是否完全相等

==左右两边值是否相等

比较运算符有隐式转换

<script>
  console.log(3 > 5)
  console.log(3 >= 3)
  console.log(2 == 2)
  // 比较运算符有隐式转换 把'2' 转换为 2  双等号 只判断值
  console.log(2 == '2')  // true
  // console.log(undefined === null)
  // === 全等 判断 值 和 数据类型都一样才行
  // 以后判断是否相等 请用 ===  
  console.log(2 === '2')
  console.log(NaN === NaN) // NaN 不等于任何人，包括他自己
  console.log(2 !== '2')  // true  
  console.log(2 != '2') // false 
  console.log('-------------------------')
  console.log('a' < 'b') // true
  console.log('aa' < 'ab') // true
  console.log('aa' < 'aac') // true
  console.log('-------------------------')
</script>

逻辑运算符优先级

!>&&>||

断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug

浏览器打开调试界面

按F12打开开发者工具
点到源代码一栏（ sources ）
选择代码文件

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

综合案例 ATM存款机

分析：

①：提示输入框写到循环里面（无限循环）

②：用户输入4则退出循环 break

③：提前准备一个金额预先存储一个数额 money

④：根据输入不同的值，做不同的操作

(1) 取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额

(2) 可以使用 if else if 多分支来执行不同的操作

完整代码：

<script>
  // 1. 开始循环 输入框写到 循环里面
  // 3. 准备一个总的金额
  let money = 100
while (true) {
  let re = +prompt(`
请您选择操作：
1.存钱
2.取钱
3.查看余额
4.退出
`)
  // 2. 如果用户输入的 4 则退出循环， break  写到if 里面，没有写到switch里面， 因为4需要break退出循环
  if (re === 4) {
    break
  }
  // 4. 根据输入做操作
  switch (re) {
    case 1:
      // 存钱
      let cun = +prompt('请输入存款金额')
      money = money + cun
      break
      case 2:
      // 存钱
      let qu = +prompt('请输入取款金额')
      money = money - qu
      break
      case 3:
      // 存钱
      alert(`您的银行卡余额是${money}`)
      break
  }
}
</script>

if 多分支语句和 switch的区别：

共同点
- 都能实现多分支选择，多选1
- 大部分情况下可以互换
区别：
- switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
- switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
- switch 一定要注意必须是 === 全等，一定注意数据类型，同时注意break否则会有穿透效果
- 结论：
  - 当分支比较少时，if…else语句执行效率高。
  - 当分支比较多时，switch语句执行效率高，而且结构更清晰。

for 语句

掌握 for 循环语句，让程序具备重复执行能力

for 是 JavaScript 提供的另一种循环控制的话句，它和 while 只是语法上存在差异。

for语句的基本使用

实现循环的 3 要素

<script>
  // 1. 语法格式
  // for(起始值; 终止条件; 变化量) {
  //   // 要重复执行的代码
  // }

  // 2. 示例：在网页中输入标题标签
  // 起始值为 1
  // 变化量 i++
  // 终止条件 i <= 6
  for(let i = 1; i <= 6; i++) {
    document.write(`<h${i}>循环控制，即重复执行<h${i}>`)
  }
</script>

变化量和死循环，for 循环和 while 一样，如果不合理设置增量和终止条件，便会产生死循环。
跳出和终止循环

<script>
    // 1. continue 
    for (let i = 1; i <= 5; i++) {
        if (i === 3) {
            continue  // 结束本次循环，继续下一次循环
        }
        console.log(i)
    }
    // 2. break
    for (let i = 1; i <= 5; i++) {
        if (i === 3) {
            break  // 退出结束整个循环
        }
        console.log(i)
    }
</script>

结论：

JavaScript 提供了多种语句来实现循环控制，但无论使用哪种语句都离不开循环的3个特征，即起始值、变化量、终止条件，做为初学者应着重体会这3个特征，不必过多纠结三种语句的区别。
起始值、变化量、终止条件，由开发者根据逻辑需要进行设计，规避死循环的发生。
当如果明确了循环的次数的时候推荐使用for循环,当不明确循环的次数的时候推荐使用while循环

注意：for 的语法结构更简洁，故 for 循环的使用频次会更多。

循环嵌套

利用循环的知识来对比一个简单的天文知识，我们知道地球在自转的同时也在围绕太阳公转，如果把自转和公转都看成是循环的话，就相当于是循环中又嵌套了另一个循环。

实际上 JavaScript 中任何一种循环语句都支持循环的嵌套，如下代码所示：

// 1. 外面的循环 记录第n天 
for (let i = 1; i < 4; i++) {
    document.write(`第${i}天 <br>`)
    // 2. 里层的循环记录 几个单词
    for (let j = 1; j < 6; j++) {
        document.write(`记住第${j}个单词<br>`)
    }
}

记住，外层循环循环一次，里层循环循环全部

倒三角

 // 外层打印几行
for (let i = 1; i <= 5; i++) {
    // 里层打印几个星星
    for (let j = 1; j <= i; j++) {
        document.write('★')
    }
    document.write('<br>')
}

九九乘法表

样式css

span {
    display: inline-block;
    width: 100px;
    padding: 5px 10px;
    border: 1px solid pink;
    margin: 2px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
    background-color: rgba(255, 192, 203, .1);
    text-align: center;
    color: hotpink;
}

javascript

 // 外层打印几行
for (let i = 1; i <= 9; i++) {
    // 里层打印几个星星
    for (let j = 1; j <= i; j++) {
        // 只需要吧 ★ 换成  1 x 1 = 1   
        document.write(`
		<span> ${j} x ${i} = ${j * i} </span>
     `)
    }
    document.write('<br>')
}