JavaScript学习

已于 2023-05-31 21:49:12 修改
阅读量158 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
于 2023-05-31 21:48:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75047119/article/details/130771401
版权
本文介绍了JavaScript的基础知识，包括变量的声明、赋值和类型转换，数据类型的分类如数字、字符串、布尔值等，以及函数的使用和作用域。此外，还讲解了数组的声明、操作和遍历，以及循环和分支语句的运用，如for、while、if/else和switch。文章还涉及了对象的概念和使用，包括属性和方法。
摘要由CSDN通过智能技术生成

JavaScript学习---sp

变量、数据类型

JavaScript介绍

JavaScript是什么

  1. JavaScript(是什么？)
    是一种运行在客户端(浏览器)的编程语言，实现人机交互效果。

  2. 作用(做什么？)
    一 网页特效(监听用户的一些行为让网页作出对应的反馈)
    一表单验证(针对表单数据的合法性进行判断)
    一 数据交互（获取后台的数据，渲染到前端）
    一 服务端编程(node.js)

  3. JavaScript的组成(有什么？)
    —ECMAScript:
    规定了js基础语法核心知识。
    比如：变量、分支语句、循环语句、对象等等
    —Web APIs:
    DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
    BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

在这里插入图片描述

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

JavaScript书写位置

内部JavaScrip

直接写在html文件里，用script标签包住
规范：script标签写在上面
拓展：alert(‘你好，js’)页面弹出警告对话框

   <script>
      alert（'嗨')
   </script>
</body>

注意事项：
我们将<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML。如果先加载的JavaScript期望修改其下方的HTML，那么它可能由于HTML尚未被加载而失效。因此，将JavaScript代码放在HTML页面的底部附近通常是最好的策略。

外部JavaScript

代码写在以.js结尾的文件里
语法：通过script标签引入到html页面中

<body>
   <!--通过scr引入外部js文件-->
   <script scr="my.js"></script>
</body>

注意事项：
1.script标签中间无需写代码，否则会被忽略！
2.外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读，因此这是个好的习惯。

内联JavaScript

代码写在标签内部,了解即可

<body>
   <button onclick="alert('哈哈哈')">点我</button>
</body>

JavaScript的注释

  • 单行注释
    符号：//
    作用：//右边这一行的代码会被忽略
    快捷键：ctrl+/
  • 块注释
    符号：/* */
    作用：在/和/之间的所有内容都会被忽略
    快捷键：shift +alt + a
<script>
//这种是单行注释的语法
//一次只能注释一行
//可以重复注释
</script>

<script>
/*这种的是多行注释的语法*/
/*
更常见的多行注释是这种写法
在些可以任意换行
多少行都可以
*/
</script>

JavaScript的结束符

作用：使用英文的 ；代表语句结束
实际情况：实际开发中，可写可不写，浏览器(JavaScript引擎)可以自动推断语句的结束位置
现状：在实际开发中，越来越多的人主张书写JavaScript代码时省略结束符
约定：为了风格统一，结束符要么每句都写，要么每句都不写(按照团队要求.)

输入和输出语法

输出语法
  1. 作用：向body内输出内容
    注意：如果输出的内容写的是标签，也会被解析成网页元素
document.write('输出的内容')
  1. 作用：页面弹出警告对话框
alert('输出的内容')
  1. 作用：控制台输出语法，程序员调试使用
console.log('控制台打印')
输入语法

语法：

prompt('请输入您的姓名:')

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

JavaScript代码执行顺序

按HTML文档流顺序执行JavaScript代码
alert()和prompt()他们会跳过页面渲染先被执行

字面量

字面量就是在计算机中描述事/物
比如：
我们工资是：1000 此时1000 就是 数字字面量
'黑马程序员’字符串字面量
还有接下来我们学的[ ]数组字面量 { }对象字面量 等等

变量

变量是什么

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

变量基本使用

声明变量

使用变量之前得先创建/声明/定义变量
语法：

let 变量名
let age

-声明变量有两部分构成：声明关键字、变量名（标识）
-let即关键词，所谓关键词是系统提供的专门用来声明（定义）变量的词语

变量赋值

定义了变量后就能够变量赋值

// 1.声明一个age变量
let age
// 2.age变量赋值为18
age=18
// 3.输出age变量
alert(age)

变量初始化：声明变量的时候直接完成赋值操作

<script>
// 1.声明一个age变量,同时里面存放了18这个数据
let age=18
</script>
更新变量
<script>
// 声明一个age变量,同时里面存放了18这个数据
let age=18
//变量里面的数据发生变化更改为19
age=19
//页面输出的结果为19
document.write(age)
</script>

注意：let不允许多次声明一个变量

声明多个变量

不推荐

<script>
let age=18,uname='pink'
</script>

推荐

<script>
//多行变量声明有点长，但更容易阅读
let age=18
let uname='pink'
</script>

案例

  1. 输入用户名
<script>
//输出用户名案例
//1.用户输入
//prompt('请输入姓名')
//2.内部处理保存数据
let uname=prompt('请输入姓名')
//3.打印输出
document.write(uname)
</script>
  1. 交互两个变量
<script>
let num1='pink老师'
let num2='hh'
let temp
//都是把右边给左边
temp=num1
num1=num2
num2=temp
console.log(num1,num2)
</script>

变量的本质

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

变量命名规则与规范

  1. 规则：
    -不能用关键字（有特殊含义的字符，JavaScript内置的一些英语词汇。例如：let、var、if、for等；
    -只能用下划线、字母、数字、$组成，且数字不能开头
    -字母严格区分大小写，如Age和age是不同的变量
  2. 规范：
    -起名要有意义
    -遵守小驼峰命名法（第一个单词首字母小写，后面每个单词首字母大写，例如：userName

案例

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

变量拓展-let和var的区别

var声明：可以先使用再声明（不合理）
var声明过的变量可以重复声明（不合理）
比如变量提升、全局变量、没有块级作用域等等

常量

概念：使用const声明的变量称为“常量”
使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let
命名规范：和变量一致
常量使用：

<script>
//声明一个常量
const G=9.8
//输出这个常量
console.log(G)
</script>

注意：常量不允许重新赋值，声明的时候必须赋值
小技巧：不需要重新赋值的数据使用const

数据类型

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

  1. 基本数据类型（number数字型、string字符串型、boolean布尔型、undefined未定义型、null空类型）
  2. 引用数据类型（object对象）

数字类型number

Javascript中的正数、负数、小数等统一称为数字类型。
注意事项：js是弱数据类型，变量到底属于哪种类型只有赋值后才能确认。
例子-计算圆的面积：

//1.页面弹出输入框
let r=prompt('请输入圆的半径')
//2.计算圆的面积(内部处理）
let re=3.14*r*r
//3.页面输出
document.write(re)

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

console.log('老师'-2)   //NaN

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

console.log(NaN+2)   //NaN

字符串类型string

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

let uname='小明'  //使用单引号
let gender="男"  //使用双引号
let goods=`小米`  //使用反引号
let tel='11111111'  //看上去是数字，但是引号包裹了就是字符串
let str=''  //这种情况叫空字符串

注意事项：
1.无论单引号还是双引号必须成对使用
2.单/双引号可以互相嵌套，但是不以自己嵌套自己（口诀：外双内单/外单内双）
3.必要时可以使用转义符\，输出单引号或双引号

模板字符串
  • 使用场景：拼接字符串和变量，没有它之前拼接变量比较麻烦
document.write('大家好，我叫'+name+',今年'+age+'岁了')
  • 语法：内容拼接变量时，用${}包住变量
document.write(`大家好，我叫${name},今年${age}岁了`)

布尔类型boolean

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

let isCool=true
console.log(isCool)

未定义类型undefined

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

let age  //声明变量但是未赋值
document.write(age)  //输出undefined

工作使用场景：判断用户是否有数据传递过来。

空类型null

Javascript中的null仅仅是一个代表"无"、"空"或"值未知"的特殊值

let obj=null
console.log(obj)  //null

null和undefined的区别：undefined表示没有赋值；nul表示赋值了，但是内容为空。
工作场景：有个变量里面存放的是一个对象，但是对象还未创建好，可以先给个null。

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

typeof运算符可以返回被检测的数据类型，支持两种语法形式：
1.作为运算符：typeof x（常用的写法）
2.函数形式：typeof（x）

let age=18
let uname='刘德华'
let flag=false
let buy 
console.log(typeof age)  //number
console.log(typeof uname)  //string
console.log(typeof flag)  //boolean
console.log(typeof buy)  //undefined

类型转换

隐式转换

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

规则：
1.+号两边只要有一个是字符串，都会把另一个转成字符串
2.除了+以为的算术运算符如-*/等都会把数据转成数字类型

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

console.log(11+11)  //22
console.log('11'+11)  //1111
console.log(11-11)  //0
console.log('11'-11)  //0
console.log(1*1)  //1
console.log('1'*1)  //1
console.log(typeof '123')  //string
console.log(typeof +'123')  //number
console.log(+'11'+11)  //22

显示转换

转换为数字型
  1. Number(数据）
    转成数字类型；如果字符串内容里有非数字，转换失败时结果为NaN(Not a Number)即不是一个数字；NaN也是number类型的数据，代表非数字
  2. parseInt(数据）
    只保留整数
  3. parseFloat(数据）
    可以保留小数
let str ='123'
console.log(Number(str))  //123
console.log(Number('pink'))  //NaN
// Let num = Number(prompt('输入年薪'))
// Let num = +prompt('输入年薪')
// console.log(Number(num))
// console.Log(num) 
console.log(parseInt('12px'))  //12
console.log(parseInt('12.34px'))  //12
console.log(parseInt('12.94px'))  //12
console.log(parseInt('abc12.94px')) //NaN
//---------------------
console.log(parseFloat('12px'))  // 12
console.log(parseFloat('12.34px'))  // 12.34
console.log(parseFloat('12.94px'))  // 12.94
console.log(parseFloat('abc12.94px'))  //NaN

求和案例：

// 1. 用户输入 prompt 得到是字符串类型 要转换为 数字型
let num1 = +prompt('请输入第一个数字：')
let num2 = +prompt('请输入第二个数字：')
// 2. 输出
alert(`两个数相加的和是：${num1 + num2}`)
转换为Boolean型

显示转换：
1.Boolean(内容)
‘’、0、undifined、null、false、NaN转换为布尔值后都是false，其余为true
隐式转换：

  1. 有字符串的加法"“+1，结果是"1”
  2. 减法-只能用于数字，它会使空字符串""转换为0
  3. null经过数字转换之后会变为0
  4. undefined经过数字转换之后会变成NaN
console.log(''-1)//-1
console.log('pink'-1)//NaN
console.log(null+1)//1
console.log(undifined+1)//NaN
console.log(NaN+1)//NaN

实战案例

在这里插入图片描述

// 1. 用户输入 
let price = +prompt('请输入商品价格:')
let num = +prompt('请输入商品数量:')
let address = prompt('请输入收货地址:')
// 2. 计算总额
let total = price*num
//3.页面打印渲染
document.write('
     <table>
       <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>总价</th>
        <th>收货地址</th>
      </tr>
      <tr>
       <td>小米青春版</td>
       <td>${price}元</td>
       <td>${num}</td>
       <td>${total}元</td>
       <td>${address}</td>
      </tr>
    </table>')

运算符、分支、循环

运算符

赋值运算符

num=num+1简化成num+=1

一元运算符

自增运算符的用法：

  • 前置自增和后置自增单独使用没有区别
  1. 前置自增
let num=1
++num  //让num的值加1变2
  1. 后置自增
let num=1
num++  //让num的值加1变2
  • 前置自增和后置自增参与运算有区别
  1. 前置自增：先自加再使用
let i=1
console.log(++i + 2)//结果是4
  1. 后置自增：先使用再自加
let i=1
console.log(i++ + 2)//结果是3

比较运算符

>：左边是否大于右边 
<:  左边是否小于右边 
>=： 左边是否大于或等于右边 
<=： 左边是否小于或等于右边 
==： 左右两边值是否相等
===：左右两边是否类型和值都相等
！==：左右两边是否不全等
比较结果为boolean类型，即只会得到true或false

对比：
=单等是赋值
==是判断
===是全等
开发中判断是否相等，强烈推荐使用===

console.log(3>5)  
console.log(3>=5) 
console.log(2==2)  
//比较运算符有隐式转换把'2'转换为2
console.log(2=='2') //true
console.log(2==='2') //false
console.log(NaN===NaN) //NaN不等于任何人，包括自己
console.log(2!=='2') //true
console.log(2!='2')  //false
console.log('a'<'b') //true
console.log('aa'<'ab') //true
console.log('aa'<'aac') //true

逻辑运算符

在这里插入图片描述
逻辑运算符里的短路：
短路：只存在于&&和||中，当满足一定条件会让右边代码不执行
&&：左边为false就短路
||：左边为true就短路
原因：通过左边能得到整个式子的结果
运算结果：都是最后被执行的表达式值，一般用在变量赋值

运算符优先级

在这里插入图片描述

语句

表达式和语句

区别：
表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。 num=3+4
语句：而语句不一定有值，所以比如alert()、for和break等语句就不能被用于赋值。 alert()弹出对话框 ；console.log()控制台打印输出

  • 程序三大流程控制语句
  1. 代码从上往下执行几句，这种叫顺序结构
  2. 根据条件选择执行代码，这种叫分支结构
  3. 某段代码被重复执行，这种叫循环结构

分支语句

if分支语句

if语句有三种使用：单分支、双分支、多分支
单分支使用语法：

if(条件) {
      满足条件要执行的代码
}

双分支使用语法：

if(条件) {
      满足条件要执行的代码
}    else {
     不满足条件执行的代码
}

多分支使用语法：

if(条件1) {
      代码1
}  else if(条件2) {
      代码2
}  else if(条件3) {
      代码3
}   else {
     代码n
}
三元运算符

使用场景：其实是比if双分支更简单的写法，可以使用三元表达式
符号：？与：配合使用
语法：

条件？满足条件执行的代码：不满足条件执行的代码

一般用来取值

//条件？满足条件执行的代码：不满足条件执行的代码
//console.log(3 > 5 ? 3 : 5)
//if(3 < 5){
//  alert('真的')
//else {
//  alert('假的')
//}
// 3 < 5 ? alert('真的') : alert('假的')

let sum=3 < 5 ? 3 : 5
console.log(sum) // 3

求最大值案例：

//1.用户输入
let num1=+prompt('请您输入第一个数:')
let num2=+prompt('请您输入第二个数:')
//2.判断输出-三元运算符
//if(num1>num2){
//  alert(num1)
//else {
//  alert(num2)
//}
num1>num2?alert('最大值是:${num1}'):alert('最大值是:${num2}')

数字补0案例：

//let age=18
//age=age+1
//age++

//1.用户输入
let num=prompt('请您输入一个数字：')
//2.判断输出-小于10才补0
num=num<10?0+num:num
alert(num)
switch语句
switch(数据) {
       case 值1：
               代码1
               break
       case 值2：
               代码2
               break
       default：
              代码n
              break         
}

释义：
找到跟小括号里数据全等的case值，并执行里面对应的代码；若没有全都===的则执行default里的代码；
switch case语句一般用于等值判断，不适合于区间判断；
switch case一般需要配合break关键字使用 ，没有break会造成case穿透。
简单计算器案例：

//1.用户输入
let num1=+prompt('请您输入第一个数字：')
let num2=+prompt('请您输入第二个数字：')
let sp=prompt('请您输入+-*/其中一个：')
//2.判断输出
switch(sp) {
       case '+'：
               alert('两个数的加法操作是${num1+num2}')
               break
       case '-'：
               alert('两个数的减法操作是${num1-num2}')
               break
       case '*'：
               alert('两个数的乘法操作是${num1*num2}')
               break
       case '/'：
               alert('两个数的除法操作是${num1/num2}')
               break         
       default：
              alert('请输入+-*/')
              break         
}

循环语句

断点调试

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

浏览器打开调试界面：

  1. 按F12打开开发者工具
  2. 点到sources一栏
  3. 选择代码文件
for循环
for(变量起始值；终止条件；变量变化值){
      循环体
}

99乘法表案例：
在这里插入图片描述

//1.外层循环控制行数
for(let i=1;i<=9;i++){
  //2.里层循环控制列数
  for(let j=1;j<=i;j++){
      document.write('<span>${j}X${i}=${i*j}</span>')
  }
  //换行
  document.write('<br>')
}
while循环
while(循环条件）{
      循环体
}

let i=1  //变量起始值
while(i<=3) {   //终止条件
    document.write('我会循环三次<br>')
    i++  //变量变化量
}

案例：

while(true) {
    let str=prompt('你爱我吗')
    if(str==='爱') {
    break
    }
}

综合案例

ATM取款机：

// 1. 开始循环 输入框写到 循坏里面
// 3.准备一个总的金额
let money = 100
while (true) {
 let re = +prompt('
   请您选择操作： 
   1.存钱
   2.取钱
   3.查看余额
   4.退出
   ')
  // 2、 如果用户输入的 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
    }
}

数组

数组是什么

数组是一种将数据存储在单个变量名下的方式
在这里插入图片描述

数组的基本使用

声明语法

let 数组名=[数据1，数据2，... ，数据n]
let arr=new Array(数据1，数据2，... ，数据n)

例

names=['小明','小刚','小红','小力']
  1. 数组是按顺序保存，每个数据都有自己的编号
  2. 编号从0开始
  3. 在数组中，数据的编号也叫索引或下标
  4. 数组可以存储任意类型的数据

取值语法

数组名[下标]

例

let names=['小明','小刚','小红','小力']
names[0]  //小明
names[1]  //小刚

一些术语

  1. 元素：数组中保存的每个数据都叫数组元素
  2. 下标：数组中数据的编号
  3. 长度：数组中数据的个数，通过数组的length属性获得
let names=['小明','小刚','小红','小力']
console.log(names[0])  //小明
console.log(names[1])  //小刚
console.log(names.length)  //5

遍历数组

用循环把数组中每个元素都访问到，一般用for循环遍历
语法：

for(let i=0;i<数组名.length;i++) {
     数组名[i]
}

例

let nums=[1,2,3,4,5]
for(let i=0;i<nums.length;i++) {
     document.write(nums[i])
}

数组求和及平均值案例：

let arr=[2,6,1,7,4]
//1.求和的变量
let sum=0
//2.遍历求和
for(let i=0;i<arr.length;i++) {
     sum+=arr[i]
}  
console.log(`数组的和的结果是：${sum}`)
console.log(`数组的平均值结果是：${sum/arr.length}`)

数组最大值案例：

let arr=[2,6,1,7,400,55,88,100]
let max=arr[0]
let min=arr[0]
// 遍历数组
for(let i=1;i<arr.length;i++) {
   //if(max<arr[i])max=arr[i]
    max<arr[i]?max=arr[i]:max
   //if(min>arr[i])min=arr[i]
    min>arr[i]?min=arr[i]:min 
}  
console.log(`最大值是：${max}`)
console.log(`最小值是：${min}`)

操作数组

数组本质是数据集合，操作无非是增删改查语法
在这里插入图片描述

改

let arr=['pink','red','green']
for(let i=0;i<arr.length;i++) {
  arr[i]=arr[i]+'老师'
}
console.log(arr)  //['pink老师','red老师','green老师']

增

数组.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
语法：

arr.unshift(元素1，... ,元素n)

例

let arr=['red','green']
arr.unshift('pink')   
console.log(arr)  //['pink','red','green']

let arr=['red','green']
arr.unshift('pink','hotpink')   
console.log(arr)  //['pink','hotpink','red','green']

数组.push(新增的内容)方法将一个或多个元素添加到数组的最后，并返回该数组的新长度
语法：

arr.push(元素1，... ,元素n)

例

let arr=['red','green']
console.log(arr.push('pink'))  //3
console.log(arr)  //['red','green','pink']

删

  1. 数组.pop()方法从数组中删除最后一个元素，并返回该元素的值
    语法：
arr.pop()

例

let arr=['red','green']
arr.pop()
console.log(arr)  //['red']
  1. 数组.shift()方法从数组中删除第一个元素，并返回该元素的值
    语法：
arr.shift()

例

let arr=['red','green']
arr.shift()
console.log(arr)  //['green']
  1. 数组.splice()方法删除指定元素
    语法：
arr.splice(start,deleteCount)
//起始位置，从0计数
//删除几个元素，省略则默认从指定的起始位置删到最后

例

let arr=['red','green','pink']
arr.splice(1,1)
arr.splice(1)  //['red']
console.log(arr)  //['red','pink']

数组排序

冒泡排序：

let arr=[5,4,3,2,1]
for(let i=0;i<arr.length-1;i++){
  for(let j=0;j<arr.length-i-1;j++){
    if(arr[j]>arr[j+1]){
      let temp=arr[j]
      arr[j]=arr[j+1]
      arr[j+1]=temp
    }
  }
}      
console.log(arr)  //[1,2,3,4,5]

数组.sort()方法可以排序
语法：

let arr=[4,2,5,1,3]
//1.升序排列写法
arr.sort(function(a,b){
   return a-b
})
console.log(arr)  //[1,2,3,4,5]
//2.降序排列写法
arr.sort(function(a,b){
   return b-a
})
console.log(arr)  //[5,4,3,2,1]

数组案例

数组筛选案例：

let arr=[2,0,6,1,77,9,54,3,78,7]
//1.声明新的空的数组
let newArr=[]
//2.遍历旧数组
for(let i=0;i<arr.length;i++) {
  if(arr[i]>=10){
    newArr.push(arr[i])
  }  
console.log(newArr) //[77,54,78]

根据数据生成柱形图案例：

//声明新的数组
let arr=[]
for(let i=0;i<4;i++) {
   //let num=prompt(`请输入第${i}季度的数据:`)
   //arr.push(num)
   arr.push(prompt(`请输入第${i}季度的数据:`))
}
document.write(`<div class="box">`)
for(let i=0;i<arr.length;i++){
  document.write(`
    <div style="height:${arr[i]}px;">
      <span>${arr[i]}</span>
      <h4>第${i+1}季度</h4>
    </div>
  `)
} 
//盒子结尾
document.write(`</div>`)

*在这里插入图片描述*

函数

为什么需要函数

function，是被设计为执行特定任务的代码块

函数使用

函数声明语法

function 函数名() {
      函数体
}

例：

function sayHi() {
      document.write('hai~~')
}

函数名命名规范：

  1. 和变量命名基本一致
  2. 尽量小驼峰式命名法
  3. 前缀应该为动词
  4. 常用动词约定

在这里插入图片描述

函数调用语法

函数名()

例：

//函数一次声明可以多次调用，每一次函数调用函数体里面的代码会重新执行一次
sayHi()

函数封装案例：

// 1. 求2个数的和
//function getSum() {
//Let numl = +prompt('请输入第一个数')
//Let num2 = +prompt('请输入第二个数')
//console.Log(num1 + num2)
// }
// getSum()
// 2、 求 1~100 累加和
function getSum() {
  let sum = 0
  for (let i = 1; i <= 100; i++) {
     sum+=i
  }
  console.log(sum)
}
getSum()

函数传参

声明语法

/*参数列表中的数据用逗号隔开*/
function 函数名(参数列表) {  
      函数体
}

例：
单个参数

function getSquare(num1) {
      document.write(num1*num1)
}

多个参数

function getSum(num1,num2) {
      document.write(num1+num2)
}

例

function getSum(start,end) {
//形参
  let sum=0
  for(let i=start;i<=end;i++) {
     sum+=i
  }   
     console.log(sum)
}
getSum(1,50)//实参    1275
getSum(100,200)   //15150

调用语法

函数名(传递的参数列表)

例：

getSquare(8)
getSum(10,20)

参数默认值

形参可以看做变量，但是如果一个变量不给值，默认是undefined
如果用户不输入实参，则出现undefined+undefined结果是NaN
改进：

function getSum(x=0,y=0) {
      document.write(x+y)
} 
getSum()//结果是0
getSum(1,2)//结果是3

函数封装数组求和案例：

function getArrSum(arr=[]) {
  let sum = 0
  for (let i = 1; i <arr.length; i++) {
     sum+=arr[i]
  }
  console.log(sum)
}
getArrSum([1,2,3,4,5])//15
getArrSum([11,22,33])//66
getArrSum()//0

实参可以是变量

function getSum(n=0,m=0) {
  let sum = 0
  for (let i = n; i <=m; i++) {
     sum+=i
  }
  console.log(sum)
}
let num1=+prompt('请输入起始值')
let num2=+prompt('请输入结束值') 
getSum(num1,num2)

函数返回值

其实我们前面已经接触了函数具备返回值：

let result=prompt('请输入你的年龄')
let result2=parseInt('111')

这些函数是js底层内置的，直接就可以使用
有些函数没有返回值

alert('我是弹框，不需要返回值')

所以根据需求来设定需不需要返回值
当函数需要返回数据出去时，用return关键字
语法：

return 数据
//return 20

使用：

function getSum(x,y){
    return x+y
}
let num=getSum(10,30)
document.write(num)

细节：

  1. 在函数中使用return关键字能将内部的执行结果交给函数外部使用
  2. return后面代码不会在被执行，会立即结束当前函数，所以return后面的数据不要换行写
  3. return函数可以没有return，这种情况函数默认返回值为undefined
  4. 两个相同的函数后面的会覆盖前面的函数
  5. 在js中实参的个数和形参的个数可以不一致；
    如果形参过多会自动填上undefined（了解）
    如果实参过多那么多余的实参会被忽略
  6. 函数一旦碰到return就不会再往下执行了，函数的结束用return

作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域
全局作用域：（全局有效）作用于所有代码执行的环境（整个script标签内部）或者一个独立的js文件
局部作用域：（局部有效）作用于函数内的代码环境，就是局部作用域，因为跟函数有关系，所有也称为函数作用域
如果函数内部变量没有声明直接赋值，也当全局变量看，但是强烈不推荐
有一种情况，函数内部的形参可以看做是局部变量

let num=20
function fn() {
    num=10  //  全局变量来看 强烈不允许
}
fn()
console.log(num)  //10

function fun(x,y) {
  //形参可以看做是函数的局部变量
  console.log(x)
  }
  fun(1,2)  //1
  console.log(x)  //错误的

只要是代码就至少有一个作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
访问原则：在能够访问到的情况下先局部再全局

匿名函数

函数可以分为具名函数和匿名函数

函数表达式：

将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们称这个为函数表达式
语法：

let fn=function() {
   //函数体
}

调用：

fn()  //函数名（）

函数表达式和具名函数的不同：

  1. 具名函数的调用可以写到任何地方
  2. 函数表达式必须先声明函数表达式后调用

立即执行函数

场景介绍：避免全局变量之间的污染
语法：

//不需要调用直接执行
//方式1
(function(){ console.log(11) })();
//方式2
(function(){ console.log(11) }());

注意：多个立即执行函数要用；隔开，要不然会报错

(function(){ 
let num=10
})();//10
(function(){ 
let num=20
})();//20
(function(x,y){ 
console.log(x+y)
})(1,2);//3
(function(x,y){ 
console.log(x+y)
}(1,3));//4

综合案例

//1.用户输入
let second=+prompt('请输入秒数:')
//2.封装函数
function getTime(t){
  //console.log(t)//总的秒数
  //3.转换
  //小时：h=parseInt(总秒数/60/60%24）
  //分钟：m=parseInt(总秒数/60%60）
  //秒数：s=parseInt(总秒数%60）
  h=parseInt(t/60/60%24）
  m=parseInt(t/60%60）
  s=parseInt(t%60）
  h=h<10?'0'+h:h
  m=m<10?'0'+m:m
  s=s<10?'0'+s:s
  //console.log(h,m,s)
  return `转换完毕后是${h}小时${m}分${s}秒`
  }
  let str=getTime(second)
  document.write(str)
  console.log(h)

对象

什么是对象

对象：js里的一种数据类型
可以理解为是一种无序的数据集合（数组是有序的数据集合）
用来描述某个事物：

  • 静态特征：可以用数字、字符串、数组、布尔类型等表示
  • 动态行为：使用函数表示

对象使用

对象声明语法：

let 对象名={}
let 对象名=new Object()

例

//声明了一个person的对象
let person={}//{}是对象字面量

对象由属性和方法组成
属性：信息或叫特征（名词）
方法：功能或叫行为（动词）

let 对象名={
    属性名：属性值，
    方法名：函数
}

属性

数据描述性的信息称为属性，如人的姓名，一般是名词性的

let person={
    uname:'pink',
    age:'18',
    gender:'女'
}
  • 属性都是成对出现的，包括属性名和值，它们之间使用英文:分隔
  • 多个英文之间使用,分隔
  • 属性就是依附在对象上的变量
  • 属性名可以使用""或’'，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

操作数据就是增删改查语法：
在这里插入图片描述

查

属性访问：声明对象，并添加了若干属性后，可以使用.获得对象中属性对应的值
语法：对象名.属性/ 对象名[‘属性名’]
简单理解就是获得对象里面的属性值

let person={
    uname:'pink',
    age:'18',
    gender:'女'
}  
console.log(person.uname)  
console.log(person['age'])  
console.log(person.gender)
改

语法：对象名.属性=新值

let person={
    uname:'pink',
    age:'18',
    gender:'女'
}  
person.gender='男'
console.log(person.gender)  
console.log(person)
增

语法：对象名.新属性=新值

let person={
    uname:'pink',
    age:'18',
    gender:'女'
}  
person.address='cs'
console.log(person)  //{uname:'pink', age:'18',  gender:'女',  address:'cs'}
删（了解）

语法：delete 对象名.属性

let person={
    uname:'pink',
    age:'18',
    gender:'女'
}  
delete person.gender
console.log(person)  //{uname:'pink', age:'18'}

方法

数据行为性的信息称为方法，如跑步，一般是动词性的，其本质是函数

let person={
    uname:'pink',
    sayHi:function(){
        document.write('hi')
    }
}
  • 方法是由方法名和函数两部分构成，它们之间用：分隔
  • 多个属性之间使用英文，分隔
  • 方法是依附在对象中的函数
  • 方法可以使用""或’'，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

方法调用：声明对象，并添加了若干方法后，可以使用.调用对象中函数
可以添加形参和实参

let person={
    uname:'pink',
    sayHi:function(){
        document.write('hi')
    }
}  
//对象名.方法名()
person.sayHi()

遍历对象

let obj={
    uname:'pink',
    age:'18',
    gender:'女'
}  
for(let k in obj){
    console.log(k)// 打印属性名
    console.log(obj[k])// 打印属性值
    //k==='uname'

一般不用这种方法遍历数组，主要用来遍历对象
for in语法中的k是一个变量，在循环的过程中依次代表对象的属性名
由于k是变量，所有必须使用[]语法解析
一定记住：k是获得对象的属性名，对象名[k]是获得属性值

<body>
    <table>
        <caption>学生列表</caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>
        <script>
            //1.数据准备
            let students=[
                {name:'小明',age:'11',gender:'男',hometown:'河北省'},
                {name:'小红',age:'12',gender:'女',hometown:'河南省'},
                {name:'小刚',age:'13',gender:'男',hometown:'山西省'},
                {name:'小丽',age:'14',gender:'女',hometown:'山东省'},
                {name:'小强',age:'15',gender:'男',hometown:'四川省'},
            ]
            //2.渲染页面
            for(let i=0;i<students.length;i++){
                document.write(`
                <tr>
                    <td>${i+1}</td>
                    <td>${students[i].name}</td>   
                    <td>${students[i].age}</td>
                    <td>${students[i].gender}</td>
                    <td>${students[i].hometown}</td> 
                </tr>    
                `)
            }
        </script>

内置对象

内置对象:js内部提供的对象，包含各种属性和方法给开发者调用

内置对象-Math

介绍：Math对象是js提供的一个"数字"对象
作用：提供了一系列做数学运算的方法
Math对象包含的方法有：

  1. random：生成0-1之间的随机数（包含0不包括1）
  2. ceil：向上取整
  3. floor：向下取整
  4. max：找最大值
  5. min：找最小值
  6. pow：幂运算
  7. abs：绝对值
console.log(Math.PI)
//方法
//ceil
console.log(Math.ceil(1.1))//2
console.log(Math.ceil(1.5))//2
console.log(Math.ceil(1.9))//2
//floor
console.log(Math.floor(1.1))//1
console.log(Math.floor(1.5))//1
console.log(Math.floor(1.9))//1
//round四舍五入
console.log(Math.round(1.1))//1
console.log(Math.round(1.49))//1
console.log(Math.round(1.5))//2
console.log(Math.round(1.9))//2
console.log(Math.round(-1.1))//-1
console.log(Math.round(-1.5))//-1
console.log(Math.round(-1.51))//-2

随机数函数案例：

//左闭右开 
//console.log(Math.random())

//0~10之间的整数
//console.log(Math.floor(Math.random()*11))

//let arr=['red','green','blue']
//let random=Math.floor(Math.random()*arr.length)
//console.log(arr[random])

//取到N~M之间的随机整数
function getRandom(N,M){
  return Math.floor(Math.random()*(M-N+1))+N
}
console.log(getRandom(4,8))

随机点名案例：

let arr=['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
//1.得到一个随机数，作为数组的索引号0~6
let random=Math.floor(Math.random()*arr.length)
//2.页面输出数组里面的元素
document.write(arr[random])
//3.splice（起始位置（下标），删除几个元素）
arr.splice(random,1)//删除刚抽到的
console.log(arr)

猜数字游戏案例：

//1.随机生成一个数字1~10
//取到N~M之间的随机整数
function getRandom(N,M){
  return Math.floor(Math.random()*(M-N+1))+N
}
console.log(grtRandom(1，10))  
console.log(random）
//需要不断地循环
while(true){
  //2.用户输入一个值
  let num=+prompt('请输入你猜的数字：')
  //3.判断输出
  if(num>random){
    alert('您猜大了')
  }else if(num<random){
    alert('您猜小了')
  }else{
    alert('猜对了，真厉害')
    break  //退出循环
  }
} 
//写到for的外面来
if(flag){
  alert('次数已经用完')
  }

随机颜色案例：

//1.自定义一个随机颜色函数
function getRandomColor(flag = true) {
if(flag) {
  // 3. 如果是true 则返回 #ffffff
  let str ='#'
  let arr =['0', '1', '2', '3', '4', '5', '6', '7','8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
  // 利用for循环随机抽6次 累加到 str里面
  for (let i = 1; i <= 6; i++){
  // 每次要随机从数组里面抽取一个
  // random 是数组的索引号 是随机的
  let random = Math.floor(Math.random() * arr.length)
  // str = str + arr[random]
  str += arr[random]
  }
  return str
} else {
  // 4. 否则是 false 则返回 rgb(255,255,255)
  let r = Math.floor(Math.random() * 256) // 55
  let g = Math.floor(Math.random()* 256) // 89
  let b = Math.floor(Math.random() * 256) // 255
  return `rgb(${r},${g},${b})`
}
// 2. 调用函数 getRandomCoLor(布尔值)
console.log(getRandomColor(false))
console.log(getRandomColor(true))
console.log(getRandomColor())
// Let str ='#'
//str = str +'f'

拓展

术语解释

在这里插入图片描述

基本数据类型和引用数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型

  1. 值类型：简单数据类型/基本数据类型，在存储中变量存储的是值本身，因此叫做值类型string,number,boolean,undifined,null
  2. 引用类型：复杂数据类型，在存储时变量中存储的不仅仅是地址（引用），因此叫做引用数据类型，通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等

堆栈空间分配区别：

  1. 栈(操作系统)：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面
  2. 堆(操作系统)：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。引用数据类型存放到堆里面

引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

葵hh
关注
javascript学习
06-27
学习javascript的pdf资料，素有“javascript圣经”之说。不过全部英文，值得深研。
JavaScript的学习
weixin_51884452的博客
04-16 877
关于js事件，字符串等浅学。
系统学习JavaScript
最新发布
weixin_53809558的博客
09-14 1566
原生JavaScript（简称原生JS）是JavaScript的基石，它包含了语言的基本语法、数据类型、操作符、控制流结构、函数等。
JavaScript 学习
qq_61718994的博客
11-07 1016
学习内容：初识JS，JS代码编写位置，JS基本语法，标识符，字面量和变量 笔记： 1、初识JS JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。 JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页，其中： HTML 用来定义网页的内容，例如标题、正文、图像等； CSS 用来控制网页的外观，例如颜色、字体、背景等； JavaScript 用来实时更新网页中的内容，例
javascript 学习
iuhe_999的博客
01-29 515
JavaScript  使用关键字function 定义函数。 function functionName(parameters){  //执行代码 } 1、分号是用来分隔可执行JavaScript语句。 由于函数声明不是一个可执行语句，所以不以分号结束。 2、var x = function (a, b) {return a * b};    var z = x(4, 3);
Javascript学习
Well~
01-23 530
#新浪博客搬家# (2017-04-02 16:43:41) 内容来自：极客学院 1、JavaScript基础 介绍：Javascript是互联网上最流行的的脚本语言，轻量级编程语言，可插入HTML页面。 实现：可位于或中，也可引入js文件（script src="js.js">script>） 输出字符串：                    
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值