JavaScript编程用法——JavaScript运行环境
文章目录
- 文件版本说明
- JavaScript运行环境
- 镶嵌网页
- JavaScript文件脚本:.js
- JavaScript打印
- 打印方式
- 打印级别
- 编写代码IDE平台:记事本 + 浏览器
- 调试代码
- 编写代码IDE平台:Visual Studio Code + Node.js
- 主程序
- 调试代码
- 编写代码IDE平台:Linux
- 中文支持
文件版本说明
版本 | 发布日期 | 修订章节 | 作者 |
---|---|---|---|
0.1 | 2018.05.01 | 撰写草稿 | 钟鑫 |
0.2 | 2018.05.05 | 添加js变量定义 | 钟鑫 |
0.3 | 2018.05.05 | 添加js编译环境 | 钟鑫 |
0.4 | 2018.05.11 | 添加js函数 | 钟鑫 |
0.5 | 2018.05.14 | 添加解构赋值 | 钟鑫 |
0.6 | 2018.05.19 | 添加函数定义以及类定义 | 钟鑫 |
0.7 | 2018.05.27 | 添加类的定义 | 钟鑫 |
0.8 | 2018.06.09 | 添加时间定义 | 钟鑫 |
JavaScript运行环境
镶嵌网页
在一个html中镶嵌JavaScript,镶嵌标签
JsTest.html
<html><head><title> ZX test title </title><script>function js_test_html(){ alert('alert ZX test');console.log('console ZX test');document.write('document ZX test\n');} js_test_html();</script></head><body></body>
</html>
显示效果如下图所示。
JavaScript文件脚本:.js
将js代码写入一个js文件中,然后通过html调用这个脚本。
function js_main(){
alert('main alert ZX test');console.log('main console ZX test');document.write('main document ZX test');
} js_main();
将js文件镶嵌到html文件中
<html><head><title> ZX test title </title><script src="./Jsmain.js"> </script></head><body></body>
</html>
显示效果如下图所示。
JavaScript打印
JavaScript的调试打印在浏览器中按F12调出,代码中用console对象实现。
打印方式
JavaScript的调试打印有多中方式,包含可以直接打印数字、数组、字符串甚至结构体和类。
源码
function js_console_test(){ var strtest = "string";var chartest = 'A';var istest = 3;var fpai = 3.14159;var arraytest = ["zx",6.626E-34,'B',8];var stTest = {siindex: 1,strname: "ZX Test",sinum: 2.71828,functest: function stfunc(){ return true;}};console.log(strtest);console.log(chartest);console.log(istest);console.log(fpai);console.log(arraytest);console.log(stTest);
}
执行结果
打印级别
console对象对调试打印有着打印级别,对应不同的调试环境。
源码
function js_console_level(){ console.log("This is log level.");console.debug("This is debug level.");console.info("This is info level.");console.warn("This is warn level.");console.error("This is error level.");
}
执行结果
点击右边的定位会跳转到代码调试选项
编写代码IDE平台:记事本 + 浏览器
只要安装了浏览器,通过记事本就可以编写js代码。但要使js运行起来,就必须将js镶嵌到html文件中
浏览器打开html文件,就可以执行js脚本。
调试代码
在浏览器按F12调出调试环境,可以在源码上打上断点,单步调试,查看输出。如下图所示。
edge上调试代码,如下图所示
编写代码IDE平台:Visual Studio Code + Node.js
用Visual Studio Code轻便,结合Node.js开发可以不用调用浏览器去调试代码。
与浏览器不同的是,js文件可以单独运行而不需嵌入html中,通过Node.js加载运行。
Visual Studio Code下载:https://code.visualstudio.com/
Node.js下载:https://nodejs.org/en/
安装完之后打开指定文件夹,如下图所示
编码格式选择LF,与linux保持一致,如下图所示
主程序
在安装好Node.js之后,配置Visual Studio Code的环境,就可以调试js的代码。如下图所示。
调试代码
控制调试代码的配置是由文件launch.json进行控制的,可以在添加配置选项中配置调试选项。launch.json文件放置在工程目录的.vscode文件夹下,如下图所示。
编辑界面可以打断点进行调试,在调试控制台可以看到输出信息。变量栏可以时刻观察js变量。如下图所示。
编写代码IDE平台:Linux
在linux中,支持JavaScript的调试,需要安装nodejs
sudo apt-get install nodejs-legacy nodejs$ node -v
v4.2.6
执行JavaScript脚本
$ node Jsmain.js
string
A
3
3.14159
[ 'zx', 6.626e-34, 'B', 8 ]
{ siindex: 1,strname: 'ZX Test',sinum: 2.71828,functest: [Function: stfunc] }
中文支持
js文件保存的形式是utf-8模式保存,不然会出现乱码,如下图所示。
JavaScript编程用法——JavaScript运行环境相关推荐
- web前端知识集合——javascript基础篇之javascript背景历史和运行环境(一)
前言:温故而知新,可以为长也!万变不离其宗,无论是现在web前端技术衍生出多么优秀,好用的框架,插件,都离不开这门语言的基础知识.掌握各种优秀的框架,插件,只是"善用工具的人",深 ...
- 如何用JavaScript判断前端应用运行环境(移动平台还是桌面环境)
我们部署在某些云平台或者Web服务器上的前端应用,既可以用PC端浏览器访问,也可以用手机上的浏览器访问. 在前端应用里,有时候我们需要根据运行环境的不同做出对应处理.比如下面这段逻辑,如果判断出应用当 ...
- javascript判断浏览器当前运行环境
认识浏览器 五大国际浏览器品牌:按照全球使用率排序 Google Chrome:Windows.MacOS.Linux.Android.iOS Apple Safari:MacOS.iOS Mozil ...
- linux配置js运行环境,解决JavaScript运行环境
javascript栏目介绍其运行环境,才有好的开始. 相关免费学习推荐:javascript(视频) 文章目录文件版本说明 JavaScript运行环境 镶嵌网页 JavaScript文件脚本:.j ...
- JavaScript 编程精解 中文第三版 零、前言
零.前言 原文:Introduction 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了<JavaScript 编程精解(第 2 版)> We think ...
- JavaScript编程基础(一)
JavaScript 编程基础 JavaScript 是Web上的一种功能强大的编程语言,用于开发交互式的Web页面.它不需要编译,而是直接嵌入在HTML页面中,把静态页面转变成支持用户交互并响应事件 ...
- 如何让服务器运行js,服务器端JavaScript运行环境Node.js的依赖性管理
众所周知,Node.js是一个基于Chrome V8引擎的服务器端JavaScript运行环境.它采用了一种事件驱动的.非阻塞式的I/O模式,运行起来既轻量级又高效.诚然,我们可以使用单个js文件,来 ...
- 初识NodeJS,一个基于GoogleV8引擎的Javascript运行环境
一.NodeJS简介 思考 首先我们来思考一个问题:我们都知道几乎所有现代主流浏览器都全面支持了ECMAScript 5.1版标准,而JavaScript的标准是ECMAScript.那么我们就容易认 ...
- 【Android】手机安装Termux运行nodejs学习Javascript编程入门
Termux 是运行在Android手机上的一个 Linux 终端模拟器,干什么都要输入命令执行,不像 Windows 操作系统桌面用鼠标点点点,这里主要介绍用它来学习Javascript编程入门,当 ...
- 下载nodejs的mysql安装包下载_nodejs安装包下载|nodejs(javascript运行环境) v5.3.0 最新稳定版 - 软件下载 - 绿茶软件园|33LC.com...
nodejs(javascript运行环境)是款运行在服务器端的javascript.nodejs(javascript运行环境)使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效,Node ...
最新文章
- 9.67最不下降子序列
- Spring Boot不允许加载iframe问题解决
- 在mac上配置cocos2d-x开发环境
- ubuntu 命令卡住_如何在Ubuntu系统中重置root密码
- hadoop datanode启动失败
- 解决Python中字典出现“TypeError: 'dict_keys' object does not support indexing”错误
- 手机横版动作类游戏的开发思路
- Python OrderedDict
- 在word表格里打勾和打叉
- 自然语言处理怎么最快入门
- java技术面试一定要跳出来的坑,可曾听闻!
- 电脑通过 adb 控制安卓手机(1台或多台)自动加微信
- win10自动修复重启失败,无法进入桌面,解决办法
- 微信小程序连接华为云ModelArts的方法以及一些小坑(一)
- http的安全方法和幂等性
- Leetcode 130. 被围绕的区域
- 【转】Voip 知识
- EXCEL处理------合并多个excel内多个sheet
- 吴恩达寄语:6大主题回顾AI圈儿的2020
- 民事诉讼法 主编 田平安
热门文章
- phpcms二次开发摘要
- Silverlight 离线安装包
- vb中查询mysql_vb数据库查询语句-vb中使用sql语句-vb读取sql语句的字段
- Delta3D(7)教程:在场景编辑器中加载角色
- 2007 Microsoft Office 加载项:Microsoft Save as PDF 或 XPS
- 推荐个 Java 开源商城项目,这个是真的好!
- 21天学通C语言-学习笔记(4)
- 用曲率,挠率反求曲线方程!(作业捷径篇 续集)
- 数据库应用(MySQL客户端工具:Navicat/SQLyog)
- c语言程序设计职工信息管理系统,C语言程序设计-职工信息管理系统.doc