前端三剑客 —— 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/795987.shtml

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

相关文章

ubuntu-server部署hive-part2-安装hadoop

ubuntu-server部署hive-part2-安装hadoop

参照 https://blog.csdn.net/qq_41946216/article/details/134345137 操作系统版本&#xff1a;ubuntu-server-22.04.3 虚拟机&#xff1a;virtualbox7.0 安装hadoop ​​​​​​下载上传 下载地址 https://archive.apache.org/dist/hadoop/common/hadoop-3.3.4/ 以root用…
阅读更多...
simulink的硬件支持下，串口发送的模型，stm32f407的串口程序调试错误

simulink的硬件支持下，串口发送的模型，stm32f407的串口程序调试错误

串口调试助手能接收到数据&#xff0c;为何是8个数据&#xff1f;如之奈何&#xff1f; 参考文章&#xff1a; STM32CubeMxMATLAB Simulink串口输出实验_用stm32cubemx生成的串口都是输出-CSDN博客根据 该文章发送字符串 hello&#xff0c;发送数量为5&#xff0c;接收也是he…
阅读更多...
【PyQt5篇】多线程

【PyQt5篇】多线程

文章目录 &#x1f354;使用QtDesigner进行设计&#x1f6f8;实现多线程&#x1f339;效果&#x1f50e;原因 &#x1f354;使用QtDesigner进行设计 对应的代码btn.ui <?xml version"1.0" encoding"UTF-8"?> <ui version"4.0">&l…
阅读更多...
边界值设计测试用例

边界值设计测试用例

​ 边界值分析法&#xff08;Boundary Value Analysis&#xff0c;BVA&#xff09;的测试用例来自于等价类的边界&#xff0c;是等价类划分法的补充。根据边界值划分法&#xff0c;等价类分析法中的测试数据不是选取等价类中的典型值或任意值&#xff0c;而是应当选取正好等于、…
阅读更多...
C++语言学习（三）——内联函数、auto、for循环、nullptr

C++语言学习（三）——内联函数、auto、for循环、nullptr

1. 内联函数 &#xff08;1&#xff09;概念 以inline修饰的函数叫做内联函数&#xff0c;编译时C编译器会在调用内联函数的地方展开&#xff0c;没有函数调 用建立栈帧的开销&#xff0c;内联函数提升程序运行的效率。 内联函数是一种编译器指令&#xff0c;用于告诉编译器…
阅读更多...
Web3 革命：揭示区块链技术的全新应用

Web3 革命：揭示区块链技术的全新应用

随着数字化时代的不断发展&#xff0c;区块链技术作为一项颠覆性的创新正在改变着我们的世界。而在这一技术的进步中&#xff0c;Web3正逐渐崭露头角&#xff0c;为区块链技术的应用带来了全新的可能性。本文将探讨Web3革命所揭示的区块链技术全新应用&#xff0c;并展望其未来…
阅读更多...
Redis从入门到精通(四)Redis实战(一)短信登录

Redis从入门到精通(四)Redis实战(一)短信登录

文章目录 前言第4章 Redis实战4.1 短信登录4.1.1 基于session实现短信登录4.1.1.1 短信登录逻辑梳理4.1.1.2 创建测试项目4.1.1.3 实现发送短信验证码功能4.1.1.4 实现用户登录功能4.1.1.5 实现登录拦截功能4.1.1.6 session共享问题 4.1.2 基于Redis实现短信登录4.1.2.1 Key-Va…
阅读更多...
顺子日期（结果填空）

顺子日期（结果填空）

为了解决这个问题&#xff0c;我们需要遍历2022年的每一天&#xff0c;并检查日期的每一位数字以查找顺子。下面是一个Java程序&#xff0c;用于计算2022年中的顺子日期数量&#xff1a; public class Main {public static void main(String[] args) {int count 0; for (int…
阅读更多...
[StartingPoint][Tier0]Preignition

[StartingPoint][Tier0]Preignition

Task 1 Directory Brute-forcing is a technique used to check a lot of paths on a web server to find hidden pages. Which is another name for this? (i) Local File Inclusion, (ii) dir busting, (iii) hash cracking. (目录暴力破解是一种用于检查 Web 服务器上的大…
阅读更多...
leetcode代码记录（有效的字母异位词

leetcode代码记录（有效的字母异位词

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断它们是不是一组变位词&#xff08;字母异位词&#xff09;。 注意&#xff1a;若 s 和 t 中每个字符出现的次数都相同且字符顺序…
阅读更多...
【简单讲解下epoll】

【简单讲解下epoll】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…
阅读更多...
循环神经网络：揭秘长期记忆的魔法之源

循环神经网络：揭秘长期记忆的魔法之源

在人工智能和机器学习领域&#xff0c;循环神经网络&#xff08;Recurrent Neural Networks&#xff0c;简称RNN&#xff09;以其独特的架构和机制&#xff0c;在处理序列数据方面展现出了强大的能力。特别值得一提的是&#xff0c;RNN能够学习到长期的记忆&#xff0c;这使得它…
阅读更多...
ubuntu-server部署hive-part1-安装jdk

ubuntu-server部署hive-part1-安装jdk

参照 https://blog.csdn.net/qq_41946216/article/details/134345137 操作系统版本&#xff1a;ubuntu-server-22.04.3 虚拟机&#xff1a;virtualbox7.0 安装jdk 上传解压 以root用户&#xff0c;将jdk上传至/opt目录下 tar zxvf jdk-8u271-linux-x64.tar.gz 配置环境变量…
阅读更多...
网址打包微信小程序源码 wap转微信小程序 网站转小程序源码 网址转小程序开发

网址打包微信小程序源码 wap转微信小程序 网站转小程序源码 网址转小程序开发

内容目录 一、详细介绍二、效果展示2.效果图展示 三、学习资料下载 一、详细介绍 我们都知道微信小程序是无法直接打开网址的。 这个小程序源码提供了一种将网址直接打包成微信小程序的方法&#xff0c; 使得用户可以在微信小程序中直接访问这些网址内容。 这个源码没有进行加…
阅读更多...
律所如何做好内容运营，提升品牌影响力

律所如何做好内容运营，提升品牌影响力

近年来&#xff0c;随着品牌推广方式的改变&#xff0c;中国律所也开始关注内容营销&#xff0c;期待能够凭借内容营销增强影响力。今天&#xff0c;媒介盒子就从内容传播的逻辑出发&#xff0c;和大家聊聊律所如何做好内容运营&#xff0c;提升品牌影响力。 一、品牌形象管理 …
阅读更多...
蜂窝物联：智慧禽畜养殖解决方案

蜂窝物联：智慧禽畜养殖解决方案

蜂窝物联&#xff1a;智慧禽畜养殖解决方案是基于物联网技术&#xff0c;在线监测动物生长的环境信息&#xff0c;通过氨气传感器、二氧化碳传感器、湿度传感器等设备监测舍内的各项环境参数&#xff0c;自动把畜舍内的实时环境参数上传至监控软件平台&#xff0c;并联动控制风…
阅读更多...
C++11特性详解（万字）

C++11特性详解（万字）

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 统一的初始化列表 {}初始化 这种初始化方式我们建议用第一种&#xff0c;但是以后看见下面两种也不要感到疑惑&#xff0c;是可以这样初始化的。 内置类型初始化 int main() {int a 1;int b { 1 };int c{ 1 };return 0…
阅读更多...
kubectl explain资源文档命令

kubectl explain资源文档命令

学习并使用了一段时间的kubernetes&#xff0c;发现对k8s还是了解甚少&#xff0c;于是利用上下班通勤的时间又去B站看一些大佬的视频&#xff0c;又来重学巩固一遍知识&#xff0c;并做些记录。 之前在学习使用过程中未成了解过explain这个命令&#xff0c;因为自己部署的版本…
阅读更多...
Java笔试题总结

Java笔试题总结

HashSet子类依靠()方法区分重复元素。 A toString(),equals() B clone(),equals() C hashCode(),equals() D getClass(),clone() 答案:C 解析: 先调用对象的hashcode方法将对象映射为数组下标,再通过equals来判断元素内容是否相同 以下程序执行的结果是&#xff1a; class X{…
阅读更多...
Linux：权限篇

Linux：权限篇

文章目录 前言1.用户2.文件的权限管理2.1 修改文件的权限2.2 修改文件的拥有者2.3 修改文件的所属组 3.file指令4.umask指令4.目录的权限管理总结 前言 Linux权限在两个地方有所体现&#xff0c;一种是使用用户&#xff1a;分为root超级用户员与普通用户。另一个是体现在文件的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023