前端三剑客 —— JavaScript （第一节）

目录

回顾内容

        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.mzph.cn/news/797867.shtml

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

相关文章

【Threejs进阶教程-效果篇】1.Threejs文字与css2d/css3d技术

【Threejs进阶教程-效果篇】1.Threejs文字与css2d/css3d技术

Threejs文字与css2d/css3d技术 学习ThreeJS的捷径学习之前先搞清楚自己想要什么样的效果贴图文字准备一张带文字的png贴图使用sprite来进行贴图实现2D始终面朝相机的文字使用planeGeometry来贴图实现3D文字使用planeGeometry来贴图实现伪3D文字动态贴图文字html2Canvas 文字几何…
阅读更多...
操作系统复习

操作系统复习

虚拟内存 内存(memory)资源永远都是稀缺的&#xff0c;当越来越多的进程需要越来越来内存时&#xff0c;某些进程会因为得不到内存而无法运行&#xff1b; 虚拟内存是计算机系统内存管理的一种技术。它使得应用程序认为它拥有连续的可用的内存&#xff0c;而实际上&#xff0…
阅读更多...
HTML基础知识详解（下）（如果想知道html的全部基础知识点，那么只看这一篇就足够了！）

HTML基础知识详解（下）（如果想知道html的全部基础知识点，那么只看这一篇就足够了！）

前言&#xff1a;在上一篇文章中&#xff0c;我们已经学习完了超链接标签、列表标签和表格标签&#xff0c;但是我们还有一些标签没有学习&#xff0c;在这篇文章中&#xff0c;我们将学习剩余的标签。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页…
阅读更多...
JAVA并发编程（一）

JAVA并发编程（一）

JAVA并发编程&#xff08;一&#xff09; 1.1JAVA线程API 1.1.1currentThread package com.lisus2000.thread;/** * 当前线程 * */ public class Test07 extends Thread {public Test07() {System.out.println("new Test07()......" Thread.currentThread().getNa…
阅读更多...
vivado中移位寄存器的优化（二）

vivado中移位寄存器的优化（二）

移位寄存器优化用于改善移位寄存器单元&#xff08;SRLs&#xff09;与其他逻辑单元之间的负裕量路径的时序。如果存在对移位寄存器单元&#xff08;SRL16E或SRLC32E&#xff09;的时序违规&#xff0c;优化会从SRL寄存器链的开始或结束位置提取一个寄存器&#xff0c;并将其放…
阅读更多...
深入理解数据结构第三弹——二叉树（3）——二叉树的基本结构与操作

深入理解数据结构第三弹——二叉树（3）——二叉树的基本结构与操作

二叉树&#xff08;1&#xff09;&#xff1a;深入理解数据结构第一弹——二叉树&#xff08;1&#xff09;——堆-CSDN博客 二叉树&#xff08;2&#xff09;&#xff1a;深入理解数据结构第二弹——二叉树&#xff08;2&#xff09;——堆排序及其时间复杂度-CSDN博客 前言…
阅读更多...
面试：HashMap

面试：HashMap

目录 1、底层数据结构&#xff0c;1.7 与1.8有何不同? 2、为何要用红黑树&#xff0c;为何一上来不树化&#xff0c;树化阈值为何是8&#xff0c;何时会树化&#xff0c;何时会退化为链表? 3、索引如何计算? hashCode都有了&#xff0c;为何还要提供hash()方法?数组容量为…
阅读更多...
【Easy云盘 | 第十二篇】分享模块（获取分享信息、校验分享码、获取文件列表）

【Easy云盘 | 第十二篇】分享模块（获取分享信息、校验分享码、获取文件列表）

文章目录 4.4.4获取分享信息4.4.5校验分享码4.4.6获取文件列表 4.4.4获取分享信息 明天做 4.4.5校验分享码 明天做 4.4.6获取文件列表 明天做
阅读更多...
Vue3大事件项目1 登录注册

Vue3大事件项目1 登录注册

创建项目 引入 element-ui 组件库 登录&#xff1a;注册样式准备之后&#xff0c;配置校验规则&#xff08;4个条件&#xff1a;一数据、二规则&#xff09; 1. 校验相关 (1) 给当前表单绑上整个的数据对象&#xff1a;el-form > :model"ruleForm" 绑…
阅读更多...
云服务器是不是云盘？

云服务器是不是云盘？

​　　云服务器是不是云盘?云服务器和云盘是两个不同的概念&#xff0c;尽管它们都是云计算服务的一部分。云服务器是一种提供计算能力的服务&#xff0c;可以运行各种应用程序和服务&#xff0c;而云盘则是一种提供数据存储和共享服务的工具。 具体来说&#xff1a; 云服务器…
阅读更多...
【Qt】事件

【Qt】事件

目录 一、介绍 二、进入离开事件 三、鼠标事件 3.1 鼠标单击事件 3.2 鼠标释放事件 3.3 鼠标双击事件 3.4 鼠标移动事件 3.5 滚轮事件 四、按键事件 4.1 单个按键 4.2 组合按键 五、定时器 5.1 QTimerEvent类 5.2 QTimer类 5.3 获取系统日期及时间 六、窗口移…
阅读更多...
蓝桥杯刷题 前缀和与差分-[NewOJ P1819]推箱子（C++）

蓝桥杯刷题 前缀和与差分-[NewOJ P1819]推箱子（C++）

题目描述 在一个高度为H的箱子前方&#xff0c;有一个长和高为N的障碍物。 障碍物的每一列存在一个连续的缺口&#xff0c;第i列的缺口从第l各单位到第h个单位&#xff08;从底部由0开始数&#xff09;。 现在请你清理出一条高度为H的通道&#xff0c;使得箱子可以直接推出去。…
阅读更多...
深度学习理论基础（二）深度神经网络DNN

深度学习理论基础（二）深度神经网络DNN

目录 一、基础知识点Ⅰ 参数部分Ⅱ 模型部分 二、深度神经网络模型搭建1. 准备数据集2. 划分数据集3. 搭建模型4. 训练网络5. 测试网络6. 保存与导入模型 神经网络通过学习大量样本的输入与输出特征之间的关系&#xff0c;以拟合出输入与输出之间的方程&#xff0c;学习完成后&…
阅读更多...
每日一题（leetcode31）：下一个排列-思维

每日一题（leetcode31）：下一个排列-思维

思路&#xff1a;从后往前找到第一个nums[i-1]>nums[i] 然后从后往前(len-1 -->i(包含))找到第一个大于nums[i-1]的数&#xff0c;与nums[i-1]交换&#xff0c;然后对下标区间为[i,len-1]的元素进行排序。 class Solution { public:void nextPermutation(vector<in…
阅读更多...
[深度学习] 无人车环境准备

[深度学习] 无人车环境准备

1. 安装过程基本遵循以下步骤 电脑端环境配置 - OriginBot智能机器人开源套件 需要注意以下两点&#xff1a; 1> 由于深度学习需要的包和镜像体积都比较大&#xff0c;所以虚拟机硬盘大小建议120GB 2> 虚拟机的网络适配器应该设置为桥接模式&#xff0c;如果使用NAT模…
阅读更多...
vivado 使用网表插入调试探测流程

vivado 使用网表插入调试探测流程

使用网表插入调试探测流程 在 Vivado 工具中插入调试核的过程以分层方式来演示 &#xff0c; 以应对多样化的 Vivado 用户组的不同需求 &#xff1a; • 最高层是根据选定调试的一组信号线来自动创建并配置 Integrated Logic Analyzer (ILA) 核的简单向导。 • 下一层是“…
阅读更多...
File，IO流，递归详解

File，IO流，递归详解

File类 介绍 java.io.File类是Java语言提供了用来描述文件和目录(文件夹)的 构造 方法 注意&#xff1a; 构造方法中通常用的是第一个方法文件和目录可以通过File封装成对象File封装的对象仅仅是一个路径名&#xff0c;它是可以存在的&#xff0c;也可以不存在 绝对路径…
阅读更多...
【二分查找】Leetcode x 的平方根

【二分查找】Leetcode x 的平方根

题目解析 69. x 的平方根 这道题表面是没有顺序性&#xff0c;但是我们可以发现如果使用枚举策略&#xff0c;它是包含顺序性质的&#xff0c;因此我们将枚举算法改进成二分算法 算法讲解 我们让left指针指向1&#xff0c; right指针指向x 如果当前的mid计算出来的平方 &g…
阅读更多...
什么是商家转账到零钱

什么是商家转账到零钱

商家转账到零钱是什么&#xff1f; 通过商家转账到零钱这个功能&#xff0c;如果我们系统需要对用户支付费用&#xff0c;比如发放佣金、提成、退款之类的&#xff0c;可以直接转账到用户的微信零钱。 【商家转账到零钱】是【企业付款到零钱】的升级版&#xff0c;2022年5月1…
阅读更多...
怀俄明探空站数据解算PWV和Tm

怀俄明探空站数据解算PWV和Tm

1. Matlab 获取代码可关注公众号WZZHHH回复&#xff08;怀俄明探空站数据解算PWV和Tm&#xff09;&#xff0c;或者咸鱼关注&#xff1a;WZZHHH123 怀俄明探空站数据解算PWV和Tm&#xff1a; 有关 Matlab 获取代码可关注公众号WZZHHH回复&#xff08;怀俄明多线程下载&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023