javascript:js介绍初体验和变量以及数据类型的使用。

目录

一.介绍

1概念

2作用

3组成

二.js初体验

1.js的书写位置

a.行间引入

b.内部引入

c.外部引入​编辑

2.js的注释 

3.js的结束符 

4.输入输出语句 

输出语法

输入语法 

三.变量及数据类型 ​  

1.字面量 

2.变量 ​编辑

变量的使用 ​编辑

let和var的区别 

3.常量

4.数据类型​编辑 ​

变量的分类

相关代码 

使用 typeoy 方法获取变量的类型 

 注意事项

特殊的number

 字符串需要注意

相关代码 


一.介绍

1概念

• js是一种运行在客户端(浏览器)的编程语言

2作用

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

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

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

• 4。服务端编程(node,js)

3组成

• ECMAscript--js语言基础

• 变量,分支语句,循环语句,对象等

• Wed APIs

• DOM页面文档对象模型

• 操作文档,比如对页面元素进行移动,大小,添加等操作

• BOM浏览器对象模型

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

二.js初体验

1.js的书写位置

a.行间引入

<!-- 在行间引入js -->

      <a href="javascript:alert('钓鱼');">点击</a>

      <a href="javascript:console.log('钓鱼');">点击console</a>

      <a href="javascript:;">点击不动1</a>

      <a href="javascript:void(0);">点击不动2</a>

b.内部引入

<!-- 通过script标签创建js

     默认type属性值是type:"text/javascript"

-->

<script type="text/javascript">

    console.log('困死了')

</script>

c.外部引入

<!-- 外部引入js

通过src属性

-->

<script src="./js/test.js"></script>

2.js的注释 

• 单行注释    符号://     作用://右边的这一行代码会被忽略  快捷键ctrl+/

• 块注释        符号:/* */  作用:在/* 和*/之间的所有内容都会被忽略  快捷键:shift+alt+a

3.js的结束符 

• 作用:使用英文的( ; )代表语句结束    实际情况:在实际开发中,可写可不写,浏览器(JavaScript引擎)可以自动推断语句的结束位置

• 注意:css中结束符;必须写,js中结束符可写可不写(为了风格统一,结束符要么每句都写,要么每句都不写)

4.输入输出语句 

输出语法

语法1:document.write('要输出的内容')    作用:向body内输出内容   注意:如果输出的内容写的是标签,也会被解析成网页元素。document文档

• 注意:输出变量不需要加 ''   列如输出变量mianji    document.write(mianji)   

• 语法2:alert(‘要输出的内容’)  作用:页面弹出警告对话框                      

• 语法3:console.log('控制台打印‘)     作用:控制台输出语法,程序员调试使用

输入语法 

语法:prompt(’请输入您的姓名:‘)  作用;显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字

js代码执行顺序

  • 按HTML文档流顺序执行javaScript代码
  • alret()和prompt()他们会跳过页面渲染先被执行

三.变量及数据类型 

1.字面量 

  • 目标;能说出什么是字面量  在计算机科学中,字面量(literal)是在计算机中描绘  事/物
  • 比如:我们的工资是:1000此时1000就是  数字字面量  ’黑马程序员‘字符串字面量  还有[]数组字面量   {}对象字面量等等  

2.变量 

定义:变量指的是在程序中保存数据的一个容器,变量是计算机内存中存储数据的标识符,根据变量名称,可以获取到内存中存储的数据,也就是说,我们向内存中存储了一个数据,然后要给这个数据起一个名字,为了使我们以后再次找到他

  • 语法1: var  变量=值    已淘汰不推荐使用       语法2:let 变量 = 值      推荐使用

变量的使用 

  • 变量的声明

• 想要使用变量,首先需要创建变量(也称声明变量或者定义变量)  语法:  let  变量名              声明变量有两部分构成:声明关键字,变量名(标识)   let即关键字是允许,许可,让,要,的意思

• 简单一点,也可以声明变量的时候直接完成赋值操作,这种操作也称为变量的初始化   let age= 1

• 声明多个变量:变量赋值后,还可以通过简单地给它一个不同的值来更新它  语法:多个变量中间用逗号隔开。   let age = 18,uname = ’pink‘(不推荐使用)

  • 变量的赋值

• 定义了一个变量后,你就能够初始化它(赋值)。在变量名之后跟上一个“=”,然后是数值 注意;是通过变量名来获得变量里的数据

变量命名: 1.一个变量名称可以由数字,字母,英文下划线(_),美元符号$组成。

变量命名规范:1.变量名尽量有意义2.驼峰命名3.不要使用中文

let和var的区别 

  • let和var的区别:  在较旧的javaScript,使用关键字var来声明变量,而不是let,var现在开发中一般不再使用它,只是我们可能在老版本中看到它。let为了解决var的一些问题
  • var声明:可以使用再声明(不合理)            var声明过的变量可以重复声明(不合理)         比如变量提升,全局变量,没有块级作用于等等
  • 结论:var就是个bug,别迷恋他了,以后声明变量我们统一使用let

3.常量

常量:一旦定义,他的值不可以更改的量

    声明一个常量,使用的关键字是 const

    const PI= 3.2425926535;

    */

    const PI = 3.2425926535;

    console.log(PI);

   //  PI=3.14 报错,常量声明后不能更改(常量的值不能被修改)

4.数据类型 

变量的分类

    1.number(南波)  数字类型,包含整数和小数

    2.string (斯最ing) 字符串类型

    3.boolean 布尔类型,布尔类型只有两个值 true真 false假

    4.undefined(安dei凡的) 类型,未定义的类型

    5.object(偶不杰可t) 对象类型

    6.null   空对象,特殊类型

 

相关代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量的分类</title><style>*{margin: 0;padding: 0;}.wp{width: 200px;height: 200px;background: pink;}</style>
</head>
<body><div id="wp" class="wp"></div>
</body>
</html>
<script>let num1 = 123;/*使用 typeoy 方法获取变量的类型使用方法:typeof  变量名typeof  (变量名)返回的是变量的类型*/console.log(typeof num1);console.log(typeof(num1));console.log(typeof(123.223));// 字符串类型let str1 = '小垃圾';console.log(typeof(str1));//只要带引号都是字符串let str2 = '123'console.log(typeof(str2));//布尔类型let boll = true;console.log(typeof(boll));let bol2 = 'false';console.log(typeof(bol2));let abc;console.log(typeof abc);// 对象类型/*        (到可们t)js 中通过 document.getElementById('元素id');获取dom元素*/let wp = document.getElementById('wp');console.log(typeof wp);console.log(wp.className);//null类型let n = null ;console.log(typeof n);
</script>

使用 typeoy 方法获取变量的类型 

使用 typeoy 方法获取变量的类型

    使用方法:

    typeof  变量名

    typeof  (变量名)

    返回的是变量的类型

    */

    console.log(typeof num1);

    console.log(typeof(num1));

    console.log(typeof(123.223));

 注意事项

特殊的number

特殊的number NaN (不是一个数的number类型)

    NaN 是唯一一个和自己比较,结果值不相等的数据

 字符串需要注意

   字符串需要注意的问题

   字符串一般都由 引号包裹,可以是单引号,也可以是双引号

   如果字符串外部是单引号,内部如果有引号,只能是双引号,反之亦然

   字符串的转义字符

   \n :换行

   \t :tab键

   \' :单引号

   \" :双引号

   \\ :表示 \

   */

相关代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量类型注意问题</title>
</head>
<body></body>
</html>
<script>/*特殊的number NaN (不是一个数的number类型)NaN 是唯一一个和自己比较,结果值不相等的数据*/let oNaN = NaN;console.log(oNaN , typeof oNaN);if(NaN == NaN){console.log('两个值相等');}else{console.log('两个值不相等');}let n1 = 120;let n2 = 20;let n3= n1 + n2;console.log(n3);let n4 = 150;let n5 = n4-n1;console.log(n5);let str3 = '鸡你太美'let str4 = '哎哟你干嘛~~'
//    字符串-数字 得到的结果是一个number 类型let n6 = str3 - n1;console.log(n6,typeof n6);let n7 = str4- n1;console.log(n7,typeof n7);if(n6==n7){console.log('不可能');}else{console.log('NaN和NaN不能相等');}/*字符串需要注意的问题 字符串一般都由 引号包裹,可以是单引号,也可以是双引号如果字符串外部是单引号,内部如果有引号,只能是双引号,反之亦然字符串的转义字符\n :换行\t :tab键\' :单引号\" :双引号\\ :表示 \*/let str5 = '子曰:\'学而时习之\'';console.log(str5);let str6 = '阿巴阿\n巴\\阿\t巴';console.log(str6);alert(str6);
</script>

 

 

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

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

相关文章

在 Linux 上以 All-in-One 模式安装 KubeSphere

官方文档&#xff1a;https://www.kubesphere.io/zh/docs/v3.3/quick-start/all-in-one-on-linux/ 操作系统 最低配置 Ubuntu&#xff1a; 16.04,18.04, 20.04, 22.04 2 核 CPU&#xff0c;4 GB 内存&#xff0c;40 GB 磁盘空间Debian Buste&#xff1a;Stretch 2 核 CPU&am…

【严重】Smartbi商业智能BI软件权限绕过漏洞

漏洞描述 Smartbi 是一款商业智能应用&#xff0c;提供了数据集成、分析、可视化等功能&#xff0c;帮助用户理解和使用他们的数据进行决策。 在 Smartbi 受影响版本中存在权限绕过问题&#xff0c;未授权的攻击者可以通过 RMI 的方式调用 getPassword 接口获取管理员 token …

jQuery知识

DOM知识 alert(我是弹窗); prompt(弹窗输入);Dom元素节点获取 方式一&#xff1a;通过 id 获取 一个 元素节点&#xff08;为什么是一个呢&#xff1f;因为 id 是唯一的&#xff09; var div1 document.getElementById("box1"); 方式二&#xff1a;通过 标签名 获…

conda 环境 numpy 安装报错需要 Microsoft Visual C++ 14.0

到公司装深度学校环境。项目较旧&#xff0c;安装依赖&#xff0c;一堆报错&#xff08;基于 conda 环境&#xff09;&#xff1a; numpy 安装报需要 C 14.0 No module named numpy.distutils._msvccompiler in numpy.distutils; trying from distutilserror: Microsoft Visu…

预测知识 | 预测模型变量重要性、可视化及论文撰写指南

预测知识 | 预测模型变量重要性、可视化及论文撰写指南 目录 预测知识 | 预测模型变量重要性、可视化及论文撰写指南变量重要性模型可视化论文撰写指南参考资料 变量重要性 关于预测模型变量重要性&#xff0c;大家一定熟悉不过。但如下图所示&#xff0c;其展示上可有进一步优…

网络安全进阶学习第十三课——SQL注入Bypass姿势

文章目录 一、等号被过滤二、substr、mid等被过滤三、逗号被过滤四、and/or被过滤五、空格被过滤五、其他绕过方式 一、等号被过滤 1、like&#xff0c;rlike语句&#xff0c;其中rlike是正则2、大于号>&#xff0c;小于号<3、符号<>&#xff1a;<>为不等于…

飞凌OKMX6ULL-C开发板试用

开箱体验 主要配件包括&#xff1a;USB Type-C调试线、电源线、主板。 资源下载 开发环境 飞凌提供了制作好的ubuntu18.04的镜像&#xff0c;直接到网盘下载解压即可&#xff0c;VMWare的安装可以参考网上教程&#xff0c;这里不赘述。安装好VMWare后直接打开解压出来的ubu…

高性能MySQL实战(一):表结构

大家好&#xff0c;我是 方圆。最近因需求改动新增了一些数据库表&#xff0c;但是在定义表结构时&#xff0c;具体列属性的选择有些不知其所以然&#xff0c;索引的添加也有遗漏和不规范的地方&#xff0c;所以我打算为创建一个高性能表的过程以实战的形式写一个专题&#xff…

IMv1.0

一、背景内容 总结golang基础内容&#xff0c;通过一个实例实时 IM系统简进行总结知识 二、简要的图 简要说明&#xff1a; 1.在server.go中&#xff0c;创建一个Newserver返回server指针的结构体 2.正对这个指针结构体实现两个方法 Handler&#xff08;处理方法&#xff0…

VBA遍历Wrod所有表格每个单元格,单元格未尾两个回车替换

一、遍历 word中遍历所有表格的每个单元格。因为在单元格时会常出错。浪费了不少时间。 Sub a()Dim doc As Document, tb As Table, ce As cellDim rng As Range, p As ParagraphSet doc ActiveDocumentFor Each tb In doc.TablesFor Each ce In tb.Range.Cells 关键处就是这里…

redis入门2-命令

Redis的基本数据类型 redis的基本数据类型&#xff08;value&#xff09;: string,普通字符串 hash&#xff08;哈希&#xff09;,适合存储对象 list(列表),按照插入顺序排序&#xff0c;可以由重复的元素 set(无序集合)&#xff0c;没有重复的元素 sorted set(有序集合)&…

Rust 原生支持龙架构指令集

导读近日&#xff0c;Rust 开源社区发布 1.71.0 版本&#xff0c;实现对龙架构&#xff08;LoongArch&#xff09;指令集的原生支持。 龙架构操作系统发行版和开发者可基于上游社区源代码构建或直接下载 Rust 开源社区发布的龙架构二进制版本。Rust 开发者将在龙架构平台上获得…

【枚举】CF1706 C

有人一道1400写了一个小时 Problem - C - Codeforces 题意&#xff1a; 思路&#xff1a; 首先先去观察样例&#xff1a; 很显然&#xff0c;对于n是奇数的情况&#xff0c;只有一种情况&#xff0c;直接操作偶数位就好了 主要是没搞清楚n是偶数的情况 其实有个小技巧&…

无涯教程-Perl - delete函数

描述 此函数从哈希中删除指定的键和关联的值,或从数组中删除指定的元素。该操作适用于单个元素或切片。 语法 以下是此函数的简单语法- delete LIST返回值 如果键不存在,并且与已删除的哈希键或数组索引关联的值,则此函数返回undef。 Perl 中的 delete函数 - 无涯教程网无…

FreeRTOS(vTaskList与vTaskGetRunTimeStats)

目录 1、Cube配置 ①配置SYS ②配置TIM3 ③配置USART2 ④配置FreeRTOS ⑤配置中断优先级 2、代码添加改动 ①在main函数合适位置开启TIM3中断 ②修改HAL_TIM_PeriodElapsedCallback函数 ③完善两个相关函数 ④vTaskList与vTaskGetRunTimeStats的使用 vTaskList&#xff…

p7付费课程笔记6:CMS GC

目录 前言 工作步骤 缺点 问题 前言 上一章节我们讲了串/并行GC&#xff0c;这一章节说下CMS GC。看前思考一个问题&#xff0c;并行GC与CMS GC的区别在哪里。 什么是CMS收集器 CMS(Concurrent Mark-Sweep)是以牺牲吞吐量为代价来获得最短回收停顿时间的垃圾回收器。对于…

数据库索引的使用

1、MySQL的基本架构 架构图 左边的client可以看成是客户端&#xff0c;客户端有很多&#xff0c;像我们经常你使用的CMD黑窗口&#xff0c;像我们经常用于学习的WorkBench&#xff0c;像企业经常使用的Navicat工具&#xff0c;它们都是一个客户端。右边的这一大堆都可以看成是…

【C++从0到王者】第十六站:stack和queue的使用

文章目录 一、stack的使用1.stack的介绍2.stack的使用 二、queue的使用1.queue的护额晒2.queue的使用 三、stack和queue相关算法题1.最小栈2.栈的压入、弹出序列3.逆波兰表达式4.两个栈实现一个队列5.用两个队列实现栈6.二叉树的层序遍历1.双队列2.用一个变量levelSize去控制 7…

ECharts 折线图使用相关

一、折线图堆叠设置为不堆叠的方法 官网是这样的&#xff0c;但是不需要这种堆叠形式的如下图&#xff1a; 即&#xff1a;第2条数据值 第1条数据值 第2条数据值 ​​​​​​​ 第3条数据值 第2条数据值 第3条数据值 需要改成实际值展示&#xff0c;如下图&#xff1a; 只…

数据结构之栈和队列---c++

栈和队列的简单介绍 栈 栈是一个“先进后出”结构 队列 入队演示 队列是一种“先进先出”的结构 出队演示 接下来我们开始本次的内容 栈实现队列 分析 1.我们可以老老实实的写一个栈然后将所有的接口函数实现出来&#xff0c;最后再进行实现队列&#xff0c;但是显然…