初识 JavaScript(揭开javascript的神秘面纱)

简介: 学了这么久,你真的了解javascript吗?很多不知道的小白总是把它和java联系在一起,在这里阿牛很负责任的告诉你们,两者没有任何关系,今天阿牛就带你们一起揭开javascript的神秘面纱😜!

学了这么久,你真的了解javascript吗?很多不知道的小白总是把它和java联系在一起,在这里阿牛很负责任的告诉你们,两者没有任何关系,今天阿牛就带你们一起揭开javascript的神秘面纱😜!


🧨javascript历史

布兰登艾奇( Brendan Eich ,1961年~)。

神奇的大哥在1995年利用10天完成 JavaScript 设计。

网景公司最初命名为 LiveScript ,后来在与 Sun 合作之后将其改名为 JavaScript 。(很大部分也是为了蹭Java的热度)

🧨javascript是什么?

JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言( Script 是脚本的意思)。

脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行。

现在也可以基于 Node.js 技术进行服务器端编程。

image.png

🧨javascript的作用。

表单动态校验(密码强度检测)( JS 产生最初的目的)

网页特效。

服务端开发( Node.js )。

桌面程序( Electron )(像你们用的vscode就是基于js开发的)。

App ( Cordova )。

控制硬件﹣物联网( Ruff )。

游戏开发(cocos2d-js)。

🧨浏览器执行js简介。

浏览器分成两部分:渲染引擎和 JS 引擎。


渲染引擎:用来解析 HTML 与 CSS ,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit。

JS 引擎:也称为 JS 解释器。用来读取网页中的 JavaScript 代码,对其处理后运行,比如 chrome 浏览器的V8。

注:浏览器本身并不会执行 JS 代码,而是通过内置 JavaScript 引擎(解释器)来执行 JS 代码。 JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。

image.png

image.png

ECMAScript

ECMAScript 是由 ECMA 国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript ,但实际上后两者是 ECMAScript 语言的实现和扩展。

image.png

注: ECMAScript 规定了 JS 的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套 JS 语法工业标准。

DOM一文档对象模型

文档对象模型( Document Object Model ,简称 DOM ),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

BOM 一 浏览器对象模型

ВОМ( Browser Object Model ,简称 BOM )是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过 BOM 何以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

🧨javascript初体验。

JS有三种书写方式,分别为行内,内嵌和外部。


行内式

可以将单行或少量 JS 代码写在 HTML 标签的事件属性中(以 on 开头的属性),如: onclick 。

注意单双引号的使用:在 HTML 中我们推荐使用双引号, JS 中我们推荐使用单引号。

可读性差,在 htmI 中编写 JS 大量代码时,不方便阅读。

引号易错,引号多层嵌套匹配时,非常容易弄混。

特殊情况下使用。

可以写进三种标签里:

<button onclick="alert('这个小可爱真帅!')">我是button</button>
<input type="button" value="我是input" onclick="alert('这个小可爱真帅!')">
<a href="javascript:alert('这个小可爱真帅!')">我是a标签</a>

image.png

image.png

  • 内嵌JS
  • 可以将多行 JS 代码写到< script >标签中。
  • 内嵌 JS 是学习时常用的方式 。
<script>
        alert('我喜欢支持我的哥哥姐姐们!')
</script>

image.png

外部JS文件。

利于 HTML 页面代码结构化,把大段 JS 代码独立到 HTML 页面之外,既美观,也方便文件级别的复用。

引用外部 JS 文件的 script 标签中间不可以写代码。

适合于 JS 代码量比较大的情况。

<script src="1.js"></script>

image.png

image.png


相关文章
|
7月前
|
存储 JavaScript 前端开发
原型链:揭开JavaScript背后的神秘面纱
原型链:揭开JavaScript背后的神秘面纱
|
7月前
|
JSON 缓存 JavaScript
拷贝对象,拷贝快乐:揭开JavaScript中拷贝的神奇面纱
拷贝对象,拷贝快乐:揭开JavaScript中拷贝的神奇面纱
|
4月前
|
开发者 图形学 iOS开发
掌握Unity的跨平台部署与发布秘籍,让你的游戏作品在多个平台上大放异彩——从基础设置到高级优化,深入解析一站式游戏开发解决方案的每一个细节,带你领略高效发布流程的魅力所在
【8月更文挑战第31天】跨平台游戏开发是当今游戏产业的热点,尤其在移动设备普及的背景下更为重要。作为领先的游戏开发引擎,Unity以其卓越的跨平台支持能力脱颖而出,能够将游戏轻松部署至iOS、Android、PC、Mac、Web及游戏主机等多个平台。本文通过杂文形式探讨Unity在各平台的部署与发布策略,并提供具体实例,涵盖项目设置、性能优化、打包流程及发布前准备等关键环节,助力开发者充分利用Unity的强大功能,实现多平台游戏开发。
135 0
|
5月前
|
数据采集 算法 JavaScript
揭开JavaScript字符串搜索的秘密:indexOf、includes与KMP算法
JavaScript字符串搜索涵盖`indexOf`、`includes`及KMP算法。`indexOf`返回子字符串位置,`includes`检查是否包含子字符串。KMP是高效的搜索算法,尤其适合长模式匹配。示例展示了如何在数据采集(如网页爬虫)中使用这些方法,结合代理IP进行安全搜索。代码示例中,搜索百度新闻结果并检测是否含有特定字符串。学习这些技术能提升编程效率和性能。
141 1
揭开JavaScript字符串搜索的秘密:indexOf、includes与KMP算法
|
4月前
|
JavaScript 前端开发 UED
探秘 JavaScript 错误背后的真相——揭开异常类型的神秘面纱,让你的代码从此无懈可击!
【8月更文挑战第23天】本文深入探讨了JavaScript中常见的异常类型,包括`ReferenceError`(未定义的引用)、`TypeError`(类型错误)、`SyntaxError`(语法错误)、`RangeError`(范围错误)、`EvalError`(评估错误)以及`URIError`(URI错误),并通过示例展示了如何有效地诊断与处理这些异常。此外,还介绍了如何自定义错误类以适应特定场景的需求。掌握这些异常处理技巧对于构建稳定可靠的Web应用程序至关重要。
44 0
|
4月前
|
JavaScript 前端开发 开发者
揭开JavaScript的神秘面纱:原型链背后隐藏的继承秘密
【8月更文挑战第23天】原型链是JavaScript面向对象编程的核心特性,它使对象能继承另一个对象的属性和方法。每个对象内部都有一个[[Prototype]]属性指向其原型对象,形成链式结构。访问对象属性时,若当前对象不存在该属性,则沿原型链向上查找。
40 0
|
4月前
|
JavaScript 前端开发
揭开JavaScript变量作用域与链的神秘面纱:你的代码为何出错?数据类型转换背后的惊人秘密!
【8月更文挑战第22天】JavaScript是Web开发的核心,了解其变量作用域、作用域链及数据类型转换至关重要。作用域定义变量的可见性与生命周期,分为全局与局部;作用域链确保变量按链式顺序查找;数据类型包括原始与对象类型,可通过显式或隐式方式进行转换。这些概念直接影响代码结构与程序运行效果。通过具体示例,如变量访问示例、闭包实现计数器功能、以及动态表单验证的应用,我们能更好地掌握这些关键概念及其实践意义。
51 0
|
7月前
|
存储 缓存 前端开发
揭开 JavaScript 作用域的神秘面纱(下)
揭开 JavaScript 作用域的神秘面纱(下)
揭开 JavaScript 作用域的神秘面纱(下)
|
7月前
|
JavaScript 前端开发
揭开 JavaScript 作用域的神秘面纱(上)
揭开 JavaScript 作用域的神秘面纱(上)
揭开 JavaScript 作用域的神秘面纱(上)
|
7月前
|
前端开发 JavaScript
揭开`this`的神秘面纱:探索 JavaScript 中的上下文密钥(下)
揭开`this`的神秘面纱:探索 JavaScript 中的上下文密钥(下)