JavaScript将至

JS是什么？

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

作用捏？

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

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

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

服务端编程 (node.js)

 前端有自己的后端语言：node.js

JS有哪些组成呢？

ECMAScript:

规定了js基础语法核心知识

比如：变量、分支语句、循环语句、对象等等

Web APIs :

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

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

我们查询资料可以直接去一个权威的网站查：

JavaScript | MDNJavaScript（JS）是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言。虽然作为 Web 页面中的脚本语言被人所熟知，但是它也被用到了很多非浏览器环境中，例如 Node.js、Apache CouchDB、Adobe Acrobat 等。进一步说，JavaScript 是一种基于原型、多范式、单线程的动态语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。icon-default.png?t=O83Ahttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript

JS介绍

JS书写位置

JS书写的位置：

行内书写 

在行内书写就是在body里面

然后使用script标签包住

alert是页面弹出警示框的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 内部js -->
    <script>
        // 页面弹出警示框
        alert('你好，js')
    </script>
</body>
</html>

我们将<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。

如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。 因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

外部书写

那么外部书写JS怎么写呢？

将代码写在以js结尾的文件里

通过script标签引入到html页面中

tips：

1. script标签中间无需写代码，否则会被忽略！

2. 外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

这是把代码写在以.js结尾的文件里

通过script标签引入到html页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 内部js -->
   <script src="./my.js"></script>
</body>
</html>
内联JS

代码是写在标签内部的

注意：此处作为了解即可，但是后面的vue框架会使用这样的模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('我必须要离开西安邮电')"></button>
</body>
</html>

 JS注释

我们目标是会使用两种JS的注释方法

单行注释就是//

多行就是/* */（快捷键：Shift+Alt+A）

JS的结束符

和C一样用;

实际情况中可以不写

可以自动推断语句 的结合素为孩子

所以为了风格的统一要么都写要么都不写

输入输出语法

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用 户，这便是一次输入和输出的过程

输出语法1：

document.write('我必须要离开西安邮电')

它的作用是向body输出内容

tips：如果输出的内容写的是标签，那么他也会被解析成网页元素

语法2：

alert('西安邮电有杀人指标')

这是页面弹出警告对话框

语法3：

console.log('西安邮电你给我等着')

这是控制台输出语法，程序员调试使用

输入的语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        prompt('请输入你觉得最差的大学')
    </script>
</body>
</html>

作用是显示一个对话框，对话框中包含一条文字信息，用于提示用户输入文字

 alert() 和 prompt() 它们会跳过页面渲染先被执行

字面量

什么是字面量？

字面量是在计算机中描述事/物

比如：

我们工资是：1000 此时1000就是数字字面量

'呆猫小伙'这是字符串字面常量

还有[]数组字面量和{}对象字面量

变量

变量是什么

用户输入的数据存储就是用变量

变量是计算机存储数据的容器


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

变量基本使用

声明和赋值

声明变量语法：

let 变量名

let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语 

赋值语法：

<script>
        let a;
        a = 18;
        alert(a)
</script>

感觉和Python好像啊

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

声明多个变量的时候中间用，隔开（可读性差，建议分开声明）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        prompt('请输入内容')
        let uname = prompt('请输入内容')
        document.write(uname)
    </script>
</body>
</html>

变量的本质

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

内存：计算机中存储数据的地方，相当于一个空间

变量命名规则与规范

变量命名需要规范

规则：必须遵守，不遵守报错 (法律层面)

规范：建议，不遵守不会报错，但不符合业内通识 （道德层面）

1.规则：

不能用关键字

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

字母严格区分大小写

2.规范:

起名一定有意义

遵循小驼峰命名法

在较旧的JS中使用var来声明变量，而不是let

var与let

let 为了解决 var 的一些问题

var 声明:

可以先使用 在声明 (不合理) 

var 声明过的变量可以重复声明(不合理)

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

数组

数组的语法是这样的：

let arr = []

arr是变量，[ ]是数组字面量

这是具体的声明语法：

let arr = ['数电','嵌入式','通原','电磁场']

数组是按照顺序保存的，所以每个数据都有自己的编号

数组下标，和C一样

数组可以保存多个数据

常量

基本使用

使用const声明的变量称为常量

当某个变量永远不会改变的时候，就可以使用const声明

命名规范和变量一致

const G = 9.8

tips：不需要重新赋值的数据使用const，常量不允许重新赋值，声明的时候必须要赋值（初始化）

数据类型

JS的数据类型分为两大类：

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

数字类型 （number）

数字类型就是我们学习中学到的数字，可以是整数小数负数整数

都成为数据类型

JS是弱数据类型，变量到底属于哪种类型只有赋值之后才可以确认

Java是强数据类型

数字可以有很多操作，这是算术运算符，不做赘述：

算术运算符有不同的优先级

优先级越高越先执行，优先级相同时从左向右执行

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

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

字符串类型（string）

通过单引号或者双引号或者反引号包裹的数据都叫字符串

没有本质的区别，推荐单引号

必须成对使用，可以嵌套，但是不能自己嵌套自己

必要的时候可以使用转义字符\输出单引号或者双引号

let cjn1 = '小爷我就是'
let cjn2 = '陈俊男'
document.write(cjn1 + cjn2)

字符串拼接的时候用+即可 

也可以这样拼接：

模板字符串，这是使用反引号（` `）当内容拼接变量的时候用${ }包住变量

let name = '陈俊男'
document.write(`小爷我就是${name}`)

模板字符串可以让我们拼接的更简便

布尔类型（boolean）

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

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

没什么好说的

未定义类型（undefined）

未定义是比较特殊的类型，只有一个值undefined

只声明变量在不赋值的情况下变量的默认值就是undefined，一般很少直接赋值成这个

我们开发的时候经常声明一个变量，等待传输过来的数据

如果我们不知道是否传递过来，就可以检测是不是undefined判断用户是否传数据过来了

空类型（null）

JS的null仅仅是一个无、空或者值未知的特殊值

null和undefined区别

undefined 表示没有赋值

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

官方解释是把null作为尚未创建的对象

将来有变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

检测数据类型

控制台语句常用于测试结果来使用

数字型和布尔类型为蓝色，字符串和undefined颜色为灰色

let age = 18
let uname = '陈俊男'
let flag = false
let buy
console.log(age)
console.log(uname)
console.log(flag)
console.log(buy)

我们可以通过typeof关键字检测数据类型

typeof运算符可以返回被检测的数据类型，支持两种语法格式

1.作为运算符：typeof x，这是常用的写法

2.函数形式typeof（x）

有括号和没有括号得到的结果是一样的，所以常用的写法是运算符（少写一点是一点） 

类型转换

为什么要类型转换

JS是弱数据类型，有个坑是使用表单，prompt获取过来的数据默认是字符串类型的，此时不能够直接简单的进行加法运算

此时就需要类型转换

隐式转换

当某些运算符被执行的时候，就会自动将一些数据类型进行转换，这种就是隐式转换

寄巧：

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

任何数据和字符串想旧爱的结果都是字符串

显式转换

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

Number(数据)

它可以转换成为数字类型

如果字符串内容里面有非数字，转换失败的时候结果是NaN

NaN也是number类型的数据，代表非数字

parseInt(数据)

只保留整数

parseFloat(数据)

可以保留小数

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 {
            margin: 0 auto;
        }

        table {
            border-collapse: collapse;
        }

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

<body>
    <h2>订单确认</h2>
    <script>
        let price = +prompt('请输入商品价格')
        let num = +prompt('请输入商品数量')
        let place = prompt('请输入收获地址')
        total = price * num
        document.write(`
         <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收获地址</th>
        </tr>
        <tr>
            <td>小米青春版plus</td>
            <td>${price}</td>
            <td>${num}</td>
            <td>${total}元</td>
            <td>${place}</td>
        </tr>
    </table>
        `)
    </script>
</body>
</html>

 

 

尸体暖暖的 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/922704.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Vue.js 学习总结（13）—— Vue3 version 计数介绍

Vue.js 学习总结（13）—— Vue3 version 计数介绍

前言 Vue3.5 提出了两个重要概念&#xff1a;version计数和双向链表&#xff0c;作为在内存和计算方面性能提升的最大功臣。既然都重要&#xff0c;那就单挑 version 计数来介绍&#xff0c;它在依赖追踪过程中&#xff0c;起到快速判断依赖项有没有更新的作用&#xff0c;所以…
阅读更多...
全面解析多种mfc140u.dll丢失的解决方法，五种方法详细解决

全面解析多种mfc140u.dll丢失的解决方法，五种方法详细解决

当你满心期待地打开某个常用软件&#xff0c;却突然弹出一个错误框&#xff0c;提示“mfc140u.dll丢失”&#xff0c;那一刻&#xff0c;你的好心情可能瞬间消失。这种情况在很多电脑用户的使用过程中都可能出现。无论是游戏玩家还是办公族&#xff0c;面对这个问题都可能不知所…
阅读更多...
《Spring 实战：小型项目开发初体验》

《Spring 实战：小型项目开发初体验》

一、引言 Spring 作为一款强大的 Java 开发框架&#xff0c;在小型项目开发中有着广泛的应用。本文将带你深入体验 Spring 在小型项目开发中的实战过程&#xff0c;从环境搭建到项目部署&#xff0c;全面展示 Spring 的魅力。 一、引言 Spring 作为一款强大的 Java 开发框架&…
阅读更多...
Altium Designer学习笔记 11-15 原理图的封装 编译 检查 _PCB封装库的创建

Altium Designer学习笔记 11-15 原理图的封装 编译 检查 _PCB封装库的创建

基于Altium Designer 23学习版&#xff0c;四层板智能小车PCB 更多AD学习笔记&#xff1a;Altium Designer学习笔记 1-5 工程创建_元件库创建Altium Designer学习笔记 6-10 异性元件库创建_原理图绘制 目录 11、Value值的核对 12、封装的统一管理 13、原理图的编译设置和检查…
阅读更多...
【Spring Boot】# 使用@Scheduled注解无法执行定时任务

【Spring Boot】# 使用@Scheduled注解无法执行定时任务

1. 前言 在 Spring Boot中&#xff0c;使用Scheduled注解来定义定时任务时&#xff0c;定时任务不执行&#xff1b;或未在规定时间执行。 import org.springframework.scheduling.annotation.Scheduled; import org.springframework.stereotype.Component;Component public c…
阅读更多...
Spring Boot3远程调用工具RestClient

Spring Boot3远程调用工具RestClient

Spring Boot3.2之后web模块提供了一个新的远程调用工具RestClient&#xff0c;它的使用比RestTemplate方便&#xff0c;开箱即用&#xff0c;不需要单独注入到容器之中&#xff0c;友好的rest风格调用。下面简单的介绍一下该工具的使用。 一、写几个rest风格测试接口 RestCont…
阅读更多...
VLAN是什么，一个好的网络为什么要划分VLAN呢？

VLAN是什么，一个好的网络为什么要划分VLAN呢？

前言 在上一篇中讲解了交换机的工作原理&#xff0c;知道了交换机处理数据的转发方式&#xff0c;其中有两种情况会以广播方式进行发送数据&#xff0c;第一种是目的MAC是全F的&#xff0c;以及组播MAC&#xff0c;第二种是未知单播帧&#xff0c;那这个会带来什么样的问题呢&…
阅读更多...
flowable流程图详细绘制教程

flowable流程图详细绘制教程

文章目录 前言一、flowable是什么&#xff1f;回答下之前的问题 二、flowable-modeler使用1. 使用步骤2.开始绘制弄一个请假的流程 三 加载该流程总结 前言 flowable有些晦涩难懂的东西&#xff1a; 我最开始接触的时候,还是用的activity,当时觉得好复杂,那么这次经过我自己在…
阅读更多...
蓝桥杯c++算法秒杀【6】之动态规划【上】（数字三角形、砝码称重(背包问题)、括号序列、组合数问题：：：非常典型的必刷例题！！！）

蓝桥杯c++算法秒杀【6】之动态规划【上】（数字三角形、砝码称重(背包问题)、括号序列、组合数问题：：：非常典型的必刷例题！！！）

下将以括号序列、组合数问题超级吧难的题为例子讲解动态规划 别忘了请点个赞收藏关注支持一下博主喵&#xff01;&#xff01;&#xff01;! ! ! ! &#xff01; 关注博主&#xff0c;更多蓝桥杯nice题目静待更新:) 动态规划 一、数字三角形 【问题描述】 上图给出了一…
阅读更多...
[Python3学习笔记-基础语法] Python3 基础语法

[Python3学习笔记-基础语法] Python3 基础语法

本篇文章详细介绍Python3的基础语法&#xff0c;主要包括编码、标识符、Python保留字、注释、行缩进、多行语句、Number类型、字符串、空行、print打印等。 这些是Python最基础的东西&#xff0c;掌握好了才能更好的学习后续的内容。 有兴趣共同结伴学习Python的朋友&#xff0…
阅读更多...
HDR视频技术之三：色度学与颜色空间

HDR视频技术之三：色度学与颜色空间

HDR 技术的第二个理论基础是色度学。从前面的内容中可以了解到&#xff0c;光学以及人类视觉感知模型为人类提供了解释与分析人类感知亮度的理论基础&#xff0c;但是 HDR 技术不仅仅关注于提升图像与视频的亮度范围&#xff0c;同时也关注于提供更加丰富的色彩。因此&#xff…
阅读更多...
数据库MYSQL——表的设计

数据库MYSQL——表的设计

文章目录 前言三大范式&#xff1a;几种实体间的关系&#xff1a;一对一关系&#xff1a;一对多关系&#xff1a;多对多关系&#xff1a; 前言 之前的博客中我们讲解的是关于数据库的增删改查与约束的基本操作&#xff0c; 是在已经创建数据库&#xff0c;表之上的操作。 在实…
阅读更多...
C++自动化测试：GTest 与 GitLab CI/CD 的完美融合

C++自动化测试：GTest 与 GitLab CI/CD 的完美融合

在现代软件开发中&#xff0c;自动化测试是保证代码质量和稳定性的关键手段。对于C项目而言&#xff0c;自动化测试尤为重要&#xff0c;它能有效捕捉代码中的潜在缺陷&#xff0c;提高代码的可维护性和可靠性。本文将重点介绍如何在C项目中结合使用Google Test&#xff08;GTe…
阅读更多...
备忘笔记-工具：JetBrains友好工具安装配置

备忘笔记-工具：JetBrains友好工具安装配置

1、配置/脚本文件下载 1、校验地址&#xff1a;https://3.jetbra.in/ 打开选择可用链接&#xff0c;点击跳转可用页面。 2、下载文件 左上角点击下载jetbra.zip文件 下载对应全家桶软件版本号&#xff0c;版本号在对应卡票右上角可见。 2、安装包下载 官网地址&#xff1a…
阅读更多...
Flask 基于wsgi源码启动流程

Flask 基于wsgi源码启动流程

1. 点击 __call__ 进入到源码 2. 找到 __call__ 方法 return 执行的是 wsgi方法 3. 点击 wsgi 方法 进到 wsgi return 执行的是 response 方法 4. 点击response 方法 进到 full_dispatch_request 5. full_dispatch_request 执行finalize_request 方法 6. finalize_request …
阅读更多...
Linux 下进程基本概念与状态

Linux 下进程基本概念与状态

文章目录 一、进程的定义二、 描述进程-PCBtask_ struct内容分类 三、 进程状态 一、进程的定义 狭义定义&#xff1a;进程是正在运行的程序的实例&#xff08;an instance of a computer program that is being executed&#xff09;。广义定义&#xff1a;进程是一个具有一定…
阅读更多...
IDEA使用tips（LTS✍）

IDEA使用tips（LTS✍）

一、查找项目中某个外部库依赖类的pom来源 1、显示图 2、导出Maven 项目依赖的可视化输出文件 3、点击要查找的目标类&#xff0c;项目中定位后复制依赖名称 4、在导出的依赖的可视化文件中搜索查找 5、综上得到&#xff0c;Around类来自于pom中的spring-boot-starter-aop:jar…
阅读更多...
【shell编程】函数、正则表达式、文本处理工具

【shell编程】函数、正则表达式、文本处理工具

函数 系统函数 常见内置命令 echo打印输出 #!/bin/bash # 输出普通文本 echo "Hello, World!"# 输出变量值 name"Alice" echo "Hello, $name"# 输出带有换行符的文本 echo -n "Hello, " # -n 选项不输出换行 echo "World!&quo…
阅读更多...
如何选择服务器

如何选择服务器

如何选择服务器 选择服务器时应考虑以下几个关键因素&#xff1a; 性能需求。根据网站的预期流量和负载情况&#xff0c;选择合适的处理器、内存和存储容量。考虑网站是否需要处理大量动态内容或高分辨率媒体文件。 可扩展性。选择一个可以轻松扩展的服务器架构&#xff0c;以便…
阅读更多...
LeetCode 904.水果成篮

LeetCode 904.水果成篮

LeetCode 904.水果成篮 思路&#x1f9d0;&#xff1a; 求水果的最大数目&#xff0c;也就是求最大长度&#xff0c;我们是单调的向前求解&#xff0c;则能够想到使用滑动窗口进行解答&#xff0c;可以用hash表统计每个种类的个数&#xff0c;kinds变量统计当前种类&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023