js代码

写在前边 某一外包公司小李，刚刚入门前端之后，老板就让他写一段前端 JS 项目代码，不料，这时之前学过Java的小李遇到了一个问题，对于经常写 Java代码的小李来说，这属于一个灵异事件。项目中的一段代码如下： 小李越想越感到纳闷，明明我在打印之前，没有声明任何的变量呀，为什么还能使用未声明的变量，从而打印出 a 的值呢，是不是我的编译器出现了问题？遇到问题的小李，越想越奇怪，就又写了一段测试代码。 按理说应该输出undefined呀，为什么会输出的结果为 10。小李越想越奇怪，到底哪里出现问题了。这时老板过来了，看了看代码，笑了笑说，你还是去先学学基础吧。就这样，小李在网上找到了小鹿的这篇教程，学完之后，才恍然大悟。 思维导图 1、什么是变量提升？ 我们首先要弄明白什么是变量提升？顾名思义，从表面上的意思去分析，代码在真正的执行之前变量就已经进行了提升声明。是的，确实是这么个意思，但是我们后边的原理部分说的这种所谓的“提升”却不是真正的提升，而是为了让开发者便于理解，才有了变量提升这以名词，话说到这，那么它是如何进行提升的呢？ 我们还是用小李的例子，第一个例子如下： 首先，程序执行，首先将声明的变量提升到最前边，a 变量就会被提升到最前边，但是并不会进行赋值操作，变量提升完毕之后，代码自上而下顺序执行。输出 a 的值，a 此时没有被赋值，所以输出 undefined，继续执行，a

常用参数： @param @argument 指定参数名和说明来描述一个函数参数 @returns 描述函数的返回值 @author 指示代码的作者 @deprecated 指示一个函数已经废弃，而且在将来的代码版本中将彻底删除。要避免使用这段代码 @see 创建一个HTML链接，指向指定类的描述 @version 指定发布版本 @requires 创建一个HTML链接，指向这个类所需的指定类 @throws @exception 描述函数可能抛出的异常的类型 {@link} 创建一个HTML链接，指向指定的类。这与@see很类似，但{@link}能嵌在注释文本中 @fileoverview 这是一个特殊的标记。如果在文件的第一个文档块中使用这个标记，则指定该文档块的余下部分将用来提供这个文件的概述 @class 提供类的有关信息，用在构造函数的文档中 @constructor 明确一个函数是某个类的构造函数 @type 指定函数的返回类型 @extends 指示一个类派生了另一个类。JSDoc通常自己就可以检测出这种信息，不过，在某些情况下则必须使用这个标记 @private 指示一个类或函数是私有的。私有类和函数不会出现在HTML文档中，除非运行JSDoc时提供了–private命令行选项 @final 指示一个值是常量值。要记住JavaScript无法真正保证一个值是常量

1.基础入门 1.1.hello world 1.1.1.JavaScript是什么? JavaScript是一门跨平台、面向对象的轻量级脚本语言，在web开发中被广泛应用 1.1.2.JavaScript和Java的关系 JavaScript 和 Java 有一些共性但是在另一些方面有着根本性区别。JavaScript语言类似 Java 但是并没有 Java 的静态类型和强类型检查特性。JavaScript 遵循了 Java 的表达式语法，命名规范以及基础流程控制，这也是 JavaScript 从 LiveScript 更名的原因 通俗的说，就是JavaScript和Java虽然名字相似，但是它们是两门不同的语言，有很大的区别，不要搞混淆了 1.1.3.为什么要学习JavaScript？它的应用场景在哪？ JavaScript使用广泛，可以说是一统浏览器江湖了，而且随着前端工程化的发展，地位在开发中有所提升，很多复杂的逻辑都需要交给前端来完成，现在的前端工程师已经不再是只会切图做页面那么简单了，JavaScript是必备技能。 如果是想从事后端开发，也必须会JavaScript,页面数据交互必定会遇到JavaScript代码，如果不会，将会成为工作瓶颈。随着最近几年nodejs的兴起，JavaScript也具有染指后端的能力，学好JavaScript前途无量。 应用场景:页面动画

引言 作为目前最流行的JavaScript引擎，V8引擎从出现的那一刻起便广泛受到人们的关注，我们知道，JavaScript可以高效地运行在浏览器和Nodejs这两大宿主环境中，也是因为背后有强大的V8引擎在为其保驾护航，甚至成就了Chrome在浏览器中的霸主地位。不得不说，V8引擎为了追求极致的性能和更好的用户体验，为我们做了太多太多，从原始的 Full-codegen 和 Crankshaft 编译器升级为 Ignition 解释器和 TurboFan 编译器的强强组合，到隐藏类，内联缓存和 HotSpot 热点代码收集等一系列强有力的优化策略，V8引擎正在努力降低整体的内存占用和提升到更高的运行性能。 本篇主要是从V8引擎的垃圾回收机制入手，讲解一下在JavaScript代码执行的整个生命周期中V8引擎是采取怎样的垃圾回收策略来减少内存占比的，当然这部分的知识并不太影响我们写代码的流程，毕竟在一般情况下我们很少会遇到浏览器端出现内存溢出而导致程序崩溃的情况，但是至少我们对这方面有一定的了解之后，能增强我们在写代码过程中对减少内存占用，避免内存泄漏的主观意识，也许能够帮助你写出更加健壮和对V8引擎更加友好的代码。本文也是笔者在查阅资料巩固复习的过程中慢慢总结和整理出来的，若文中有错误的地方，还请指正。 1、为何需要垃圾回收 我们知道

使用这种验证方法的目的：证明当前的用户不是机器人~防止恶意操作。 实现思路： 　　1、获取silde滑块（获取元素） 　　2、为元素注册事件———鼠标点击事件（onmousedown）鼠标点击之后获得当前鼠标的X坐标。 　　3、如何获取到鼠标的x坐标——使用clientX事件（当事件被触发时，鼠标指针的水平坐标）。 　　4、鼠标移动事件发生后根据从最开始点击的X值到移动后的X值之差，作为滑块移动的差值———— 鼠标移动事件 （onmousemove）； 　　5、获取鼠标移动之后的X坐标 　　6、获得初始X坐标和移动后X值 　　7、该变 left的值 　　8、绿色背景跟着小滑块走 　　9、鼠标抬起清除鼠标移动事件。 注意 ：哪怕鼠标移动的时候超出了最外面的方块区域，滑块也要可以移动。所以不能只在滑块上设置移动事件，需要在文档document上设置移动事件。 主要用到的事件： 1、鼠标点击事件onmousedown； 2、鼠标移动事件onmousemove； 3、获取鼠标指针X坐标 clientX； 4、鼠标按键被松开 onmouseup;（有点类似与 click点击） 注意： 1、作用域——— 一个函数拥有一个作用域 （局部作用域） 2、怎样才能实现鼠标移动的时候使滑块也移动：改变滑块的left值。 3、想要实现滑块跟随鼠标移动，就要获得鼠标移动的x坐标。 实现代码： 1 <

2019年12月5日初稿 ，目前webpack已经更新到v4.41.2，本文正是基于该版本，在windows8.1操作系统下进行的demo编译，适用于想入门webpack的前端开发人员。 webpack官方使用指南（ 参考1 ）： https://www.webpackjs.com/guides/getting-started/ 本文参考（ 参考2 ）： https://segmentfault.com/a/1190000006178770?utm_source=tag-newest#comment-area 一、使用webpack之前的准备工作 在开始之前，请确保安装了 node.js的最新版本。这里给大家推荐 https://www.cnblogs.com/zhouyu2017/p/6485265.html ，大家可以通过这篇文章来安装node.js并进行环境变量配置。 二、开始使用webpack 1、创建练习文件夹，本人将该文件夹命名为webpackTest(根目录)，并通过CMD进入该文件夹下 2、创建package.json文件及安装webpack a、在根目录下创建package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init -y命令可以自动创建这个package

a能拿b，b能拿到c，c能拿到d，实现a拿到d的东西。 function a() { b(function (data) { console.log(data); }); } function b(cb) { c(function (data) { cb(data); }); } function c(cb) { d(function (data) { cb(data); }); } function d(cb) { setTimeout(() => { let data = "彩虹"; cb(data); }, 3000); } 在ES7中更有趣的代码如下： async function D() { return await new Promise((resolve) => { setTimeout(() => { let data = "彩虹"; resolve(data); }, 3000); }) } // await只能使用在异步函数中，用来等待一个promise操作的promiseValue async function C() { return await D(); } async function A() { console.log(await C()); } A(); 来源： https://www.cnblogs.com/weijiangZ/p/12024336

基本使用 写在Script 标签里 引入外部js文件：<script src=" "></script> console.log(" ") 方法用于在控制台输出信息 注意事项 严格区大小写 每一行完整语句后面加分号 变量名不能使用关键字和保留字 代码要缩进，保持可读性 修改元素内容 获取元素 通过id获取元素：document.getElementById(“”); 通过class名字获取元素：document.getElementsByClassName(“”); 通过标签名获取元素：document.getElementsByTagName(“”); 通过 name的属性获取元素，一般用于input：document.getElementsByName(“”); 通过CSS选择器获取一个：document.querySelector (“”); 通过CSS选择器获取所有：document.querySelectorAll(“”); 修改元素内容 var 是 js 定义变量的关键字：var content = document.get.... innerHTML 和 innerText 可以修改/获取（HTML内容和文本内容）：content.innerHTML="<h1>标题</h1>" 简单事件 单击事件：onclick 双击事件：ondblclick 鼠标划入

JavaScript """ JavaScript（JS）是脚本编程语言，JS语言开发的文件是以.js为后缀，通过在html文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑（js语言代码也可以直接写在html文件中），采用的ECMAScript语法，属于编程语言。 ECMAScript目前普遍使用的存在ES5与ES6两个版本，我们也会基于这两个版本来介绍JS这么应用的学习 ES5:基于对象语言(没有class)，通常学的多。 ES6:面向对象语言，有新特性，新框架。 """ """ 学习方向：从JS代码书写位置、JS基础语法、JS选择器和JS页面操作四部分进行学习 学习目的：完成页面标签与用户的人机交互及前台数据处理的业务逻辑 """ 脚本语言 脚本语言：通过这门语言，可以去写一些代码片段，这些代码片段可以嵌入到其他语言中，只要给予一个执行的入口，就可以执行代码。如c，java，这些语言必须要有明确的入口，也就是main函数，从main函数入，从main函数出。python则处处是入口处处是出口，没有所谓的main函数，这就是脚本语言的特点，也就是说只要给一个执行的入口，我就能够让代码跑起来。 脚本：像python可以直接用解释器运行，不管文件中有没有main函数，甚至是空的，也可以跑起来，只是没结果，也就是说可以通过代码块来执行

属性操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性操作</title> </head> <body> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2808976292,2978436552&fm=26&gp=0.jpg" alt=""> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> let new_src = 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1751982463,1459940288&fm=26&gp=0.jpg' $('img').click(function () { // js // this.getAttribute() | this.setAttribute() // console.log(this.getAttribute('src')); // 获取属性值 // this.setAttribute('src', new_src); // 设置属性值 // jq // $(this).attr() // console.log($