点击上方头像关注我，每周上午 09:00准时推送，每月不定期赠送技术书籍。本文4685字，阅读约需12分钟Hi，大家好，我是CoCo。JavaScript作为最流行的脚本语言之一，这门语言广泛应用于Web。假如要把JS作一个比喻，我觉得她是一位强大的实干家。在Web自动化测试框架中通过JS来实现对Web元素的操作，在测试开发中是必备的前端语言。如果大家想系统全面的学习测试技术，成为资深测试，推荐大家都要学习JavaScript这门语言。它很简单，学会用只要几分钟，它又很复杂，掌握它要很多年。接下来我会陆续给大家推送JavaScript系列，感兴趣的朋友一起跟随脚步 玩转JS。一Web基础知识浏览器及内核介绍(1) 浏览器介绍浏览器就是我们平时用来上网查看网站、浏览网页的工具软件，主要功能就是向服务器发出请求，在浏览器窗口中展示网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、图片或其他的类型，资源的位置由 URL（统一资源标示符）指定。浏览器的核心在于它的内核，浏览器的内核负责取得网页的内容、整理信息，并将最终结果输出到显示器上。浏览器的内核分为：渲染引擎、JS引擎两个部分。内核的不同对于网页的语法解释不同，渲染效果也不尽相同。(2) 主流浏览器及内核浏览器最重要或者说核心的部分是Rendering Engine，大概翻译为“渲染引擎”，不过我们一般习惯称之为“浏览器内核”，负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。目前主流浏览器，是有一定市场份额且有自己独立研发内核的浏览器份额排行，看看由statcounter提供的数据，有图有真相。按照2022年排行榜，列举一些主流浏览器的内核：浏览器内核Chromewebkit/blinkSafariwebkitEdgeChromium/blinkFirefoxGreckoOperaprestoIEtrident以谷歌浏览器为例，自行查看浏览器的内核方法：打开开发者工具->Console->在Console下输入navigator，回车即可查看浏览器相关信息，如图所示，谷歌浏览器的appVersion 即显示浏览器内核。网页VS网站(1) 定义网站：包含前后端服务的可跳转的多个网页。网页：由结构、样式、行为构成的单独页面。(2) 区别及联系网站和网页是包含关系，一个网站包含多个网页(页面)。一般我们上网浏览的都是某个网站中的某个页面。网站必须由3部分组成，分别是页面前端显示，后台逻辑和数据存储。前端页面：前端需要掌握最基本的HTML编程技术，CSS样式布局处理，以及JavaScript脚本的编写。后台逻辑：后台逻辑一般指的是Web开发框架，Web开发框架每种语言都有好多种框架。比如Python语言的Web开发框架，有Django，Flask，Tornado等。数据存储：数据存储，数据存储一般适合开发框架结合在一起的，Web框架里面包含了数据存储等操作。二JavaScript介绍简介JS诞生于1995年 ,开发者希望它看起来像Java，因此取名为Javascript。两者的关系仅仅是名字相近，语法风格实际上与Self及Scheme较为接近。JS是一种解释型语言，它不需要编译。以交互式和动态的方式呈现网页，允许页面对事件做出反应，展示特殊效果。JS的出现主要是用于处理网页中的前端验证，所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。比如: 用户名的长度、密码的长度 、邮箱的格式等。组成完整的JavaScript实现包含以下3个部分：ECMAscript：描述JS的基本语法和基本对象；DOM：文档对象模型，处理网页内容的API；BOM：浏览器对象模型，与浏览器进行交互的API；作用(1) 验证用户输入的内容JS可以对用户输入的数据进行验证。例如在用户注册信息页面时，要求用户输入确认密码，以确认用户输入的密码是否准确。如果用户在“确认密码”文本框中输入的信息与“密码”文本框中输入的信息不同，将弹出相应的提示信息。(2) 实现动画效果在浏览网页时，经常会看到一些动画效果，使页面显得更加生动。使用JavaScript脚本语言也可以实现动画效果。例如，在页面中实现太阳旋转的动画效果。(3) 实现动态窗口的效果打开网页时经常会看到一些浮动的广告窗口，可以通过JavaScript脚本语言来实现如图所示的广告窗口。(4) 实现文字特效使用JavaScript脚本语言可以使文字生成多种特效，例如，使文字发生变化。(5) 实现地理定位使用JavaScript脚本语言可以实现地理定位。编写工具(1) 常用编辑器由于JS程序可以嵌入HTML文件中，因此可以使用任何一种能编辑HTML文件的工具软件作为JS的文本编辑器，如Windows中的记事本、写字板、Adobe Dreamweaver、MicrosoftFrontPag、VsCode、WebStorm、Sublime等。选择哪款JS文本编辑器，可能最终取决于你的喜好、项目类型，和扩展支持等相关条件。但无论哪种编辑器，只要能熟练使用，快速的解决问题，提高工作效率并提高生产力，就是适合你的强有力编辑工具。(2) 在Chrome浏览器运行与调试我们可以在 Chrome 浏览器上进行 JavaScript 代码的运行与调试，对于前端调试代码非常方便。①在 Chrome 浏览器中可以通过按下 F12 按钮，或者右击页面选择"检查"来开启开发者工具。②打开开发者工具后，我们可以在 Console 窗口调试 JavaScript代码，输入我们要执行的代码console.log("ITester")，按回车后执行。③我们也可以在 Chrome 浏览器中创建一个脚本来执行，开发者工具中点击 Sources 面板，选择 Snippets 选项卡，然后选择 Create new snippet 来新建一个脚本文件，在右侧窗口输入要执行的代码，保存后右击文件名，选择 "Run" 执行代码。三用JS编写HelloWorld介绍JavaScript是嵌入在HTML中来实现自己的功能的，同CSS一样，可以通过HMTL中的标签或者引用外部文件实现。JavaScript代码通过 <script> 与 </script> 标签嵌入HTML文件中，它可以在HTML文件的任何地方，但遵循至上而下执行的解释型语言特点，所以一般放置在 HTML 页面的 <body> 和 </body> 部分中，引用的外部JS文件一般写在头部部分。编写HelloWorld在Web页面中使用JavaScript有以下3种方法：在页面中直接嵌入JavaScript代码；引用外部JavaScript文件；作为特定标签的属性值使用。按照国际惯例，我们通过以下3种方式输出HelloWorld！(1) 页面中直接嵌入JS在HTML文档中，可以使用<script>…</script>标记将JavaScript脚本嵌入其中。新建一个demo.html文件，编写代码如下所示：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>"第一个JS程序"</title>
</head>
<body>
<script type="text/javascript">
alert("HelloWorld,ITester软件测试小栈！")
</script>
</body>
</html>alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。在浏览器打开页面，效果如下所示：(2) 引用外部JS文件如果脚本代码比较复杂，或是同一段代码可以被多个页面所使用，那么可以将这些脚本代码放置在一个单独的文件中（保存文件的扩展名为.js），之后在需要使用该代码的页面中链接该JavaScript文件即可。首先编写外部的JavaScript文件，命名为index.js。index.js文件的代码，如下所示。alert("Hello World,ITester软件测试小栈！")然后在demo.html页面中调用外部JavaScript文件index.js，调用代码如图所示。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>"第二个JS程序.引用外部JS文件"</title>
</head>
<body>
<script type="text/javascript" src="index.js">
</script>
</body>
</html>在浏览器打开页面，效果如下所示：(3) 作为特定标签的属性值使用①通过“javascript:”调用在HTML中，可以通过“javascript:”的方式来调用JavaScript的函数或方法。示例代码如下所示：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>"第三个JS程序.JS调用"</title>
</head>
<body>
<a href="javascript:alert('您单击了这个超链接！')">请点击我</a>
</body>
</html>在浏览器打开页面，效果如下所示：②与事件结合调用JavaScript可以支持很多事件，事件可以影响用户的操作。例如，单击鼠标左键、按下键盘或移动鼠标等。示例代码如下所示：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第四个JS程序.与事件结合使用"</title>
</head>
<body>
<input type="button" value="请单击我" onclick="alert('您单击了这个按钮！')"/>
</body>
</html>在浏览器打开页面，效果如下所示：以上就是今天的分享，如果大家想要获取今天以及后续的JS代码，可以在ITester软件测试小栈微信公众号后台回复“JS代码”，持续更新JavaScript系列。更多系列文章敬请期待我是CoCo，深漂大厂互联网民工（女），坐标深圳。5年工作经验，3年持续输出技术文。ITester软件测试小栈（ID：ITestingA）号主，Boss直聘好文社区签约作者，腾讯云社区优质创作者。专注于软件测试技术和宝藏干货分享，每周准时更新原创技术文章，每月不定期赠送技术书籍，愿我们在更高处相逢。喜欢记得星标⭐我，每周及时获得最新推送，第三方转载请注明出处。想获取更多最新干货内容快来星标 置顶 关注我
本文出自快速备案，转载时请注明出处及相应链接。
本文永久链接: https://www.175ku.com/35192.html