web --- javascript(01)-- 介绍、变量和数据类型

news2025/2/23 23:46:06

JavaScript

w3c:三层分离

结构层:HTML

表示层:CSS

行为层:JavaScript

介绍

(1)作用:

  1. 数据校验
  2. 网页特效
  3. 数据交互
  4. 服务器端编程(NodeJS)

(2)javascript几种常见写法

  1. 标签:标签<onxxxx='属性'>
  2. 页面的script标签
  3. 单独的js文件中

(3)示例:第一个javasript代码

<!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>第一个JavaScript代码</title>
    <script>
        // 单行注释
        alert('我也是对话框')
        // 第二种方式:script标签中显示
    </script>

    <script src="javascript/09.js"></script>
</head>
<body>
    <button onclick="alert('点我干嘛')">点击</button>
    <!-- 第一种方式:标签引用js -->
</body>
</html>
// 第三种方式:单独的js文件中
alert('这是外部js文件中的js代码')

(4)javascript对话框:(js设计之初是基于事件驱动式编程)

  • 警告框:alert(“对话框”);
  • 确认框:confirm("确认对话框");
  • 输入框:prompt("交互对话框");

例:js对话框

<!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">
    <script src="javascript/001.js"></script>
    <title>js对话框</title>
</head>
<body>
    
</body>
</html>

// 警告框:提示信息
window.alert('这是一个警告框');

// 确认框
var isDel =  confirm("确定删除信息吗?");// 该确认框会返回一个变量,该变量是一个布尔值
// var接收变量

// alert(isDel)

if (isDel) {
    alert("删除成功");
}

// 输入框
var age = window.prompt("请输入你的年龄:","18")
// 当后面加上年龄,则为默认值(javascript接受到的值为字符串类型)
alert(typeof age); // 进行判断age变量的类型

if(age >= 18){
    alert("恭喜您成年了");
}else{
    alert("请开启青少年模式");
}

js变量和数据类型

(1)变量:(程序运行时,可以发生变化的量)

  • 定义变量:js是一门弱数据语言,不需声名变量类型

在ES6之前:var  变量名称  =  变量值; //  类型由值自己决定

var age = 18;

在ES6开始:var关键字用来定义变量,已被取消(全局变量,无块级作用域)

let  变量名称  =  变量值;

const  关键字  //  定义常量  

<1> 示例:js的变量

<!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">
    <script src="javascript/002.js"></script>
    <title>js的变量</title>
</head>
<body>
    
</body>
</html>
    sss = 123;
    var name = "刘建宏";
    var age = 18;
    var gendar = true;

    alert(typeof name)
    alert(typeof age)
    alert(typeof gendar)

    // for(var i = 0; i<10;i++){  
    //     console.log(i);
    // }
    // alert(i);// 依旧能访问到,变量定义在for循环中,但var的作用域在全局

    // for(let i = 0; i < 10 ; i ++){
    //     console.log(i);
    // }
    // alert(i);// 报错,无法访问,未被定义。let是块级变量
    alert(sss);// 当变量前什么都没加,默认是全局变量。该写法禁止使用

    // var PI = 3.14;
    // PI = 3.15;// 值可以改变,无法形成定值
    // console.log(PI + 10) 

    const PI = 3.14;
    console.log(PI + 10)
    PI = 3.15  // 报错,不能对常量进行操作

<2> 变量的命名规范

  1. 只能由有效符号组成:大小写字母 + 数字 + 下划线 + $
  2. 不能以数字开头
  3. 不能使用关键字或者保留字
  4. 变量命名尽量有意义
  5. 字母命名时,采用驼峰法
  6. 避免和系统中的类、方法、函数、变量一致

<3> js的注释

  • 单行注释                //  xxxxxxx
  • 多行注释                /* xxxxxx */
  • 文档注释                /*! xxxxxx */

区别:压缩时,文档注释不会删除,剩下的都会被删

(2)js数据类型

<1> 基本数据类型

  • 数值型(number)

分类:整数型(int);浮点型(float)

 例:进入控制台进行操作

  • 布尔类型(boolean)

仅有两个值:true / flase

  • 字符串(基本数据类型)

分类:"字符串";'字符串';`字符串`(反引号,ES6提供,且可换行,可占位)

例:进入控制台进行操作

  • null(代表无)
  • NaN(not a number)
  • undefined(未定义)

<2> 引用数据类型:(万物皆对象):array、set、map、object、JSON......

<3> 例:js数据类型

<!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">
    <script src="javascript/003.js"></script>
    <title>js数据类型</title>
</head>
<body>
    
</body>
</html>
let a = 10;
alert(a)  // 10
typeof a // number
let b = 3.14;
alert(b)
typeof b; // number
let s = 'this is a string'
alert(s) // 'this is a string'
let ss = "this is a string"
alert(ss) // 'this is a string'
let sss = `this 
is 
a 
string`
sss  //'this \nis \na \nstring'
alert(sss) 
/* 
this
is
a 
string
*/ 
alert("a = "+ a +", b = " + b)  // a = 10, b = 3.14
alert(`a = ${a}, b = ${b}`)  // a = 10, b = 3.14

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

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

相关文章

【PS小贴士】PS项目交货(CNS0/VL02N)-和销售订单交货(VL01N/VL02N)的区别点

目前一家公司在进行企业信息化建设&#xff0c;作为PS顾问有幸参与到其中。真是做的项目越来越多&#xff0c;经历的人越来越多&#xff0c;每个项目的感触也不同。不论是方案&#xff0c;还是项目上一起努力的小组成员、以及项目组顾问。哈哈哈哈哈哈哈哈...... 同样&#xf…

Linux 系统上的库文件生成与使用

1.库文件 库是一组预先编译好的方法的集合。Linux系统存储的库的位置一般在&#xff1a;/lib 和 /usr/lib。 在 64 位的系统上有些库也可能被存储在/usr/lib64 下。库的头文件一般会被存储在 /usr/include 下或其子目录下。 库有两种&#xff0c;一种是静态库&#xff0c;其…

分享几个国内免费可用的ChatGPT镜像【无需梯子】

文章目录 1.什么是ChatGPT2.ChatGPT的基础技术3.ChatGPT工作原理4.ChatGPT应用场景5.ChatGPT局限性6.ChatGPT的未来发展7.国内免费ChatGPT镜像写在最后 ChatGPT国内能用吗&#xff1a;ChatGPT在国内是无法使用的。你肯定要问我怎样才能体验到ChatGPT的神奇魔力呢&#xff1f;文…

【Spring】— 映射文件

映射文件 映射文件是MyBatis框架中十分重要的文件。在映射文件中&#xff0c;<mapper>元素是映射文件的根元素&#xff0c;其他元素都是它的子元素。映射文件中的主要元素如下所示。 <mapper><!--映射查询语句&#xff0c;可自定义参数&#xff0c;返回结果集…

Python日期带时区转换工具类总结

文章目录 1.背景2. 遇到的坑3. 一些小案例3.1 当前日期、日期时间、UTC日期时间3.2 昨天、昨天UTC日期、昨天现在这个时间点的时间戳3.3 日期转时间戳3.4 时间戳转日期3.5 日期加减、小时的加减 4. 总结5. 完整的编码 1.背景 最近项目是国际项目&#xff0c;所以需要经常需要用…

docker 解析DNS失败

问题现象&#xff1a; 我之前在docker里部署的容器&#xff0c;今天突然访问不了了&#xff0c;一开始我以为是容器的问题&#xff0c;将容器restart&#xff0c;销毁重建&#xff0c;都没有解决。 最后准备重启docker service&#xff0c;在重启之前&#xff0c;看了一眼dock…

接口自动化测试,从常规到动态再到全局断言,Postman让你居家必备!

目录 引言&#xff1a; 常规断言 动态参数断言 全局断言 总结 引言&#xff1a; Postman是一款非常流行的API接口测试工具&#xff0c;它以其易用性和强大的功能得到了广泛的应用。其中Postman断言功能是我们进行接口自动化测试时非常关键的一个环节。在接口测试中&#…

【正则入门】

语法 . &#xff08;点&#xff09; 匹配除换行符&#xff08;\n、\r&#xff09;之外的任何单个字符&#xff0c;相等于 [^\n\r]。 [\s\S] 匹配所有。\s 是匹配所有空白符&#xff0c;包括换行&#xff0c;\S 非空白符&#xff0c;不包括换行。 \d [0-9] \D 非数字&#xff1…

CISCN2023-Crypto

CISCN2023-Crypto 基于国密SM2算法的密钥分发可信度量Sign_in_passwdBB84badkey1 基于国密SM2算法的密钥分发 非预期&#xff0c;直接search能找到明文 curl -d "nameha&schoolhznu&phone110" http://123.56.244.196:30817/api/logincurl -d "id984ae…

【线程池】实现多线程并发定时任务

文章目录 一、为什么需要配置多线程定时任务二、单线程定时任务三、多线程定时任务 一、为什么需要配置多线程定时任务 springboot中通过注解 Scheduled 注解的方法都是一个定时执行的任务, 默认都是单线程的,就算是多个定时任务也是在同一个单线程(scheduled-1)中运行, 如果其…

离线版Gerber查看器+PCB/PCBA检测神器新功能!

一、CAM离线版——华秋CAM│专业Gerber查看器 公司电脑不能连接网络&#xff1f;不慌&#xff0c;我们完全离线且无需账号登录&#xff01; 磁盘空间不够拒绝下载&#xff1f;别怕 &#xff0c;我们安装包仅20M可随便分享&#xff01; 不会使用CAM350导入Gerber&#xff1f;没事…

APP开发死亡潮来临 小程序是否会取而代之?

移动互联网的发展&#xff0c; APP开发行业也迎来了它的大时代。据有关数据显示&#xff0c;2017年上半年国内新增的 App数量达到了创纪录的449万款&#xff0c;用户使用时长超过了200亿分钟。移动互联网已成为名副其实的“流量”产业&#xff0c;也因此诞生出一大批 APP开发公…

PostgreSQL 基础(一)-- 新手教程

PostgreSQL 12 官网 github 世界上最先进的开源关系数据库 1、新手入门 1.1 安装 当然&#xff0c;在使用PostgreSQL之前&#xff0c;你需要安装它。PostgreSQL可能已经安装在您的站点上&#xff0c;或者因为它包含在您的操作系统发行版中&#xff0c;或者因为系统管理员已…

【了不起的芯片 - 读书笔记】CPU 的制作流程 ( 晶圆制作 | 光刻机光刻流程 | 蚀刻过程 | 涂层过程 | 重复上述步骤若干次 | 芯片封装 )

文章目录 一、晶圆制作二、光刻机光刻流程三、蚀刻过程四、涂层过程五、重复上述步骤若干次六、芯片封装 一、晶圆制作 晶圆制作是半导体芯片制造的关键过程&#xff0c;它涉及将硅晶片&#xff08;或其他半导体材料&#xff09;转化为可以用于集成电路制造的基础材料。下面是晶…

ERP的需求分析

目录 什么是需求分析? 开发背景 01、系统模块 02、基础资料 供应商信息</

JDK21:Java21的新特性

背景 定于9月推出的Java21计划现在包括一个关键封装机制API和32位Windows端口的弃用。 Java开发工具包&#xff08;JDK&#xff09;21将于9月作为Oracle标准Java实现的下一个长期支持版本&#xff0c;现在有13个功能被正式提出&#xff0c;最近几天又增加了两个功能。 最新的…

ATECLOUD云测试平台新能源电机测试系统:高效、可扩展的测试利器

随着全球对环境保护的日益重视&#xff0c;新能源的发展越来越受到关注。电动汽车作为新能源领域的重要组成部分&#xff0c;其性能和质量对于消费者来说至关重要。为了确保电动汽车的性能和质量&#xff0c;测试系统平台解决方案变得越来越重要。本文将介绍一种基于ATECLOUD智…

10分钟学会sovits第一篇

So-vits-svc 基于端到端架构的VITS和soft-vc&#xff0c;用户只需准备几十分钟到几个小时不等的语音或歌声数据&#xff0c;就能制作&#xff08;训练&#xff09;属于自己的 AI 声库 &#xff08;前提是你的显卡足够给力&#xff09;&#xff0c;将一段语音或歌声转换为你想要…

上饶广信区个体私营经济协会新班子力争打造全国样板

5月26日下午&#xff0c;江西省上饶市广信区个体私营经济协会第二届理事会暨会员代表大会在上饶京都国际大酒店隆重召开&#xff0c;来自协会的200多名理事会员单位及社会各界嘉宾、媒体代表共计300余人参加了此次大会。本次大会成功举行了换届大会&#xff0c;通过举手表决方式…

解决启动tomcat出现的The JRE_HOME environment variable is not defined correctly问题~

错误描述如下&#xff1a; 解决办法&#xff1a; 首先打开环境变量的编辑位置检查你的环境变量是否配置完成&#xff1a; 环境变量配置如果没有问题&#xff0c;但启动tomcat还是出现上述错误&#xff0c;则可进行下述步骤&#xff1a; 找到目标文件&#xff1a; 右击对其进行…