js基础

白昼苏打
290 阅读5分钟

1.函数和循环区别

    1.1本质区别
    函数是一种数据类型:负责存储代码
    循环是一种语句:让一段代码执行多次
    1.2功能不同
    函数:代码复用(一段代码需要在很多个地方执行一次)
    循环:重复执行(一段代码在一个地方执行多次)

2. js三种书写位置

2.1 外部写法:
   <script src="./js外部.js"></script>
    alert('js外部写法')
js外部写法错误演示:

image.png

2.2 内部写法:
    <script>
               alert('02-我是js内部写法')
               alert('内部样式')
    </script>
2.3 行内写法:
       <button onclick="alert('这是行内式')">点我有惊喜</button>

image.png

3. js输出语法

3.1 alert() : 弹出提示框
    alert('武汉黑马大前端')

image.png

3.2 console.log() : 控制台打印(给程序员自己看的，需要F12进入开发者工具栏)
      console.log('我是黑马颜值担当ikun')

image.png

3.3 document.write() : 给页面添加内容(如果字符串中有标签，也可以解析)
     document.write('<h1>武汉前端74期</h1>')

image.png

4. js输入语法

4.1 prompt() : 弹出一个输入框(输入框可以输入任何数据)
          prompt('请输入你的姓名')

image.png

4.2 confirm() : 弹出一个确认框(确认框有确认与取消按钮)
          confirm('您吃了吗?')

image.png

5. js五种数据类型

    1. string类型 : 字符串 一切以  单引号''  双引号""  反引号``包起来的内容  
    作用 : 用于展示文本
  console.log(`黑马颜值担当`)
      console.log('我"爱"前端')
    2. number类型 : 数值 一切数学中的数字。
           作用 : 用于数学计算
        console.log(123) 
            console.log(-123) 
            console.log(9.9) 
            console.log(Infinity) 
    3. boolean类型 : 布尔 只有两个值 :  true(真)  false(假)
     作用 : 用于条件判断  true:条件成立  false:条件不成立
        console.log(true)
            console.log(false) 
    4. undefined : 未定义  只有一个值 undefined
   console.log(undefined)
    5. null : 空值  只有一个值 null
   console.log(null)

6.js中如何检测数据类型typeof

 (1) typeof 数据   (2) typeof (数据)
    语法结果：得到一个字符串来告诉你这个数据是什么类型。
           console.log( typeof 123 )//'number'
           console.log( typeof '123' )//'string'
           console.log( typeof true )//'boolean'
           console.log( typeof undefined )//'undefined'
            console.log( typeof null )//'object'

7.变量的注意点

    1.变量不允许重复声明的
    2.变量重新赋值 : 先销毁旧值，然后存入新值
      let money = 50
       money = 100
       console.log(money)//100
    3.变量之间赋值 ： 取出变量的数据拷贝一份，然后复制
      let num1 = 20
       let num2 = num1// num1中的数据拷贝一份，赋值给num2
       console.log(num2)//20
       console.log(num1)//20

image.png

8.变量和常量的不同点

        变量 :  值可以修改, 使用let声明
        常量 :  值不可以修改,使用const声明
     例如  let G = 9.8  let PI = 3.14 
        变量可以修改值
            let age = 18
            age = 19
            console.log(age)
	常量不可以修改值
            const G = 9.8
            G = 10//程序报错
            console.log(G)

9.js数据两种使用方法

    为什么要有数据类型 ?
    js不能识别所有的数据类型，任何编程语言编译器不同, 都有属于自己的数据类型
    
    第一种: 变量    先存入变量中, 通过变量取值语法来使用
            变量 :  指的是内存中的一块空间,里面的数据是可变的。(变量是内存空间)
    第二种: 字面量   不存入变量中,直接拿来使用
            字面量 : 指的是一个固定的数据（字面量是数据）
        name是变量, '张三'是字面量
    let name = '张三'
    console.log( name )//变量取值,控制台打印'张三'

    console.log( '李四' )//字面量(又叫直接量)
    
      注意点:   字面量 永远不能出现在 =号 的左边
                = 会把右边的数据存入左边的变量, 而字面量没有存储功能
    
    '123' // 字符串字面量
     123  // 数字字面量
     true // 布尔字面量

算术运算符与算术表达式

  1. 运算符 :  具有运算作用的符号 
  2. 算术运算符 :用于数学算术运算
      +  -  *  /   %(求模,取余数)
  3. 表达式 : 运算符不能单独使用， 要和运算的数据在一起组成一个式子。 称之为表达式
    * 有运算符参与的代码就叫表达式
  4.***** 表达式一定会有运算结果, 要么存入变量，要么直接使用  ****
  
  //表达式结果 存入变量
  let res = 1 + 1
  console.log( res )//2

  //表达式结果 直接使用
  console.log( 5 * 3 )//15

  console.log( 10 % 3)//1  取余应用： 判断数字能不能被整除

10.连接符

  +号 ： 只要遇到字符串,就是连接符
      推荐方式： 使用模板字符串 `` 
       作用： 拼接字符串 ${ 变量名 }

11.关系运算符与关系表达式

   1.关系运算符作用 : 比较两个数据的关系
        >  >=  <  <=  ==(相等)  !=(不等)  ===(全等)  !==(不全等)
    2.关系表达式 : 由关系运算符组成的式子   例如: 2 > 1
    重点： 关系表达式的运算结果一定是布尔类型 ： true成立  false不成立

12.逻辑运算符与逻辑表达式

  0.关系运算符：某种条件的关系（成立/不成立），例如我的年龄大于你的年龄30>20
    1.逻辑运算符：多个条件之间的关系
    2.逻辑运算符只有三种
         && :逻辑与 ，读作并且
         || :逻辑或，读作或者
         !  :逻辑非，读作取反
             true（真）变false（假），false（假）变true（真）
    3.逻辑表达式: 表达式1 逻辑运算符 表达式2

13.运算符优先级

    运算符优先级： 不同的运算符在一个式子中的运算顺序
        ()  : 优先级最高
        一元: ++ -- !
        算术
        关系
        逻辑
        赋值
    开发中遇到复杂的式子，一般使用()小括号提升优先级

14.案例

     计算银行卡余额案例
  <style>   
    h2 {
        text-align: center;
    }

    table {
        width: 700px;
        height: 90px;
        margin: 0 auto;
    }

    table,
    th,
    td {
        border: 1px solid #333;
        border-collapse: collapse;
        text-align: center;
    }
</style>
   <h2>2020年12月消费支出</h2>
   <script>

    // 1. 声明5个变量 
    let total = prompt('请输入银行卡总额:')
    let waterBill = prompt('请输入水费:')
    let dianBill = prompt('请输入电费:')
    let netBill = prompt('请输入网费:')
    let money = total - waterBill - dianBill - netBill
    // console.log(money)
    document.write(`<table>
    <tr>
        <th>银行卡余额</th>
        <th>水费</th>
        <th>电费</th>
        <th>网费</th>
        <th>银行卡余额</th>
    </tr>
    <tr>
        <td>${total}元</td>
        <td>${waterBill}元</td>
        <td>${dianBill}元</td>
        <td>${netBill}元</td>
        <td>${money}元</td>
    </tr>
</table>`)
</script>
 <table>
    <tbody><tr>
        <th>银行卡余额</th>
        <th>水费</th>
        <th>电费</th>
        <th>网费</th>
        <th>银行卡余额</th>
    </tr>
    <tr>
        <td>null元</td>
        <td>null元</td>
        <td>null元</td>
        <td>null元</td>
        <td>0元</td>
    </tr>
</tbody>
</table>

15.案例

 依次询问并获取用户的姓名、年龄、性别，收集数据之后在控制台依次打印出来
    // let username = prompt("输入姓名")
    // let age = prompt("输入年龄")
    // let sex = prompt("输入性别")

    // console.log('你的姓名是:' + username + '年龄:' + age + '性别:' + sex)
    // console.log(`你的姓名是:${username} 年龄: ${age}性别:${sex}`)

16.案例

     1、询问用户年龄，用户输入年龄后，把用户输入的年龄增加5岁
     2、增加5岁后，通过弹出框提示用户 “ 据我估计，五年后，你可能XX岁了”
       let res = prompt("请输入你的当前年龄")
       console.log(typeof res)
       不要忘记转换为数字型
       alert("你5年之后是：" + (Number(res) + 5))

       额外拓展作业部分
       res = +'18' //就会转换为数字类型
       console.log(typeof res)
       let res = +prompt("请输入你的当前年龄")
       alert("你5年之后是：" + (res + 5))

17.案例

 <style>
     table {
           margin: 100px auto;
           width: 995px;
           height: 150px;
           text-align: center;
         }

  table,
  th,
  td {
       border: 1px solid #000;
       border-collapse: collapse;
    }
</style>
 </head>

  <body>
     <script>
        const prices = prompt('请输入商品价格')
        const num = prompt('请输入商品数量')
        const site = prompt('请输入地址')
        //总价=商品价格*商品数量
       const total = prices * num
document.write(`
       <table>
<caption>
      <h1>订单确认</h1>
</caption>
<tr>
       <th>商品名称</th>
       <th>商品价格</th>
       <th>商品数量</th>
       <th>总价</th>
       <th>收货地址</th>
</tr>
<tr>
      <td>小米手机青春PLUS</td>
      <td>${prices}</td>
      <td>${num}</td>
      <td>${total}</td>
      <td>${site}</td>
</tr>
</table>

  `)
 </script>

image.png

18.隐式转换

image.png

19.显示转换

转为数据类型

<script>
      //转换为Number 类型 只有两种结果 1.数字 2.NaN(Not a Number)
      //将字符串转化为Number类型 如果字符串里面都是数字 则转化为 对应的数字
      
     //如果字符串里面都是非数字 则转化为NaN
        console.log(Number('1234')) //1234
        console.log(Number('a1234')) //NaN

   //将bool转换为 true---1    false---0
       console.log(Number(true)) //1
       console.log(Number(false)) //0

  //将undefined转换为Number----NaN
        console.log(Number(undefined)) //NaN

  //将null 转换为 Number----0
        console.log(Number(null)); //0
 </script>
20.算术运算符优先级

image.png

21.NaN:Number类型的特殊值
1. not a number:不是一个数字.如果你的数字运算得不到一个数字,则会得到NaN
console.log('张三*100')//NaN
2.NaN不能参与任何运算,结果一律是NaN
console.log(NaN+1)//NaN
console.log(NaN*0)//NaN

22.数据类型 – 未定义类型（undefined）和null（空类型）

// 1.只声明不赋值 使用变量
// 2.将变量的值 赋值为undefined
    let uname
    console.log(uname) //undefined
    let age = undefined
    console.log(age) //undefined
    console.log(null + 1) //1
    console.log(undefined + 1) //NaN
    console.log(NaN + 1) //NaN

image.png

22.typeof 关键字检测数据类型

<script>
        console.log(typeof 10) //number
        console.log(typeof 'abcd') //string
        console.log(typeof true) //boolean
    let age
  console.log(typeof age) //undefined
  console.log(typeof null) //object
const num = 10
   console.log(typeof num + '11') //number11
   console.log(typeof (num + '11')) //string
   console.log(typeof (num + +'11')) //number
</script>

image.png

23.转整数:parseInt(数据) , 转小数:parseFloat(数据)

image.png

avatar
文章
阅读
粉丝