七天学完JavaScript(day01)

Posted 程序员在线炒河粉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了七天学完JavaScript(day01)相关的知识,希望对你有一定的参考价值。

javascript 01

目录

  1. JavaScript介绍
  2. 变量
  3. 数据类型
  4. 类型转换
  5. Javascript订单案例(完整代码)

一.JavaScript 介绍

简介:
JavaScript (是什么?)
是一门运行在客户端(浏览器)的编程语言,实现人机交互效果。

书写位置:

  1. 内部
<script>
        alert('直接写里面')
</script> -->
  1. 外部
<script src="./my.js">建.js引入</script>
  1. 内联
    <button onclick="alert('点击后显示')">用onclick</button>

书写的位置尽量写到文档末尾 body前面

注释:

  1. 单行注释
    ➢ 符号://
    ➢ 作用://右边这一行的代码会被忽略
    ➢ 快捷键:ctrl + /
  2. 块注释
    ➢ 符号:/* /
    ➢ 作用:在/
    和 */ 之间的所有内容都会被忽略
    ➢ 快捷键:shift + alt + A

结束符:
➢ 结束符是?
✓ 英文状态分号 ;
➢ 结束符可以省略吗?
✓ 可以
✓ 但为了风格统一,要写结束符就每句都写,要么每句都不写

输入和输出语法:
输出语法:

<script>
        // 网页输出
        document.write('页面输出的内容')
        // 页面弹出
        alert('页面弹出警告对话框')
        // 控制台输出console
        console.log('控制台打印') 
</script>

输入语法:

// 输入语句prompt
        prompt('请输入你想输入的')

字面量:
在计算机科学中,字面量(literal)是在计算机中描述 事/物.
➢ 我们工资是:1000 此时 1000 就是 数字字面量
➢ ‘程序员’ 字符串字面量
➢ [] 数组字面量 对象字面量 等等

二.变量

变量是什么:

  1. 白话:变量就是一个装东西的盒子。
  2. 通俗:变量是计算机中用来存储数据的“容器”

声明变量和赋值变量:

let age = 18

注意: let 不允许多次声明一个变量
比如

 // 一个变量(如age)不能多次声明l
    let age = 18
    let age = 19

但是可以一次声明多个变量

// 一次可以声明多个变量(age.name)
    let age = 18,name = 小龙人

变量的本质:
内存:计算机中存储数据的地方,相当于一个空间
变量:是程序在内存中申请的一块用来存放数据的小空间

变量命名规则与规范:

规则:必须遵守,不遵守报错
规范:建议,不遵守不会报错,但不符合业内通识

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

讲一下数组变量:

数组(Array):可以按顺序保存多个数据的变量
声明语法:

let name = ['马超', '李信', '夏洛特','...','数据n']

数组中的下标编号从0开始
取值语法:

// 取值语法:数组名[下标]
  alert(name[0])  //马超

三.数据类型

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

数据类型

➢ 基本数据类型
number 数字型: 正数、负数、小数等
string 字符串型: 通过单引号( ‘’) 、双引号( “”)或反引号( ` )包裹的数据
boolean 布尔型:true 和 false
undefined 未定义型:只声明变量,不赋值
null 空类型:null 表示值为空

➢ 引用数据类型
object 对象
function 函数
array 数组

检测数据类型

<script>
        //声明赋值
        let name = ('小龙人')
        // 通过 typeof 关键字检测数据类型
        // console.log控制台输出
        console.log(typeof(name))
</script>

四.类型转换

• 隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
规则:
➢ + 号两边只要有一个是字符串,都会把另外一个转成字符串
➢ 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

• 显式转换
自己写代码告诉系统该转成什么类型
转换为字符型:
➢ String(数据)
➢ 变量.toString(进制)

转换为布尔型:
➢ Boolean(数据)
➢ 字符串类型:空字符串会转成false 其他的都会被转换成true
➢ 数字类型:0与NaN会转换成 false 其他的都会被转换成true
➢ undefined类型:会被转换成false
➢ null 类型:会被转换成false

转换为数字型
➢ Number(数据)
✓ 转成数字类型
✓ 如果字符串内容里有非数字,转换失败时结果为 NaN(Not a Number)即不是一个数字
✓ NaN也是number类型的数据,代表非数字
➢ parseInt(数据)
➢ 只保留整数
➢ parseFloat(数据)
➢ 可以保留小数

五.Javascript订单案例(完整代码)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <script>
        // 声明参数
        let price = prompt('请输入商品价格:')
        let num = prompt('商品数量:')
        let add = prompt('收货地址:')
        let total = price * num

        // 渲染表格,填充数据 
        // 俺直接在表格里把样式写了
        document.write(`
        <table border="1" width="600" height="100" align="center" rules="all">
        <caption><h2>订单付款确认页面</h2></caption>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </tr>
        <tr align="center">
            <td>小米手机青春PLAUS</td>
            <td>$price元</td>
            <td>$num</td>
            <td>$total</td>
            <td>$add</td>
        </tr>
        </table>
        `)
    </script>
</body>
</html>


以上是关于七天学完JavaScript(day01)的主要内容,如果未能解决你的问题,请参考以下文章

七天学完JavaScript基础语法 (day07)

一天学完操作系统,两天通过期末考试

一天学完操作系统,两天通过期末考试

1天学完python语法知识

一天学完git——命令篇

7天学完Java基础之4/7