前端三剑客 —— JavaScript (第一节)

news2024/12/23 17:32:06

目录

回顾内容

        1.弹性布局

        2.网格布局

JavaScript

概述

发展

浏览器

什么是Javascript

JavaScript 能干什么

JavaScript需要的环境

JavaScript初体验

基本数据

JS书写方式

行内JS

页面JS

外部JS

1)创建外部JS文件

2)编写页面

对话框

警告框

确认框

输入框

关键字

变量

什么是变量

变量的作用

如何使用变量

变量的命名规范

回顾内容

        1.弹性布局

                a.开启弹性布局,display:flex

                b.设置主轴和侧轴,flex-direction:row/column

                c.设置主轴对齐方式,jusify-content:flex-start/flex-end/space-around/space-between

                d.设置侧轴对齐方式,align-item:center/start/end

                e.设置是否换行,flex-wrap:nowrap/wrap

        2.网格布局

                a.开启网络布局,display:grid

                b.设置列数,grid-template-columns

                c.设置行数,grid-tempate-rows

                d.设置单元格间距,grid-gap

                e.设置跨行,跨列,grid-row-start/grid-row-end/grid-column-start/grid-column-end

JavaScript

概述

它的出现的目的是为了解决用户的体验

1995年,上网 >>拨号上网 >>表单提交 >>为了提交用户体验,就出现javascript这个语言,它在客户端提交数据之前先验证,然后验证通过后再提交。

好处:

        1.提高了用户体验

        2.减少服务器端的压力

发展

1.在1992年,Nombas公司发明一个叫 C-- 嵌入式的脚本语言。后来更名为ScriptEase

2.在1995年,网景公司发明了一个liveScript脚本语言,由于1995年java这门语言非常火,而livescript这个脚本才出来,所以用的人不多。为了让这个语言有更多的人知道并使用,所以它和java语言进行合作,所以就叫做Javascript。

3.微软看到别的公司发明了脚本,它自己也开发一个脚本JScript

4.这样就导致三足鼎立的局面,这样就让开发者很痛苦。为了减少开发者的开发难度,出现了一个叫 ECMscript 的组织。这个组织进行了脚本规范。

浏览器

由于JavaScript这么脚本语言的运行环境就是浏览器,所以这里需要介绍一下它。

1.第一次浏览器大战在1994年,这个时候微软已经在它的操作系统中集成了IE浏览器,大家都做IE浏览器。

2.第二次浏览器大战是在2002年,发明了一个叫火狐的浏览器,它在开始支持这个规范。

3.后来又出现opera、google。

什么是Javascript

首先它是一门语言

而且它是一门脚本语言

而且它是一门弱类型的语言

它还是一门面向对象的语言

它的作用是为了提高用户的体验,对于安全性来说就不重要。

JavaScript 能干什么

1.可以进行数据校验

2.网页特效

3.数据交互

JavaScript需要的环境

1.有开发环境:操作系统、开发工具

2.有运行环境:浏览器

JavaScript初体验

我们来缩写一个非常简单的JavaScript代码,来感受一下。

说明:

1.JS程序需要有浏览器的支持

2.它需要放到网页中

3.JavaScript代码需要编写在script标签中

4.每一行后面用分号结束,从ES6(ECMScript 6规范)开始,分号可以省略

基本数据

JS书写方式

在JS中也有三种书写方式:

--- 行内JS、页面JS、外部JS

行内JS

我们在HTML标签上使用JS代码的方式叫做行内JS,它一般用于触发某种操作,例如点击事件

页面JS

页面JS就是我们前面的第一个简单入门代码,它需要在页面中通过Script标签中书写代码。

对于页面JS,我们可以书写在head标签内,也可以写在body标签内,那么,我们以后在工作中,到底是哪里好?

推荐书写在</body>标签之前。

外部JS

外部的JS书写方式是:先创建一个目录来存放JS代码,然后创建一个文件,这个文件的后缀必须是 .js 然后在这个文件中书写JS相关代码

注意:在这个文件中不要加script标签!!!!!!

1)创建外部JS文件

2)编写页面

在这个页面中,通过script标签中的src属性来指定外部的JS所在的路径。

对话框

在Javascript(后面我就统一叫JS这个简称)主要提供了三种对话框:警告框、确认框、输入框

警告框

警告框是在JS中一般用于调试程序时所使用的,主要目的是为了输出调试结果也可以用于警告信息

使用alert来弹出警告框,它里面需要给警告的内容。

确认框

确认框一般用于我们在做删除操作时为了避免用户误操作,我们通过在用户删除数据时,给他一个确认提示。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>确认框</title>

    <style>

        table {

            width: 500px;

            border-left: 1px solid #999999;

            border-top: 1px solid #999999;

            border-collapse: collapse;

        }

        th, td {

            border-right: 1px solid #999999;

            border-bottom: 1px solid #999999;

        }

        td {

            text-align: center;

        }

    </style>

</head>

<body>

<table>

    <tr>

        <th>编号</th>

        <th>姓名</th>

        <th>操作</th>

    </tr>

    <tr>

        <td>1</td>

        <td>张三</td>

        <td><a href="javascript:confirm('你确定要删除么?删除后不能恢复!')">删除</a></td>

    </tr>

    <tr>

        <td>2</td>

        <td>李四</td>

        <td><a href="javascript:confirm('你确定要删除么?删除后不能恢复!')">删除</a></td>

    </tr>

</table>

</body>

</html>

说明:在上面的JS代码中,我们对齐进行说明:

1. <a href="javascript:confirm('')"></a>在HTML中,a标签的作用有两个:一个作瞄点;另一个就是做链接跳转的。在这里 JavaScript:这个前缀,目的是让浏览器在解析时,不要使用默认的解析方式来解析a标签,而是采用JS的语法来解析这个a标签

2.对于确认框,JS中提供的是confirm,这个确认框需要提供的确认信息。在弹出的确认框中有两个按键一个是确定,一个是取消。当点击取消后不会做任何操作;当点击确定后才会执行相关的操作其实这两个按钮返回的值就是一个布尔值:true和false

输入框

在与用户交互时,我们可以来接受用户的输入信息,此时就可以使用输入框

我们可以使用JS提供的prompt这个方法来实现接受用户输入的值

这个方法它有两个方法:第一个参数表示输入提示信息,第二个参数是默认值

关键字

由于JS是一种面向对象的脚本语言,他是一种编程语言,因此它就在一些具有特殊意义的单词,这个单词就是关键字。而关键字的特点是:

1)是单词 2)所有大小写字母。

在JS中提供了以下关键字。

注意:我们后续定义变量时不能直接使用这些关键字来进行定义。

注释

在HTML中,它的注释是:     <!-- 这是HTML的注释 -->

在CSS中,它的注释是:/* 这是CSS的注释 */

在Javascript中,它的注释有以下几种是:

变量

什么是变量

所谓变量,就是它的值会发生变化。即它的值不是固定不变的

从内存结构上来看,它会在内存中开辟一片空间来存储这个值。而这个空间中的内容会根据程序的运行过程中来发生变化的。

变量的作用

之所以要使用变量,是为了更换的空中我们程序,也更好来维护我们的程序。

如何使用变量

要使用变量,我们就需要知道使用变量的语法。在JS中定义变量的语法如下:

var | let | const 变量名称 = 值

语法说明:

1.var : 它是一个关键字,这个关键字是在JS出来时就已经存在了。它有弊端:它的作用域会自动提升。在ES6中已经不推荐使用了。

2.let  : 它是在ES6中规范定义新的关键字,用于声明一个变量

3.const : 它是在ES6规范中定义新的关键字,用于声明一个常量

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>声明变量</title>

</head>

<body>

<script>

    // 声明一个名为 name 的变量

    var name = '张三'

    console.log(name)

    name = '李四'

    console.log(name)

    // 使用 let 来声明一个变量名为 age

    let age = 18

    console.log(age)

    age = 20

    console.log(age)

    age = '哈哈,我改了'

    console.log(age)

    // 使用 const 来声明一个常量 country

    const country = '中国'

    console.log(country);

    // country = '美国'  // 当声明了常量,它的值不能再改变

    let gender

    gender = ''

    console.log(gender)

</script>

</body>

</html>

说明:

在JS中,定义变量的语法为:let | const | var 变量名称 = 值,也可以先声明变量,然后再给这个变量赋值

let | const | var 变量名称

变量名称 = 值

变量的命名规范

在JS中定义变量是需要有规范:

1.变量名只能由字母、数字、下划线和$符合组成(规则)

2.数字不能开头(规则)

3.变量名不能使用关键字和保留字(规则)

4.变量名称如果是多个单词组成,第一个单词的首字母小写,后面单词的首字母大写。如果是常量,则所有字母大写,多个单词之间使用下划线连接(规范)

5.方法名称如果是一个单词都小写,如果是多个单词则第一个单词的首字母小写,后面单词的首字母大写(规范)

6.类名如果是一个单词则首字母大写,多个单词则每个单词首字母大写(规范)

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

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

相关文章

[C语言][数据结构][动态内存空间的开辟]顺序表的实现!

目录 零.必备知识 a.顺序表的底层是数组. b.数组在内存中是连续存放的. c.动态内存空间的开辟(malloc,calloc,realloc). 一.顺序表的定义与实现 1.1 顺序表的定义 1.2 顺序表的初始化 1.3 顺序表的销毁 1.4 顺序表容量的检查与调整(最关键的部分) 1.5 顺序表的尾插 1.…

【Flutter】Getx设计模式及Provider、Repository、Controller、View等

本文基于Getx 4,x 本本 1、引入 再次接触到Flutter项目&#xff0c;社区俨然很完善和活跃。pubs.dev 寻找状态管理的时候看到很熟悉的Getx时间&#xff0c;俨然发现Getx的版本已到是4.x版本&#xff0c;看到Getx的功能已经非常强大了&#xff0c;庞大的API俨然成为一种开发框架…

通俗易懂的理解 ADC(2)

理解什么是ADC 文章目录 1、通俗理解什么是ADC 2、什么是ADC 3、ADC的采样率 4、采样位数 5、采样精度 ADC实际没有这么的简单&#xff0c;深入了解需要去学各种寄存器之间如何协作&#xff0c;信号如何走通。这些概念在后面会有讲解。 1、通俗理解…

[mmu/cache]-MMU的地址翻译(Address translation)指令介绍

快速链接: 【精选】ARMv8/ARMv9架构入门到精通-[目录] &#x1f448;&#x1f448;&#x1f448; Address translation system instructions AT指令的语法格式&#xff1a; 有了上面的语法格式后&#xff0c;就非常好理解armv8的MMU提供了14条AT指令了&#xff1a; MMU的地址…

[mmu/cache]-ARMV8的cache的维护指令介绍

快速链接: 【精选】ARMv8/ARMv9架构入门到精通-[目录] &#x1f448;&#x1f448;&#x1f448; Armv8里定义的Cache的管理的操作有三种&#xff1a; 无效&#xff08;Invalidate&#xff09; 整个高速缓存或者某个高速缓存行。高速缓存上的数据会被丢弃。清除&#xff08;Cl…

#{} 和 ${}区别

1、参数是Integer类型时候没区别&#xff08;#是预编译SQL&#xff0c;$是即时SQL&#xff09; 2、当参数是String类型时&#xff0c;就会出错了 &#xff08;1&#xff09;这是$的报错信息&#xff0c;因为我们的参数admin并没有加引号所以不满足字符串条件 (2)正确的SQL &am…

FJSP:美洲狮优化算法(Puma Optimizar Algorithm ,POA)求解柔性作业车间调度问题(FJSP),提供MATLAB代码

一、柔性作业车间调度问题 柔性作业车间调度问题&#xff08;Flexible Job Shop Scheduling Problem&#xff0c;FJSP&#xff09;&#xff0c;是一种经典的组合优化问题。在FJSP问题中&#xff0c;有多个作业需要在多个机器上进行加工&#xff0c;每个作业由一系列工序组成&a…

用可视化案例讲Rust编程5.用泛型和特性实现自适配绘制和颜色设置

上一节我们讲了用泛型实现返回结果&#xff0c;这一节我们来讲讲在函数签名里面使用泛型来对输入参数进行自适配。 先看UML设计图&#xff1a; 好吧&#xff0c;看起来有点复杂&#xff0c;我们一个个来解释。 首先定义的是一个生成绘图元素需要的参数结构,并且定义个特性&am…

LeetCode-1483. 树节点的第 K 个祖先【树 深度优先搜索 广度优先搜索 设计 二分查找 动态规划】

LeetCode-1483. 树节点的第 K 个祖先【树 深度优先搜索 广度优先搜索 设计 二分查找 动态规划】 题目描述&#xff1a;解题思路一&#xff1a;暴力解法会超时&#xff01;【一级一级往上跳&#xff0c;效率太低】解题思路二&#xff1a;倍增&#xff0c;利用二进制运算&#xf…

Python可视化之pandas

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.解决坐标轴刻度负号乱码2.解决中文乱码问题3.折线图Series.plot()&DataFrame.plot()4.条形图5.箱线图6.区域面积图&#xff08;堆积折线图&#xff09;7.散点…

UNITY实战进阶-BatchRendererGroup+Jobs+Burst+RVO2+GPUAnimation 实现万人团战(一)

研究思路&#xff1a;GPUAnimation把动画放入GPU中处理&#xff0c;BatchRendererGroup进行动态批量渲染处理&#xff0c;JobsBurst进行多线程处理逻辑&#xff08;移动、攻击等&#xff09;&#xff0c;RVO2采用Jobs的寻路导航。 准备工作&#xff1a; Editor > Project S…

注意!今明两天广东等地仍有较强降雨

中央气象台监测显示 进入4月以来 我国江南、华南北部强降雨 接连而至 湖南、江西、浙江中南部 福建大部、广东中北部等地降雨量 较常年同期偏多1倍以上 上述地区部分国家观测站 日雨量突破4月历史极值 截至4月7日早晨 广东广州、惠州、清远 韶关、河源等地部分地区 …

填字母游戏【蓝桥杯】/博弈+dfs

填字母游戏 博弈dfs #include<iostream> #include<map> using namespace std; //要用map存储已经处理过的字符串不然会超时 map<string,int> m; //dfs返回的就是结果 int dfs(string s) {//剪枝if(m.find(s)!m.end()) return m[s];//找到LOL代表输了if(s.fi…

浅谈Redis和一些指令

浅浅谈一谈Redis的客户端 Redis客户端 Redis也是一个客户端/服务端结构的程序。 MySQL也是一个客户端/服务端结构的程序。 Redis的客户端也有多种形态 1.自带命令行客户端 redis-cli 2.图形化界面的客户端&#xff08;桌面程序&#xff0c;web程序&#xff09; 像这样的图形…

随机森林、AdaBoost 和 XGBoost 三者之间的主要区别

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 集成学习是一种强大的机器学习范式&#xff0c;它通过构建并结合多个学习器来提高预测性能。其中&#xff0c;随机森林、AdaBoost 和 XGBoost 是集成学习领域中著名且广泛应用的方法。尽管这些方法共享…

C++ | Leetcode C++题解之第12题整数转罗马数字

题目&#xff1a; 题解&#xff1a; const string thousands[] {"", "M", "MM", "MMM"}; const string hundreds[] {"", "C", "CC", "CCC", "CD", "D", "DC&qu…

绕过断言的LFI-Assertion101

总结 getwebshell : 发现疑似LFI的地方 → 测试..过滤 → 尝试断言绕过 → 远程加载反弹shell → getwebshell 提 权 思 路 : suid文件发现 → aria2c远程下载ssh私钥覆盖/root/.ssh → ssh公钥登录提权 准备工作 启动VPN 获取攻击机IP → 192.168.45.218 启动靶机 获取目标…

邮件服务器:Postfix

文章目录 邮件服务器的功能与工作原理电子邮件的问题Mail server与DNS 之间的关系邮件传输所需要的组件(MTA、MUA、MDA)以及相关协议用户收信时服务器端所提供的相关协议&#xff1a;MRA电子邮件的数据内容 使用Postfix与Dovecot部署邮件系统部署基础的电子邮件系统配置Postfix…

山海鲸智慧农业可视化:开启农业现代化高效管理新时代

随着科技的不断进步&#xff0c;农业现代化已成为当今社会发展的重要趋势。在这一背景下&#xff0c;山海鲸智慧农业可视化解决方案应运而生&#xff0c;为农业生产带来了革命性的变革。它通过创新的可视化技术&#xff0c;将农业生产过程中的各个环节进行高效整合&#xff0c;…

OSPF协议详解

静态缺点 1、中大型复杂网络----配置量大 2、不能实时收敛 动态-----可以实时收敛 IGP----内部网关路由协议 RIP OSPF EIGRP ISIS EGP----外部网关路由协议 BGP IGP &#xff08;选路佳 占用资源 收敛快&#xff09;----一个协议好需满足这三个 距离矢量 DV RIP…