JavaScript基础day01

晚风的街

已于 2024-07-25 20:58:23 修改

阅读量594

点赞数 10

文章标签： javascript 开发语言 ecmascript

于 2024-07-23 12:23:55 首次发布

本文链接：https://blog.csdn.net/m0_74153968/article/details/140612577

版权

JavaScript介绍

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

作用：（1）网页特效 (监听用户的一些行为让网页作出对应的反馈)

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

（3）数据交互 (获取后台的数据, 渲染到前端)

（4）服务端编程 (node.js)

组成：（1）ECMAScript:规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等

（2）Web APIs : DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作 BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等

JavaScript 书写位置

规范：script标签写在</body>上面(浏览器会按照代码在文件中的顺序加载 HTML)

//内部
<body>
 <script>
  alert("你好")
 </script>
</body>

//外部   script标签中间无需写代码，否则会被忽略
<body>
 <script scr='./my.js'></script>
</body>

//行内  vue框架会用这种模式
<body>
  <button onclick="alert('你好')">点击<button>
</body>

页面弹框课堂练习

需求：请用外部和内部两种 JavaScript 书写方式，页面弹出：努力，奋斗

//内部
<body>
  <script>
    alert('努力，奋斗！')
  </script>
</body>

//外部
<body>
  <script src="./out.js"></script>
</body>

JavaScript 注释

单行注释符号：//

块注释符号：/* */

JavaScript 结束符

英文的 ; 代表语句结束（可写可不写，但是要统一）

JavaScript 输入输出语法

注意：alert() 和 prompt() 会跳过页面渲染先被执行

//输出语句  

//向body内输出内容
document.write("要输出的内容");

//页面弹出警告对话框
alert("要输出的内容");

//控制台输出语法，程序员调试使用
console.log("要输出的内容");


//输入语句  得到的是string类型  显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
prompt("要输入的内容");

字面量

定义：字面量（literal）是在计算机中描述事/物

例如：100 数字字面量

‘100’ 字符串字面量

[ ] 数组字面量

{ } 对象字面量

变量

概念：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

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

变量的基本使用

//声明和赋值、初始化

let 变量名 = 值 

let age = 12


//let 不允许多次声明一个变量

//声明多个变量

let age = 12,uname = '张三'(不推荐，建议分开写）

课堂变量练习

 <!-- 1. 声明一个变量，用于存放用户购买的商品 数量 ( num ) 为 20 件
       2. 声明一个变量，用于存放用户的 姓名 ( uname ) 为 ’张三’
       3. 依次控制台打印输出两个变量 -->
<body>
<script>
    let num = 20
    let uname = "张三"

    console.log(num)
    console.log(uname)
  </script>
</body>

//name是js里面的一个属性，用作变量名不会报错，但是会产生一些bug


//有2个变量： num1 里面放的是 10， num2 里面放的是20,最后变为 num1 里面放的是 20 ， num2 里面放的是 10

<body>
  <script>
    let num1 = 12
    let num2 = 13
    let temp
    // 冒泡排序
    temp = num1
    num1 = num2
    num2 = temp
    console.log(num1, num2);
  </script>
</body>

变量命名规则与规范

1. 规则：不能用关键字

只能用下划线、字母、数字、$组成，且数字不能开头

字母严格区分大小写，如 Age 和 age 是不同的变量

2. 规范：起名要有意义

遵守小驼峰命名法 第一个单词首字母小写，后面每个单词首字母大写。例：userName

变量拓展-let和var的区别

在较旧的JavaScript，使用关键字 var 来声明变量，而不是 let。（var 就是个bug）

变量拓展-数组

//数组可以存储任意类型的数据

let arr = []

let arr = ['数据1' '数据2' '数据3' '数据4']


//取值

数组名[下标]

数组取值案例

<body>
  <!--定义一个数组，里面存放星期一、星期二…… 直到星期日（共7天），在控制台输出：星期日 -->
  <script>
    let data = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    console.log(data[6]);
  </script>
</body>

//在JavaScript中，数组索引不能是负数,尝试使用负数作为索引来访问数组元素会返回undefined.


//长度：数组中数据的个数，通过数组的length属性获得

console.log(arr.length)

常量

概念：使用 const 声明的变量称为“常量”。（某个变量永远不会改变）

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

数据类型

注意：JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认 Java是强数据类型例如 int a = 3 必须是整数。

数字类型（Number）

NaN 是粘性的，任何对 NaN 的操作都会返回 NaN (NaN === NaN 结果为false)。

字符串类型（string）

单引号（ ''）、双引号（ ""）或反引号( ` ) 包裹的数据都叫字符串

单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）

//使用转义符 \，输出单引号或双引号

console.log('哈哈哈哈，\'你好\'')

字符串拼接： + 运算符可以实现字符串的拼接。

模板字符串：（1）`` (反引号)

（2）内容拼接变量时，用 ${ } 包住变量

<body>
  <script>
    let uname = prompt('姓名')
    let age = prompt('年龄')
    document.write(`大家好，我叫${uname},今年${age}岁了`)
  </script>
</body>

布尔类型（boolean）

两个固定的值 true 和 false

未定义类型（undefined）

只声明变量，不赋值的情况下，变量的默认值为 undefined。

null（空类型）

null 表示赋值了，但是内容为空。

控制台输出语句和检测数据类型

typeof 关键字

1. 作为运算符： typeof x （常用的写法） 2. 函数形式： typeof(x)

类型转换

坑：使用表单、prompt 获取过来的数据默认是字符串类型的

隐式转换

系统内部自动将数据类型进行转换

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

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

+号作为正号解析可以转换成数字型

任何数据和字符串相加结果都是字符串

显式转换

转换为数字型

Number(数据)

parseInt(数据) 只保留整数 parseInt(12px)----- 12

parseFloat(数据) 可以保留小数 parseFloat(12.23px)----- 12.23

转换为字符型

String(数据)

变量.toString(进制)

综合实例（用户订单信息案例）

//用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2 {
      text-align: center;
    }

    table {
      /* 合并相邻边框 */
      border-collapse: collapse;
      height: 80;
      margin: 0 auto;
      text-align: center;
    }

    th {
      padding: 5px 30px;
    }

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

<body>
  <h2>订单确认</h2>
  <script>
    let price = +prompt('请输入商品价格')
    let number = +prompt('请输入商品数量')
    let address = prompt('请输入收货地址')

    let total = price * number

    document.write(`
    <table>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
    <tr>
      <td>华为nove</td>
      <td>${price}</td>
      <td>${number}</td>
      <td>${total}</td>
      <td>${address}</td>
    </tr>
  </table>
    `)
  </script>
</body>

</html>

晚风的街

关注

10
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础day01

定义：一种运行在客户端（浏览器）的编程语言，实现人机交互效果。作用：（1）网页特效 (监听用户的一些行为让网页作出对应的反馈)（2）表单验证 (针对表单数据的合法性进行判断)（3）数据交互 (获取后台的数据, 渲染到前端)（4）服务端编程 (node.js)组成：（1）ECMAScript:规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等（2）Web APIs : DOM 操作文档，比如对页面元素进行移动、大小、添加删除。
复制链接

扫一扫