【Javascript Day1】javascript基础

news2025/1/8 20:25:05

javascript编程规则


弹窗(举例)

 alert("内容"),直接写在控制区生效

三种写法

 1、行内js语法 :需要注意引号的问题
    <input type="button" value="提示窗" οnclick=' alert("消息") '>

    (onclick : 为标签绑定一个 数据的左键点击功能,οnclick=" 写js代码 ")
    

2、内联js语法 
    <input type="button" value="提示窗" οnclick=" show() ">
    <input type="button" value="提示窗2" οnclick=" 消息() ">
(show、消息为类似id的名字,必须唯一,重复则覆盖)
  
function show(){
            alert("消息")
        }
 // 后续代码覆盖前面的代码
 function show(){
     alert("昨天")
 }

3、外联js语法
    <input type="button"  value="提示窗"  οnclick="showTip()">
然后通过<script src="./文件路径.js"></script>联系js文件

js注释方法

// 单行注释
 /*
    多行注释
*/
/**
    文档注释
*/


js结果输出

<script>
function outMsg1(){
            // 控制台输出
            //    ==> 程序员的开发过程中的调试
            //    ==> 页面彩蛋
            console.log("控制台输出1"); // 日志输出
            console.error("控制台输出2"); // 错误输出
            console.warn("控制台输出3"); // 警告输出
            console.info("控制台输出4"); // 提示
        }

function outMsg2(){
            // 页面输出
            //  第一次调用时,将整个页面进行替换,连续多次的输出都会保留
            //  不换行
            document.write("页面输出1");
            document.write("页面输出2");
            document.write("页面输出3");
            // 换行输出,以html不识别的换行方式进行输出(显示为空格)
            document.writeln("页面输出4");
            document.writeln("页面输出5");
            document.writeln("页面输出6");
            // 通过定义标签的方式,向页面写入结果,浏览器一样会解析标签
            document.write("页面输出7<br>");
            document.write("页面输出8<br>");
            document.write("页面输出9<br>");
            document.write("页面输出10<br>");
        }

 function outMsg3(){
            // 信息提示弹出(从上到下依次显示,如果不操作则显示第一个)
            alert("弹窗输出1");
            // alert("弹窗输出2");
            // alert("弹窗输出3");
            // alert("弹窗输出4");
            // alert("弹窗输出5");
            // 确认弹窗
            confirm("弹出输出6")   (有确认和取消按钮)
            // 输入弹窗
            prompt("输入弹窗")      (多一个输入框)
        }

</script>

<body>
    <input type="button" value="控制台输出" onclick=" outMsg1() ">
    <hr>
    <input type="button" value="页面输出" onclick=" outMsg2() ">
    <hr>
    <input type="button" value="弹窗输出" onclick=" outMsg3() ">

</body>

js变量定义和使用

<script>
        // 变量:可变的数据存储区域
        // 1. 变量声明
        // function var 标识符
        // var 用于定义变量
        // 语法  var 变量名;

        // 定义了一个名字叫做arg的变量
        var arg;
        // 变量赋值
        arg = "数据";

        function printArg(){
            // 调用变量
            alert( arg )
        }
        function setArg(){
            // 变量的赋值
            arg = "新数据";
        }

        // 声明(定义)变量时可以直接赋值
        var msg = "msg数据";

        // 一次性声明多个变量,并进行赋值
        var a="a值" , b="b值" , c="值";

        // JS 虽然变量名是根据需要自行定义的,需要遵守规则规范
        //     *语法规范: 变量名只能用以 数字 字母 _ $ 组成,不能以数字开头 ==> 报错,程序不能运行
        //     *约定规范: 变量使用英文单词的名词,名称要有含义 ==> 为了让代码阅读更加流程

        // var +name = "张三"; //非法
        var name12 = "李四"; // 合法
        // var 33name = "王五"; // 非法

        var age = "数据1";
        var age = "数据2";
        // 区分大小写
        var Age = "数据3";

        function printAge(){
            console.log(age);
        }
        // var var = "数据"; // 变量名不能使用标识符

        // 变量名由多个单词组成时,需要从第二个单词开始首字母大写 => 驼峰命名规则
        var homeTel = "18913000000";
        

    </script>

<body>
    <input type="button" value="输出变量arg的值" onclick="printArg()">
    <br>
    <input type="button" value="对变量arg重新赋值" onclick="setArg()">
    <br>
    <input type="button" value="输出age" onclick="printAge()">
</body>


// 自动执行,直接写大括号内内容跳过onclick,页面刷新自动执行
        var name = "张三";
        console.log( name );

js变量类型

<script>
        // 变量记录和存储数据
        //      数据基于功能不同,类型也不同
        //      不同的类型可以在程序中进行不同的操作
        // 例子:要求把   张三   和   100  求和 ,  无理:求和只能发生在数字和数字之间
        
        // 简单数据类型:String 字符串
        //             Number 数值 => 特殊取值 Infinity NaN
        //             Boolean 布尔真假
        //             undefined 未定义 
        //             null 空


        var str = "字符串"; // 字符串 - 文本
        var str1 = '字符串';
        var str2 = "100"; // 字符串

        var num = 100; // 数值
        var num1 = -100;
        var float = 22.22;
        // var float2 = abc; // 报错
        // 数值类型数据 
        var num4 = Infinity; // 正无穷
        var num5 = -Infinity; // 负无穷
        var num6 = NaN; // 该变量被赋予的数据,不是一个数值数据 => not a number
        // console.log( 100/2 ); // 除非运算
        // console.log( "abc"/2 ); // 除非运算

        // 布尔值 => boolean => 是或不是
        //       有效值 true (是)
        //                   false (否)
        var flag = true; 
        var flag1 = false; 

        // undefined 值 ==> 表示变量没有赋值
        var arg1 = undefined;
        console.log(arg1);
        var arg2;
        console.log(arg2);

        // null 值 ==> 变量值为 空
        var arg3 = null;
        console.log(arg3)

        

    </script>

字符串数据的使用

<script>

        var name = "张三";

        // console.log( "我是" );
        // console.log( name );
        // console.log( "我是name" );
        console.log( "我是"+name ); // 字符串拼接

        name = "豆豆";
        console.log( "我是"+name ); // 字符串拼接

        // 字符串的运算
        //     + 关键字可以实现多个字符串的拼接
        var str1 = "-字符串1";
        var str2 = "-字符串2";
        console.log( str1 + str2 );
        var str3 = str1 + str2; // 将str1和str2变量的值进行拼接,赋值给 str3
        console.log( str3 );//输出为 -字符串1-字符串2

        var str4 = "新字符串" + str2;
        console.log( str4 );输出为 新字符串-字符串2


        var msg1 = 'JS学习时知道定义字符串变量使用的语法是: var 变量名 = "字符串值" ';
        console.log(msg1)
        // 字符串定义时,必须通过 关键字 ""  或者 '' 包裹,此时最外面的 "" '' 不是内容,是关键字
        //      成对的符号,基本都是就近匹配
        //      转移符 \ 转移符用于定义或者匹配一些特殊字符
        var msg2 = " JS学习时知道定义字符串变量使用的语法是: var 变量名 =" \"字符串变量\" ";
 //  \" 告诉js 当前的"不是关键字
        console.log(msg2)
        
        // 目前,代码定义字符串不能换行,如果一定要换行,通过 \n 定义换行文字, \n 换行符
        var msg3 = "aaaa\nbbbb";
        console.log(msg3);

        // \t 缩进符 => tab 键 => 由多个空格组成 => 空格数量是可以调整
        var msg4 = "\tabc";
        console.log(msg4)

        // var msg5 = "\"";(输出")
        var msg5 = "\\";(输出\)
        console.log(msg5)

        var msg6 = "\\\\\\\\\\";
        console.log(msg6)  (输出\\\\\)


        // var name = "张三"
        // document.write("<h1 style=\"color:red;\">" + name + "</h1>");(输出红色大号张三)
        //等效为document.write("<h1 style=\"color:red;\">张三</h1>");
    </script>

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

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

相关文章

各种数据库类型介绍

1.关系型数据库&#xff08;Relational Databases, RDBMS&#xff09; 关系型数据库是基于关系模型组织的数据库&#xff0c;其数据结构以表格的形式存在&#xff0c;表格之间通过外键等关系相互关联。它们支持复杂的SQL&#xff08;Structured Query Language&#xff09;查询…

创龙3588——debian根文件系统制作

文章目录 build.sh debian 执行流程build.sh源码流程 30-rootfs.sh源码流程 mk-rootfs-bullseys.sh源码流程 mk-sysroot.sh源码流程 mk-image.sh源码流程 post-build.sh 大致流程系统制作步骤 build.sh debian 执行流程 build.sh 源码 run_hooks() {DIR"$1"shiftf…

倾斜摄影相机在不动产确权登记和权籍调查中的应用

一、项目背景 1.1 项目背景 为贯彻落实中央、国务院关于实施乡村振兴战略、关于“扎实推进房地一体的农村集体建设用地和宅基地使用权确权登记颁证&#xff0c;完善农民闲置宅基地和闲置农房政策&#xff0c;探索宅基地所有权、资格权、使用权‘三权分置’”的要求&#xff0…

在K8S上部署OceanBase的最佳实践

在K8S上部署OceanBase的最佳实践 目录 1. 背景与选型 1.1 为什么选择OB1.2 为什么选择ob-operator实现OB on K8S 2. 部署实操 2.1 环境准备2.2 安装 ob-operator2.3 配置 OB 集群2.4 配置 OBProxy 集群2.5 Headless Service 和 CoreDNS 配置2.6 监控与运维 2.6.1 Promethues部…

【设计模式-1】软件设计模式概述

1. 软件设计模式的产生背景 “设计模式”这个术语最初并不是出现在软件设计中&#xff0c;而是被用于建筑领域的设计中。 1977 年&#xff0c;美国著名建筑大师、加利福尼亚大学伯克利分校环境结构中心主任克里斯托夫亚历山大&#xff08;Christopher Alexander&#xff09;在…

Nginx——反向代理(三/五)

目录 1.Nginx 反向代理1.1.Nginx 反向代理概述1.2.Nginx 反向代理的配置语法1.2.1.proxy_pass1.2.2.proxy_set_header1.2.3.proxy_redirect 1.3.Nginx 反向代理实战1.4.Nginx 的安全控制1.4.1.如何使用 SSL 对流量进行加密1.4.2.Nginx 添加 SSL 的支持1.4.3.Nginx 的 SSL 相关指…

win10 VS2019上libtorch库配置过程

win10 VS2019上libtorch库配置过程 0 引言1 获取libtorch2 在VS上配置使用libtorch库3 结语 0 引言 &#x1f4bb;&#x1f4bb;AI一下&#x1f4bb;&#x1f4bb;   libtorch库是一个用于深度学习的C库&#xff0c;是PyTorch的官方C前端。它提供了用于构建和训练深度学习模…

Windows 环境配置 HTTPS 服务实战

一、 环境准备 win10以上操作系统安装 Certbot申请阿里云\腾讯云域名安装 nginx 1.3以上版本 二、Certbot 安装及 SSL 证书生成 Certbot 是一个免费、开源工具&#xff0c;用于自动化在Web服务器上获取和更新SSL/TLS证书。它可以通过Let’s Encrypt服务获取免费的SSL/TLS证书…

【C++数据结构——图】最小生成树(头歌实践教学平台习题) 【合集】

目录&#x1f60b; 任务描述 相关知识 带权无向图 建立邻接矩阵 Prim算法 1. 算法基本概念 2. 算法背景与目标 3. 算法具体步骤 4. 算法结束条件与结果 测试说明 通关代码 测试结果 任务描述 本关任务&#xff1a;编写一个程序求图的最小生成树。 相关知识 为了完成…

11.认识异常

本节目标 1.异常概念与体系结构 2.异常的处理方式 3.异常的处理流程 4.自定义异常类 1.异常的概念与体系结构 1.1异常的概念 在Java中,将程序执行过程中发生的不正常行为称为异常,比如: 1.算术异常 System.out.println(10/0);//执行结果 Exception in thread "mai…

基于海思soc的智能产品开发(camera sensor的两种接口)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 对于嵌入式开发设备来说&#xff0c;除了图像显示&#xff0c;图像输入也是很重要的一部分。说到图像输入&#xff0c;就不得不提到camera。目前ca…

vulnhub靶场-potato(至获取shell)

arp-scan -l 扫描IP 使用御剑端口扫描扫描端口&#xff0c;扫到了80和7120两个端口&#xff0c;其中7120为ssh端口 使用dirb http://192.168.171.134 扫描目录 发现info.php 访问为phpinfo界面 访问192.168.171.134为一个大土豆&#xff0c;没什么用 所以我们从ssh入手 盲…

Flutter:邀请海报,Widget转图片,保存相册

记录下&#xff0c;把页面红色区域内的内容&#xff0c;转成图片后保存到相册的功能 依赖 # 生成二维码 qr_flutter: ^4.1.0 # 保存图片 image_gallery_saver_plus: ^3.0.5view import package:demo/common/index.dart; import package:ducafe_ui_core/ducafe_ui_core.dart; i…

Milvus×合邦电力:向量数据库如何提升15%电价预测精度

01. 全球能源市场化改革下的合邦电力 在全球能源转型和市场化改革的大背景下&#xff0c;电力交易市场正逐渐成为优化资源配置、提升系统效率的关键平台。电力交易通过市场化手段&#xff0c;促进了电力资源的有效分配&#xff0c;为电力行业的可持续发展提供了动力。 合邦电力…

网络层协议之IP数据包层分片随笔

1.全篇内容均在图中&#xff0c;如何分片以及分片举例细节拆解&#xff0c;见下图: 1.1分片公式&#xff1a; 上述公式中有关/8 再*8目的是为了使用8字节对齐&#xff0c;从而使的分片数据包均为8字节整数倍&#xff01; 1.2.ip层数据包分片计算&图解

TDengine + MQTT :车联网时序数据库如何高效接入

现代新能源汽车&#xff0c;作为一种内部系统极为复杂的交通工具&#xff0c;配备了大量传感器、导航设备、应用软件&#xff0c;这些传感器产生的数据都需要上报到车联网平台当中。对于这些车辆的状态数据&#xff08;如车速、发动机转速等&#xff09;、位置数据&#xff08;…

jenkins入门3 --执行一个小demo

1、新建视图 视图可以理解为是item的集合&#xff0c;这样可以将item分类。新建视频可以选择加入已有的item 2、新建item 1)输入任务名称、选择一个类型&#xff0c;常用的是第一个freestyle project 2&#xff09;进行item相关配置&#xff0c;general 设置项目名字,描述,参数…

【Vue.js】监听器功能(EventListener)的实际应用【合集】

目录 &#x1f914;在实际开发过程中&#xff0c;我遇到了一个颇为棘手的小问题 &#x1f60b;解决这个小问题 问题出现的原因剖析 解决方法阐述 问题成功解决&#xff01;​ &#x1f4d6;相关知识总结 基本概念 使用方法 实际应用场景 &#x1f914;在实际开发过程中…

【C++数据结构——线性表】顺序表的基本运算(头歌实践教学平台习题)【合集】

目录&#x1f60b; 任务描述 相关知识 一、线性表的基本概念 二、初始化线性表 三、销毁线性表 四、判定是否为空表 五、求线性表的长度 六、输出线性表 七、求线性表中某个数据元素值 八、按元素值查找 九、插入数据元素 十、删除数据元素 测试说明 通关代码 测…

【C++数据结构——查找】二分查找(头歌实践教学平台习题)【合集】

目录&#x1f60b; 任务描述 相关知识 一、根据键盘输入的一组有序数据建立顺序表 二、顺序表的输出 三、二分查找算法 测试说明 通关代码 测试结果 任务描述 本关任务&#xff1a;实现二分查找的算法。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; …