JavaScript基础一、简介

news2024/11/15 7:18:51

零、文章目录

文章地址

  • 个人博客-CSDN地址:https://blog.csdn.net/liyou123456789
  • 个人博客-GiteePages:https://bluecusliyou.gitee.io/techlearn

代码仓库地址

  • Gitee:https://gitee.com/bluecusliyou/TechLearn
  • Github:https://github.com/bluecusliyou/TechLearn

JavaScript基础一、简介

1、简介

(1)JavaScript是什么

  • 是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。

(2)JavaScript做什么

  • 网页特效 (监听用户的一些行为让网页作出对应的反馈)
  • 表单验证 (针对表单数据的合法性进行判断)
  • 数据交互 (获取后台的数据, 渲染到前端)
  • 服务端编程 (node.js)

image-20230224074536092

(3)JavaScript的组成

  • ECMAScript:规定了js基础语法核心知识。比如:变量、分支语句、循环语句、对象等等,ECMAScript是一种语言标准,而JavaScript是对ECMAScript标准的一种实现。

  • Web APIs :

  • DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作

  • BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等

image-20230224074748636

(4)ECMAScript版本

  • JavaScript历史

    • 在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。

    • 由于网景公司希望能在静态HTML页面上添加一些动态效果,于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。

    • 为什么起名叫JavaScript?原因是当时Java语言非常红火,所以网景公司希望借Java的名气来推广。

  • ECMAScript

    • 因为网景开发了JavaScript,一年后微软又模仿JavaScript开发了JScript,为了让JavaScript成为全球标准,几个公司联合ECMA(European Computer Manufacturers Association)组织定制了JavaScript语言的标准,被称为ECMAScript标准。
    • 所以简单说来就是,ECMAScript是一种语言标准,而JavaScript是网景公司对ECMAScript标准的一种实现。
    • 不过大多数时候,如果你遇到ECMAScript这个词,简单把它当成JavaScript就行了。
  • JavaScript版本

    • 由于JavaScript的标准ECMAScript在不断发展,不停的迭代新的版本,所以,讲到JavaScript的版本,实际上就是说它实现了ECMAScript标准的哪个版本。

    • 2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015。ES6是继ES5之后的一次主要改进,语言规范由ES5.1时代的245页扩充至600页。ECMAScript 6之后,Ecma国际意在更频繁地发布包含小规模增量更新的新版本,新版本将按照ECMAScript+年份的形式发布。

    • 你在写JavaScript的时候,要照顾一下老用户,不能一上来就用ES6标准写,否则,老用户的浏览器是无法运行新版本的JavaScript代码的。

(5)参考网站

  • 权威网站: MDN

  • JavaScript权威网站: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

2、初体验

(1)体验js案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验js</title>
    <style>
        .pink {
            background-color: pink;
        }
    </style>
</head>

<body>
    <button class="pink">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        let bts = document.querySelectorAll('button')
        for (let i = 0; i < bts.length; i++) {
            bts[i].addEventListener('click', function() {
                document.querySelector('.pink').className = ''
                this.className = 'pink'
            })
        }
    </script>
</body>

</html>

点击按钮,按钮变色

image-20230224075724904

(2)注释

  • 单行注释

    • 符号://

    • 作用://右边这一行的代码会被忽略

    • **快捷键:**ctrl + /

  • 块注释

    • 符号:/* */

    • **作用:*在/ 和 */ 之间的所有内容都会被忽略

    • **快捷键:**shift + alt + A

案例如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js注释</title>
</head>

<body>
    <script>
        //单行注释
        //右边这一行的代码会被忽略
        //快捷键:ctrl + /

        //块注释
        /* 
           之间的所有内容都会被忽略
           快捷键:shift + alt + A 
        */
    </script>
</body>

</html>

(3)结束符

  • 作用: 使用英文的 ; 代表语句结束
  • 实际情况: 实际开发中,可写可不写, 浏览器(JavaScript 引擎) 可以自动推断语句的结束位置
  • 现状: 在实际开发中,越来越多的人主张,书写 JavaScript 代码时省略结束符
  • 约定:为了风格统一,结束符要么每句都写,要么每句都不写(按照团队要求)

案例如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js结束符</title>
</head>

<body>
    <script>
        //要么都写分号,要么都不写
        //alert('你好');
        //alert('你好2');

        alert('你好')
        alert('你好2')
    </script>
</body>

</html>

(4)script标签位置

image-20230224075816931

  • 内部 JavaScript

    • 直接写在html文件里,写在</body>上面,用script标签包住

    • 注意事项:文件加载顺序

      • 浏览器会按照代码在文件中的顺序加载 HTML。
      • 如果先加载的JS再加载需要JS操作的HTML,那么它可能由于 HTML 尚未被加载而失效。
      • 因此,将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。
  • 外部 JavaScript

    • 代码写在以.js结尾的文件里,可以使代码更加有序,更易于复用,且没有了脚本的混合,HTML 也会更加易读。

    • **语法:**通过script标签,引入到html页面中。

    • 注意事项:script标签中间写的代码会被忽略!

  • 内联 JavaScript

    • 代码写在标签内部

    • 此处作为了解即可,但是后面vue框架会用这种模式

案例如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js书写位置</title>
</head>

<body>
    <!-- 内部js -->
    <script>
        // 页面弹出警示框
        alert('你好,js~')
    </script>

    <!-- 外部js -->
    <script src="./js/my.js">
        // 中间不要写内容
    </script>

    <!-- 内联js -->
    <button onclick="alert('你好,js')">点击我</button>
</body>

</html>

3、输入和输出

(1)语法是什么

  • 人和计算机的规则约定,我们要按照这个规则写代码,计算机才能看懂
  • 输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果给用户,这便是一次输入和输出的过程。

(2)输出语法

  • 向body内输出内容:document.write('页面打印')

    • **注意:**如果输出的内容写的是标签,也会被解析成网页元素
  • 页面弹出警告对话框:alert('弹出内容')

  • 控制台输出,程序员调试用:console.log('控制台打印')

(3)输入语法

  • **语法:**prompt(‘请输入您的姓名:’)
  • **作用:**显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字

(4)案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入和输出语法</title>
</head>

<body>

    <script>
        // 1. 文档输出内容
        document.write('我是div标签')
        document.write('<h1>我是标题</h1>')
        // 2. 弹框提示
        alert('我是弹框')
        // 3. 控制台打印输出 给 程序员
        console.log('看看对不对')
        console.log('日志')
        // 4. 输入语句
        prompt('请输入您的年龄:')
    </script>
</body>

</html>

JavaScript 代码执行顺序:

  • 按HTML文档流顺序执行JavaScript代码
  • alert() 和 prompt() 它们会跳过页面渲染先被执行(目前作为了解,后期讲解详细执行过程)

image-20230224164411916

image-20230224164252101

image-20230224164348230

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

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

相关文章

1.认识网络爬虫

1.认识网络爬虫网络爬虫爬虫的合法性HTTP协议请求与响应(重点)网络爬虫 爬虫的全名叫网络爬虫&#xff0c;简称爬虫。他还有其他的名字&#xff0c;比如网络机器人&#xff0c;网络蜘蛛等等。爬虫就好像一个探测机器&#xff0c;它的基本操作就是模拟人的行为去各个网站溜达&am…

Modbus转profinet网关连接Smart PLC与ABB变频器实现Modbus通信

本案例讲述了modbus转profinet网关&#xff0c;在系统改造中把ABB变频器接入到Smart PLC的Profinet总线上&#xff0c;PLC不用编程实现Profinet转modbus的协议互转&#xff0c;并且SmartPLC485口连接触摸屏采集数据&#xff0c;完成对变频器读写控制 网络拓展图如下图所示&…

达梦数据库运行内存参数配置学习笔记

一、设置运行中的数据库参数 SP_SET_PARA_VALUE(2,MAX_SESSIONS,500) 设置数据库运行参数&#xff0c;参数为 1 表示获取 INI 文件中配置参数的值&#xff0c;为 2 表示获取内存中配置参数的值 二、修改dm.ini数据库运行参数文件&#xff0c;重启数据库 不能动态修改dm.ini参数…

【k8s】安装dashboard以及报错处理

安装步骤&#xff1a; 点击进入dashboard 的 GitHub - kubernetes/dashboard: General-purpose web UI for Kubernetes clustershttps://github.com/kubernetes/dashboard 查看当前k8s版本对应的dashboard版本&#xff0c;点击右边releases 执行对应版本指令安装(我的k8s是v…

近自由电子近似

假设 potential 的变化是非常小的 我们可以找到一条平均线 代表的就是我们的平均值 这样我们用原来的 就可以得到一个 和平均的这条线相比&#xff0c;上下变化不大&#xff0c;这个对我们薛定谔方程求解能带来很大的便利 我们就可以得到一个平均势场 这样的话&#xff0c;…

40-Golang中的文件

Golang中的文件基本介绍文件的打开和关闭读文件操作应用实例写文件操作实例判断文件是否存在基本介绍 文件在程序中是以流的形式存在的 流&#xff1a;数据在数据源(文件)和程序(内存)之间经历的路程 输入流&#xff1a;数据从数据源到程序之间的路径 输出流&#xff1a;数据…

【C++知识点】多态

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?spm1011.2415.3001.5343 &#x1f4da;专栏地址&#xff1a;C/C知识点 &#x1f4e3;专栏定位&#xff1a;整理一下 C 相关的知识点&#xff0c;供大家学习参考~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;…

Java与Winform进行AES加解密数据传输的工具类与对应关系和示例

场景 AndroidJava中使用Aes对称加密的工具类与使用&#xff1a; AndroidJava中使用Aes对称加密的工具类与使用_霸道流氓气质的博客-CSDN博客 上面讲的Java与安卓进行数据传输时使用AES加解密的示例工具类。 如果Java需要与其他第三方平台比如Winform程序进行数据传递时也需…

一文吃透前端低代码的 “神仙生活”

今天来说说前端低代码有多幸福&#xff1f; 低代码是啥&#xff1f;顾名思义少写代码…… 这种情况下带来的幸福有&#xff1a;代码写得少&#xff0c;bug也就越少&#xff08;所谓“少做少错”&#xff09;&#xff0c;因此开发环节的两大支柱性工作“赶需求”和“修bug”就…

智能氮气柜相对于传统氮气柜的优点分析

智能氮气柜是利用氮气置换柜内湿气从而进行除湿&#xff0c;氮气经过流量计&#xff0c;进入智能氮气控制盒&#xff0c;氮气没有氧气和水分&#xff0c;与潮湿气体的比重不同&#xff0c;进入柜内排掉湿气降湿。智能氮气柜在传统氮气柜的基础上加上了智能控制系统&#xff0c;…

从传统数据库痛点看分布式数据库选型问题

本文转载自&#xff1a;OceanBase 社区 作者简介&#xff1a;蔡鹏&#xff0c;拥有十多年DBA工作经历&#xff0c;曾就职于饿了么、蚂蚁集团&#xff0c;现任货拉拉数据库部门负责人&#xff0c;负责数据库、缓存&#xff0c;消息队列的管理与平台研发工作。 引言 近年来&…

反诈老陈自曝2022年收入133万

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 反诈老陈自曝2022年收入133万&#xff0c;“缴税近40万&#xff0c;捐赠84万”&#xff0c;曾称网络上得到的收入分文不取。老陈自曝引起了广泛热议。 100万的打赏让老陈离职做直播 相较于普通人…

统计学基础:置信区间和p值知识

引言小伙伴们&#xff0c;今天我们要来聊聊置信区间和p值这两个看起来超级相关的概念。咱们先来说说置信区间&#xff0c;它是一种区间估计&#xff0c;相当于给你的样本数据画了一个“框框”&#xff0c;告诉你总体数据的真实值很可能在这个框框里。就好像你买了一个锅&#x…

CS:GO头号特训添加bot + CS:GO控制台指令大全

CS:GO头号特训添加bot CS:GO控制台指令大全 我是艾西&#xff0c;在我们玩csgo时总是会有一些自己的下想法以及想和小伙伴们一起玩的快乐&#xff0c;今天我跟大家简单的说一下头号特训 头号特训模式下单人或多人跑图的相关指令&#xff0c;帮助玩家熟悉头号特训的玩法、特殊道…

写作利器之Markdown编辑套装

简述 作为一名习惯使用Markdown写作的重度用户&#xff0c;并且经常有发布文章需求的作者来说&#xff0c;一套完善的写作发布套装就显得的很重要了。 所以就有了以下的使用体验&#xff0c;本文大概能解决的问题&#xff1a; 1.由于网络问题或编辑器原因部分网站粘贴后的mar…

Docker【基本使用】

1&#xff1a;启动Docker1.1&#xff1a;操作systemctl start docker.service1.2&#xff1a;常见问题【第一步】启动docker&#xff0c;提示启动失败&#xff0c;查询运行状态systemctl start docker.service【第二步】查询docker运行状态&#xff0c;提示不支持SELinux【第三…

大数据flink框架入门分享(起源与发展、实时与离线计算、场景、处理流程、相关概念、特性普及、入门Demo)

文章目录起源与发展flink在github上的现状实时计算VS离线计算实时计算离线计算实时计算常用的场景框架流处理流程flink电商场景下的业务图示例flink中一些重要特性有界数据和无界数据时间语义、水位线事件时间处理时间水位线flink窗口概念理想中的数据处理含有延迟数据的数据处…

基于BP神经网络的手部动作分类识别,BP神经网络详细原理

目标 背影 BP神经网络的原理 BP神经网络的定义 BP神经网络的基本结构 BP神经网络的神经元 BP神经网络的激活函数&#xff0c; BP神经网络的传递函数 数据 神经网络参数 基于BP神经网络手部动作识别的MATLAB代码 效果图 结果分析 展望 背影 随着人工智能的发展&#xff0c;智…

深入剖析 MVC 模式与三层架构

文章目录1. 前言2. MVC模式3. 三层架构4. MVC和三层架构5. 总结5.1 IDEA 小技巧1. 前言 前面我们探讨了 JSP 的使用&#xff0c;随着计算机技术的不断更新迭代&#xff0c;JSP 的技术由于存在很多的缺点&#xff0c;已经逐渐退出了历史的舞台&#xff0c;所以在学习时&#xf…

加密功能实现

文章目录1. 前言2. 密码加密1. 前言 本文 主要实现 对密码进行加密 &#xff0c;因为 使用 md5 容易被穷举 (彩虹表) 而破解 &#xff0c;使用 spring security 框架又太大了 (杀鸡用牛刀) 。   所以本文 就自己实现一个密码加密 . 2. 密码加密 这里我们通过 加盐是方式 来 对…