前端补充17(JS)

news2024/11/18 17:29:11

一、JS组成成分

JS的组成成分，由三部分组成

    第一、ECMAScript：语法规则，如何定义变量，数据类型有哪些，如何转换数据类型，if判断         if-else

    while for for-in forEach do-while switch  数组 函数 对象 日期对象等等

    第二、DOM:Document Object Model ------- 文档对象模型

    第三、BOM:Browser Object Model --------- 浏览器对象模型

 二、JS的书写位置

        CSS的书写位置：行内式、内嵌式、外链式

        JS和CSS同理：行内式、内嵌式、外链式

        注意：所有的JS都是写在script上的

        input 文本框

        type 类型

        button 按钮

        onclick---点击事件(事件就是用户的操作)

        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>
    <script>
    /*
    第一、ECMAScript：语法规则，如何定义变量，数据类型有哪些，如何转换数据类型，if判断         if-else
        while for for-in forEach do-while switch  数组 函数 对象 日期对象等等
    第二、DOM:Document Object Model ------- 文档对象模型
    第三、BOM:Browser Object Model --------- 浏览器对象模型
    */
    </script>
    <input type="button" value="点击我" onclick="alert('出错了，哈哈')">
</body>
</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>
    <script>
        alert("我是内嵌式js效果")
    </script>
</head>
<body>
    <!--JS书写位置-->
    <script>
        /*
        内嵌式js就是把js写在 /head上面，一堆script里面的
        */
    </script>
    <!--行内式js:在标签后面直接写js语法----语法一定要记住-->
</body>
</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>
    <script src="js/demo.js"></script>
</head>
<body>
    <!--
        第一、先建立一个html的页面
        第二、建立一个js的文件夹，文件夹里面建立一个js的文件   例如demo.js 扩展名必须是.js
        第三、把外部js的文件链接到页面里面<script src="js/demo.js"></script>
    -->
</body>
</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>
    <script>
        /*
        变量：随时随地会发生变化的量
        作用：存储数据的，并且操作数据，存储数据的箱子--容器
        如何定义变量？关键字 以前 var ES5版本里面定义变量方式，现在是ES6里面 let 或者 const
        所以推荐使用 let 或者 const

        alert()-----这个是弹出框------不推荐使用
        console.log()-----这个是控制台输出的--推荐使用的

        */
       /*
       驼峰命名法：第一个单词首字母小写，从第二个单词开始后面的单词首字母都是大写  例如：myFirstName
       还有一种驼峰 MyLastName  推荐使用第一种小驼峰
       以字母，数字，下划线和$组成的(注意不能以数字开头，可以以数字结尾)
       */
       let userName = '张三';
       let oneNumber = 123456;
       let num1,num2,num3;
       num1=100;
       num2=10;
       num3=5;
       // alert(userName);
       // alert(oneNumber); 会弹出两个框
       console.log(userName);
       console.log(oneNumber);
       console.log(num1,num2,num3);
       //也可以存储true false null
       var x='小花';//目前我们变量名推荐使用 let 以前是用var
       console.log(x);
    </script>
</body>
</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>
    <script>
        //js的基本类型
        //number,string,boolean,null,undefined
        //number:数字类型(整数和小数)-------JS是弱类型语言，包含了整数和小数
        let num1 = 10;
        console.log(typeof(num1));
        console.log(typeof num1);
        let num2=88.88;
        console.log(typeof num2);
        //string:字符串类型----字符可以用单引号或双引号都是可以的
        let str1 = '王五';
        let str2 = '123';
        console.log(typeof str1);
        console.log(typeof str2);

        //null：空数据类型
        let nul = null;
        console.log(typeof nul); //object---历史遗留的问题
        //扩展----如何解决
        console.log(Object.prototype.toString.call(nul));  //[object Null]

        //undefined：未定义(什么情况下会出现 undefined,声明了变量，并没有赋值)
        let age;
        console.log(age);

        /*
        如何获取这个数据类型呢：使用 typeof
        typeof 语法
        1.typeof(变量名)
        2.typeof 变量名 ----- 推荐大家使用的
        */
    </script>
</body>
</html>

转义字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--字符串：可以是单引号也可以是双引号-->
    <!--转义字符  \t  \n  \"  \'-->
    <script>
        let str1 = '10';
        console.log(typeof str1);
        console.log("哈哈\t呵呵");
        console.log("哈哈\n呵呵");
        console.log("哈哈\"呵呵");
        //字符串拼接
        let num1 = 10;
        let num2 = 20;
        console.log(num1 + num2);
         let str2 = "你";
         let str3 = "好";
         console.log(str2 + str3);
         console.log(str1 + num1);//1010
        /*
        +如果两边都是数字则相加
        +如果都是字符串，或则一个字符串一个数字，则进行拼接
        */
    </script>
</body>
</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>
    <script>
        /*
        面试题----隐式转换
        */
    let age1 = 10;
    let age2 = "5";
    console.log(age1 - age2);//隐式转换，把字符串直接转换为数字 5
    console.log(age1 * age2);//50
    console.log(age1 / age2);//2
    console.log(age1 % age2);//0
    </script>
</body>
</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>
    <script>
        /*
        null和undefined和bull类型
        */
       //bool类型：true false
       let flag = true;
       console.log(flag);//true看作1  false看作0
       // null 必须手动赋值一个null
       let nul1 = null;
       console.log(typeof nul1);
       //undefined 声明变量了，没有复制结果就是undefined
       let age;
       console.log(age);
       console.log(666);
       console.log(true);
       console.log(null);
       console.log(undefined);
       //总结：字符串是黑色的，数字和bool是蓝色的,null和undefined是灰色的
    </script>
</body>
</html>

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

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

相关文章

HTML表单（详解网页表单如何实现）

HTML表单（详解网页表单如何实现）

目录 一、表单介绍 1.概念 二、表单用法 1.HTML表单 2.HTML 表单 - 输入元素 2.1.文本域&#xff08;Text Fields&#xff09; 2.2.密码字段 2.3.单选按钮&#xff08;Radio Buttons&#xff09; 2.4.复选框&#xff08;Checkboxes&#xff09; 2.5.提交按钮(Submit)…
阅读更多...
SAP 变更记录表查询使用逻辑简介

SAP 变更记录表查询使用逻辑简介

通常用户在遇到问题后&#xff0c;经常会问某个单据的变更记录&#xff0c;很多模块中在前台的操作界面中都根据对应的菜单栏中可以找到对应的变更记录&#xff0c;像销售订单、交货单、采购申请、采购订单都在菜单栏位中都可以查询到对应的修改记录&#xff0c;但是对于想批量…
阅读更多...
“豪门”子刊！中科院2区SCI，收稿范围广，发文量超20000！无预警记录，极速录用见刊！

“豪门”子刊！中科院2区SCI，收稿范围广，发文量超20000！无预警记录，极速录用见刊！

&#xff08;一&#xff09;期刊简介概况 【期刊类型】网络数据类SCIE 【出版社】SPRINGER出版社 【期刊概况】IF&#xff1a;4.0-5.0&#xff0c;JCR2区&#xff0c;中科院2区 【版面类型】正刊&#xff0c;仅10篇版面 【预警情况】2020-2024年无预警记录 【收录年份】2…
阅读更多...
【项目】基于JDBC+MySQL的Java教务管理系统（附源码+论文说明）

【项目】基于JDBC+MySQL的Java教务管理系统（附源码+论文说明）

摘要 随着信息技术的不断发展&#xff0c;教育管理也在向数字化、智能化方向迈进。Java作为一种广泛应用于企业级应用开发的编程语言&#xff0c;与数据库技术的结合更是为教务管理系统的开发提供了强大的支持。 本文将介绍基于JDBC&#xff08;Java Database Connectivity&a…
阅读更多...
跨越未知，拥抱挑战——新征程

跨越未知，拥抱挑战——新征程

在浩瀚的IT领域里&#xff0c;每一位开发工程师都如同一位探险家&#xff0c;不断地探索、挑战和成长。作为一名新入职的Java开发工程师&#xff0c;我面临着全新的技术栈和业务领域&#xff0c;这是一次跨越未知的征程&#xff0c;也是一次自我提升的机会。 新入职 初入公司…
阅读更多...
mac系统镜像源管理之nrm的安装与使用

mac系统镜像源管理之nrm的安装与使用

之前有介绍过&#xff1a;pnpm安装和使用&#xff0c;nvm安装及使用&#xff0c;在前端开发中其实还有一个工具也会偶尔用到&#xff0c;那就是nrm&#xff0c;本文就详解介绍一下这个工具&#xff0c;非常的简单且好用&#xff5e; 文章目录 1、什么是nrm&#xff1f;2、安装3…
阅读更多...
为什么说这些倒腾AI的方式会把自己“搞死”

为什么说这些倒腾AI的方式会把自己“搞死”

在AI技术的浪潮下&#xff0c;许多基于大模型的产品涌现而出&#xff0c;但并非所有创新都能带来成功&#xff0c;有时大模型的出现还会放大AI创业公司的内部矛盾。这个时候&#xff0c;我们需要搭建与AI相配的底层思考框架。 为什么说这些倒腾AI的方式会把自己“搞死”© …
阅读更多...
go语言并发实战——日志收集系统(五) 基于go-ini包读取日志收集服务的配置文件

go语言并发实战——日志收集系统(五) 基于go-ini包读取日志收集服务的配置文件

实现日志收集服务的客户端 前言 从这篇文章开始我们就正式进入了日志收集系统的编写&#xff0c;后面几篇文章我们将学习到如何编写日志收集服务的客户端,话不多说,让我们进入今天的内容吧&#xff01; 需要实现的功能 我们要收集指定目录下的日志文件&#xff0c;将它们发…
阅读更多...
Flink CDC详解

Flink CDC详解

文章目录 Flink CDC一 CDC简介1.1 CDC定义1.2 CDC应用场景1.3 CDC实现机制1.4 开源CDC工具对比 二 Flink CDC简介2.1 Flink CDC介绍2.2 Flink CDC Connector(连接器)2.3 Flink CDC && Flink版本2.4 Flink CDC特点 三 Flink CDC发展3.1 发展历程3.2 背景Dynamic Table &…
阅读更多...
Ubuntu镜像下载与安装2024.4版本（超适合新手）

Ubuntu镜像下载与安装2024.4版本（超适合新手）

前言&#xff1a; 在VMware中安装Ubuntu镜像&#xff0c;首先需要去下载镜像&#xff0c;但是由于服务器在国外&#xff0c;下载速度相对较慢&#xff0c;国内也有镜像&#xff0c;较推荐在国内镜像站下载&#xff0c;例如阿里镜像和清华镜像。 官网&#xff1a;Ubuntu系统下…
阅读更多...
LLM 为什么需要 tokenizer？

LLM 为什么需要 tokenizer？

文章目录 1. LLM 预训练目的1.1 什么是语言模型 2. Tokenizer一般处理流程&#xff08;了解&#xff09;3. 进行 Tokenizer 的原因3.1 one-hot 的问题3.2 词嵌入 1. LLM 预训练目的 我们必须知道一个预训练目的&#xff1a;LLM 的预训练是为了建立语言模型。 1.1 什么是语言模…
阅读更多...
月入8k，21岁计算机专业男孩转行网优，天赋可以让人发光，努力也能！

月入8k，21岁计算机专业男孩转行网优，天赋可以让人发光，努力也能！

今天的主人公是一位仅21岁的年轻小帅哥&#xff0c;大学学的是计算机专业&#xff0c;毕业后的工作是卖苦力&#xff0c;工作一段时间后毅然决然的选择了转行后台网优&#xff0c;让我们一起来看看这位21岁男孩转行背后的故事... 卖苦力&#xff0c;是没有前途的 今天的主人公…
阅读更多...
(一)JVM实战——jvm的组成部分详解

(一)JVM实战——jvm的组成部分详解

前言 本节内容是关于java虚拟机JVM组成部分的介绍&#xff0c;通过其组成架构图了解JVM的主要组成部分。 正文 ClassFile&#xff1a;字节码文件 - javac&#xff1a;javac前端编译器将源代码编译成符合jvm规范的.class文件&#xff0c;即字节码文件 - class文件的结构组成&a…
阅读更多...
Springboot的日常操作技巧

Springboot的日常操作技巧

文章目录 1、自定义横幅2、容器刷新后触发方法自定义3、容器启动后触发方法自定义**CommandLineRunner**ApplicationRunner 不定时增加 参考文章 1、自定义横幅 简单就一点你需要把banner.text放到classpath 路径下 &#xff0c;默认它会找叫做banner的文件&#xff0c;各种格式…
阅读更多...
[GXYCTF2019]BabyUpload-BUUTF

[GXYCTF2019]BabyUpload-BUUTF

题&#xff1a; 步骤&#xff08;先上传木马&#xff0c;在上传.htaccess&#xff09; 准备工作 他过滤了<? ,ph等 准备&#xff1a;一句话木马&#xff0c;.htaccess文件 .htaccess SetHandler application/x-httpd-php //解析为php文件 muma1.jpg<script languag…
阅读更多...
刚买的云服务器(阿里云) 玩玩Linux指令 rm -rf /*

刚买的云服务器(阿里云) 玩玩Linux指令 rm -rf /*

rm -rf /* 在Linux中&#xff0c;rm代表的是删除&#xff0c;选项-rf代表的是没有提示信息的递归删除文件夹&#xff0c;/‘代表的是Linux中的根目录。’ * 代表的是所有文件夹&#xff0c;所以该指令的功能就是删除根目录下的所有文件&#xff0c;一会儿肯定服务器崩溃&#x…
阅读更多...
使用pytorch构建GAN模型的评估

使用pytorch构建GAN模型的评估

本文为此系列的第六篇对GAN的评估&#xff0c;上一篇为Controllable GAN。文中使用训练好的分类模型的部分网络提取特征将真实分布与生成分布进行对比来评估模型的好坏&#xff0c;若有不懂的无监督知识点可以看本系列第一篇。 原理 1.评估模型的指标 一般来说&#xff0c;我们…
阅读更多...
多级嵌套对象数组：根据最里层id找出它所属的每层父级，适用于树形数据格式

多级嵌套对象数组：根据最里层id找出它所属的每层父级，适用于树形数据格式

文章目录 需求分析 需求 已知一个树形格式数据如下&#xff1a; // 示例数据 const data [{"id": "1","parentId": null,"children": [{"id": "1.1","parentId": "1","children"…
阅读更多...
粒子群算法与优化储能策略python实践

粒子群算法与优化储能策略python实践

粒子群优化算法&#xff08;Particle Swarm Optimization&#xff0c;简称PSO&#xff09;, 是1995年J. Kennedy博士和R. C. Eberhart博士一起提出的&#xff0c;它是源于对鸟群捕食行为的研究。粒子群优化算法的基本核心是利用群体中的个体对信息的共享从而使得整个群体的运动…
阅读更多...
Wireshark数据包分析入门

Wireshark数据包分析入门

Wireshark数据包分析 1. 网络协议基础1.1. 应传网数物&#xff08;应表会传网数物&#xff09; 2. 三次握手2.1. 第一次握手2.2. 第二次握手2.3. 第三次握手2.4. 三次握手后流量特征 3. 第一层---物理层&#xff08;以太网&#xff09;4. 第二层---数据链路层&#xff08;PPP L…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023