JS-基础语法(一)

JavaScript简单介绍

变量

常量

数据类型

类型转换

案例


1.JavaScript简单介绍

  • JavaScript 是什么?

是一种运行在客户端(浏览器)的编程语言,可以实现人机交互效果。

  • JS的作用

  •  JavaScript的组成

JS=ECMAScript( 基础语法 )、web APIs (DOM、BOM)

权威网站: MDN(百度搜索)

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

  • JavaScr书写(引入方式)位置?

js的引入方式基本和css差不多,也是分成三种,分别是内部,外部,内联

注意:

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

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

注意:

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

常用的是内部和外部,内联只在特定的场景使用 

  • JavaScript 输入输出语法 --这个常用,需要背下来

输入:使用prompt()函数

输出:1 console.log(提示信息)      ---控制台输出信息

           2 document.write()              --会在网页的内容部分输出信息

           3 alert()                                --使用alert()函数以提示框的形式输出内容

   

输入:

作用:显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字
展示:

输出:

 注意:

JavaScript 代码执行顺序:

Ø 按HTML文档流顺序执行JavaScript代码

Ø alert() 和 prompt() 它们会跳过页面渲染先被执行(目前作为了解,后期讲解详细执行过程)

字面量 

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


2.变量

变量是什么

简单来说,变量就是我们用来存储数据的一个容器

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

变量基本使用

1 在JS中如何定义一个变量  --与java不一样

语法:关键字 变量名

2 更新变量

变量赋值后,还可以通过简单地给它一个不同的值来更新它。

3. 声明多个变量 

4 变量命名规则与规范   --与java相同

变量扩展(重点概念)
let 和 var 区别?

在较旧的JavaScript,使用关键字 var 来声明变量 ,而不是 let。
var 现在开发中一般不再使用它,只是我们可能再老版程序中看到它。
let 为了解决 var 的一些问题

var 声明:

Ø 可以先使用 在声明 (不合理)
Ø var 声明过的变量可以重复声明(不合理)
Ø 比如变量提升、全局变量、没有块级作用域等等

结论:var 就是个bug,别迷恋它了,以后声明变量我们统一使用 let

变量拓展-数组

  1. 数组是按顺序保存,所以每个数据都有自己的编号
  2. 计算机中的编号从0开始,所以小明的编号为0,小刚编号为1,以此类推
  3. 在数组中,数据的编号也叫索引或下标
  4. 数组可以存储任意类型的数据 


3.常量

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

let — 现在实际开发变量声明方式。

var — 以前的声明变量的方式,会有很多问题。

const — 类似于 let ,但是变量的值无法被修改。 


4.数据类型 --重点

在js中数据类型主要分成基本数据类型和引用数据类型

基本数据类型:number,string,boolean,undefined,null

引用数据类型:object对象

注意:

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

number类型(数字类型):

JavaScript 中的正数、负数、小数等 统一称为 数字类型。

字符串类型(string) 

通过单引号( '') 、双引号( "")或反引号( ` ) 包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。

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

字符串拼接:

方式1: + 运算符 可以实现字符串的拼接。

口诀:数字相加,字符相连

方式2:使用模板字符串(这是Es6提供的)

布尔类型(boolean)

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

它有两个固定的值 true 和 false,表示肯定的数据用 true(真),表示否定的数据用 false(假)。 

未定义类型(undefined)

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

什么情况出现未定义类型?

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

null(空类型)

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

其实这个null是没有必要的,也想过去除这个,但鉴于以前有的有使用这个null就没有把它删除
 

null 和 undefined 区别:

  • undefined 表示没有赋值 
  • null 表示赋值了,但是内容为空

typeof 关键字检测数据类型 

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式:
1. 作为运算符: typeof x (常用的写法)
2. 函数形式: typeof(x)
换言之,有括号和没有括号,得到的结果是一样的,所以我们直接使用运算符的写法。


 5.类型转换 --重点

为什么需要类型转换

JavaScript是弱数据类型: JavaScript也不知道变量到底属于那种数据类型,只有赋值了才清楚。 坑: 使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算。

此时需要转换变量的数据类型。

通俗来说,就是把一种数据类型的变量转换成我们需要的数据类型。

隐式转换

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

显式转换

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

 订单实战案例:

需求:用户输入商品价格和商品数量,以及收货地址,可以自动打印订单信息
分析:
①:需要输入3个数据,所以需要3个变量来存储 price num address
②:需要计算总的价格 total
③:页面打印生成表格,里面填充数据即可
④:记得最好使用模板字符串


 

<!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>打印订单信息</title><style>h1 {text-align: center;}table {text-align: center;margin: 0 auto;}table,td,th,tr {border: 1px solid black;border-collapse:collapse;padding: 5px 30px;}</style>
</head>
<body><h1>订单确认</h1><!-- <table><tr><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>总价</th><th>收获地址</th></tr><tr><td>小米青春版PLUS</td><td><span>${price}</span> 元</td><td>${numbers}</td><td><span>${sum}</span> 元</td><td>${address}</td></tr></table> --><script>let price = +prompt('请输入商品价格')let numbers = +prompt('请输入购买商品的数量')let sum = price * numberslet address = prompt('请输入地址')//编写html代码document.write(`<table><tr><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>总价</th><th>收获地址</th></tr><tr><td>小米青春版PLUS</td><td><span>${price}</span> 元</td><td>${numbers}</td><td><span>${sum}</span> 元</td><td>${address}</td></tr></table>`)</script>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每日算法打卡:分巧克力 day 9

文章目录 原题链接题目描述输入格式输出格式数据范围输入样例&#xff1a;输出样例&#xff1a; 题目分析示例代码 原题链接 1227. 分巧克力 题目难度&#xff1a;简单 题目来源&#xff1a;第八届蓝桥杯省赛C A/B组,第八届蓝桥杯省赛Java A/B/C组 题目描述 儿童节那天有 …

流程挖掘在优化核心业务、增强可见性和提升自动化方面的三重效应

在过去二十年里&#xff0c;流程挖掘技术已由最初的学术理念演变成一种成熟的软件基础工具&#xff0c;它致力于流程的可视化、深度分析及其优化。传统的手动流程改进方法往往会受到主观偏见和误差的干扰&#xff0c;而流程挖掘技术则通过结合流程建模与数据挖掘手段&#xff0…

mysql 优化工具 EXPLAIN详解

EXPLAIN 是 MySQL 中用于查看查询执行计划的关键字&#xff0c;通过 EXPLAIN 可以了解 MySQL 优化器是如何选择执行查询的。EXPLAIN 的输出信息包括了许多字段&#xff0c;其中一些关键的字段和类别如下&#xff1a; id&#xff1a; 查询的标识符&#xff0c;用于标识查询执行计…

【2024系统架构设计】 系统架构设计师第二版-嵌入式系统架构设计理论与实践

目录 一 嵌入式系统软件架构的原理 二 嵌入式系统软件架构的设计方法 三 案例分析 一 嵌入式系统软件架构的原理 🚀嵌入式系统的典型架构可以分为

java.lang.ClassNotFoundException: jakarta.servlet.Servlet

联系servlet的使用时&#xff0c;编写了servlet的处理器&#xff0c;但是浏览器报500错误&#xff0c;有时候是404错误 WebServlet("/mayikt") public class Servlet1 implements Servlet {Overridepublic void init(ServletConfig servletConfig) throws ServletExc…

MySQL5.7 InnoDB 磁盘结构之索引Index

官网地址&#xff1a;MySQL :: MySQL 5.7 Reference Manual :: 14.6.2.1 Clustered and Secondary Indexes 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. MySQL 5.7 参考手册 / ... / 聚集索引和二级索引 14…

C++实现简单贪吃蛇游戏

文章目录 1 开发历程2 开发思路3 使用介绍4 源文件代码5 游戏截图6 小结 1 开发历程 游戏使用C语言开发&#xff0c;是博主某个下午心血来潮的结果&#xff0c;后面又花了点时间加了计分&#xff0c;记录历史得分的功能。 2 开发思路 其实贪吃蛇主要难在蛇身的移动上&#x…

AWS IoT Core 实战指南

Amazon Web Services (AWS) 提供了全球范围内的托管服务,其中包括 AWS IoT Core,专为连接和管理物联网设备而设计。这个实战指南将带你一步步了解如何使用 AWS IoT Core 来注册设备、提高安全性、进行通信以及利用设备影子功能。 设备注册 1. 创建 Thing(设备) 在 AWS I…

cocos creator 如何绑定参数到编辑器

很多cocos creator同学不知道如何绑定组件属性到编辑器上&#xff0c;今天我们来教大家如何绑定 1: 基本数据属性绑定到编辑器 这个非常简单&#xff0c;模板是属性名字: 默认的值; Is_debug: false, speed: 100, 2: 系统组件类型与节点绑定到编辑器 属性名字: { type: 组件…

App更换图标

App更换图标 京东淘宝的每到618或者双十一的时候&#xff0c;app图标都会贴合相关主题更换一下&#xff0c;但是那个时间段app也没有升级&#xff0c;所以说肯定是有一个配置能够更改app的图标。 查了一些文档&#xff0c;发现了如下的方法。 准备图片 准备120x120和180x18…

带着股票转户——转托管流程分享

前一阵子&#xff0c;有部分朋友说想换掉原来的券商&#xff0c;但又不想卖出股票&#xff0c;这时候就可以通过券商的“转托管”功能&#xff0c;把股票从原来的券商账户&#xff0c;转移到新的券商账户中。 转托管的好处显而易见&#xff0c;不需要卖出股票/重新买入股票&am…

什么是宏任务与微任务以及它们的执行顺序

文章目录 宏任务微任务 微任务和宏任务是指在 JavaScript 中执行异步任务的两种不同的队列。 宏任务 宏任务&#xff1a; 宏任务是指由浏览器发起的、在事件循环中执行的异步任务。常见的宏任务包括&#xff1a; setTimeoutsetIntervalI/O 操作UI 渲染 宏任务的执行顺序是在每…

Ubuntu20.04扩展磁盘后系统无法启动

z​​​​​​Ubuntu20.04虚拟机扩展磁盘后系统无法启动 - 黑夫和惊 - 博客园 (cnblogs.com) 找了半天的解决方法&#xff0c;这个人的最好用。 只不过进入BOOT那个地方&#xff0c;不需要狂按F2&#xff0c;直接在虚拟机的开机键边上的小三角&#xff0c;选择&#xff0c;“…

代码随想录刷题第四十三天| 1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零

代码随想录刷题第四十三天 今天为三道0-1背包问题的变种&#xff0c; 分别有三个小问题 给定一个容量为j的背包&#xff0c;尽可能装下物品&#xff0c;找到能装下物品的最大价值 dp[i][j] max(dp[i-1][j], dp[i-1][j-nums[i]]nums[i]) 给定一个容量为j的背包&#xff0c;找…

VScode/Xshell连接学校服务器

vscode连学校服务器 1.连接atrust VPN2.Xshell连接服务器2.1创建一个自己的用户 3.xftp传文件4.vscode连接服务器4.1下载remote-ssh4.2连接服务器4.3激活conda环境4.4运行代码 5. pytorch版本不兼容解决方案 1.连接atrust VPN 如果是使用的是校园网&#xff0c;可以不连接 2…

【全栈开发|Fresh框架】Fresh环境安装与快速体验Fresh全栈开发

文章目录 前言一、环境配置1. 安装Deno2. 安装idea插件 二、Hello World1.创建项目2.项目结构3. 创建一个路由4. 创建一个动态路由5. 自定义handlers1. 自定义响应头2. 随即生成uuid 6. 表单提交7. 部署到生产环境1. 将代码上传到github2. 在Deno控制面板创建一个项目 总结 前言…

面试算法100:三角形中最小路径之和

题目 在一个由数字组成的三角形中&#xff0c;第1行有1个数字&#xff0c;第2行有2个数字&#xff0c;以此类推&#xff0c;第n行有n个数字。例如&#xff0c;下图是一个包含4行数字的三角形。如果每步只能前往下一行中相邻的数字&#xff0c;请计算从三角形顶部到底部的路径经…

强烈推荐!这8款在线画图工具好用极了

即时设计 即时设计作为一种简单的绘图工具&#xff0c;为创作者提供了一个方便而强大的创作平台&#xff0c;具有丰富的绘图工具、实时合作、矢量绘图和组件设计系统等功能。即时设计可以满足不同的创作需求&#xff0c;使创意自由流动。 强大的矢量编辑工具 即时设计提供了…

苹果电脑Markdown文本编辑Typora mac功能介绍

Typora mac是一款跨平台的Markdown编辑器&#xff0c;支持Windows、MacOS和Linux操作系统。它具有实时预览功能&#xff0c;能够自动将Markdown文本转换为漂亮的排版效果&#xff0c;让用户专注于写作内容而不必关心格式调整。Typora Mac版除了支持常见的Markdown语法外&#x…

C++每日一练(14):对称矩阵的判定

题目描述 输入矩阵的行数&#xff0c;再依次输入矩阵的每行元素&#xff0c;判断该矩阵是否为对称矩阵&#xff0c;若矩阵对称输出“yes"&#xff0c;不对称输出”no“。 输入 第一行输入一个正整数N&#xff08;N<20&#xff09;&#xff0c;表示矩阵的行数&#xff0…