0基础js新手JavaScript学习入门教程

1 下载所需工具

  • chrome,谷歌开发的一款浏览器。
  • vscode,微软开发的一款写代码的工具。

JavaScript代码需要浏览器来运行,用来控制网页的各种行为。

浏览器地址栏访问的是网页,因此JavaScript需要放到网页里。

2 先创建1个网页

在电脑本地硬盘任意位置,右键新建一个文件夹day1,用vscode打开此文件夹,点击new file,内容如下:

<html><title>我的第一个网页</title><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

点击保存为文件index.html,右键选择Reveal in Finder或者Reveal in Explorer, 然后双击打开看看效果。(ps:或者拖动到chrome浏览器)

3 把JavaScript代码放到网页里

接下来如何把JavaScript放到index.html里呢,有两种方式

方式1,直接写到index.html里,代码如下:

<html><head><title>我的第一个网页</title> <script>console.log("这里是JavaScript代码,用chrome打开,按f12,点击Console即可看到我"); //打印日志</script></head><meta charset="utf-8"><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

保存后,重新刷新网页看看效果

方式2,点file–>new file,内容如下

document.body.innerText = "你好呀 JavaScript"; 
// "//" 可以注释单行
// script 放到最后,等待网页加载完毕再运行JavaScript,这样对用户更好。

保存,文件为01.js。然后在index.html里引入此文件,修改index.html如下:

<html><head><title>我的第一个网页</title> </head><meta charset="utf-8"><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body><script src="01.js"></script>
</html>

保存后重新刷新网页,看看发生了什么?如果整个页面内容显示成你好呀 JavaScript,那么恭喜你,你成功了!

enter description here

接下来把这本书《JavaScript DOM编程艺术》里的代码敲一遍吧,敲完你就能做一个个人网页了。快行动吧,切记要一行一行敲一遍,且运行正确

最后想说的

  • 不安逸,不浮躁。任何学习都不是一蹴而就的,牛B就是一个学习积累的过程,别指望两三个月,你的水平就多么厉害。倚天屠龙记里面的武功最牛B的是张三丰,而不是张无忌。
  • 任何工作都需要多种技能,别忽略了html,css等其他知识的学习。

ps:转载请联系宋洋葱

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

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

相关文章

简单粗暴的JavaScript学习教程,前端入门的不二之选!

JavaScript 是网景&#xff08;Netscape&#xff09;公司开发的一种基于客户端浏览器、面向&#xff08;基于&#xff09;对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。 JavaScript的特点&#xff1a; 简单、易学、易用&#xff1b;跨平台&#xff…

对于初学者的JavaScript 教程

JavaScript是世界上最流行的轻量级、解释型编译编程语言。它也被称为网页的脚本语言。它以开发网页而闻名&#xff0c;许多非浏览器环境也使用它。JavaScript 可用于客户端开发以及服务器端开发。 JavaScript 可以通过两种方式添加到您的 HTML 文件中&#xff1a; 内部 JS&…

node.js入门教程(一)

1. 初识 Node.js Node.js 是 一个基于 Chrome V8 引擎的 JavaScript 运行环境 。 Node.js 的官网地址&#xff1a; https://nodejs.org/zh-cn/ ① 浏览器 是 JavaScript 的 前端运行环境 。 ② Node.js 是 JavaScript 的 后端运行环境 。 ③ Node.js 中 无法调用 DOM 和…

最通俗易懂的JavaScript入门教程

前言&#xff1a;“成功没有捷径&#xff0c;脚踏实地一步一个脚印&#xff0c;该来的总会来&#xff0c;不好高骛远&#xff0c;不急功近利&#xff0c;付出总会有回报&#xff0c;不管处于哪个阶段&#xff0c;都要一步一个脚印&#xff0c;踏实的走好每一步&#xff01;” 你…

Vue.js入门教程(适合初学者)

Vue.js入门教程 Vue官网网址&#xff1a;Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架&#xff0c;是一套构建用户界面的渐进式框架。也可以说Vue.js 是一个用来构建网页界面的 JavaScript 库。 Vue的常用使用方式有两种&#xff1a; 一、使用<script>标签&am…

尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记

前言 这个是我学习过程中的笔记&#xff0c;分享给大家&#xff0c;希望对大家有用。 学习内容是尚硅谷JavaScript高级教程(javascript实战进阶)&#xff0c;这里是视频链接。 我在前面有两篇对于web前端HTML和CSS的学习笔记&#xff0c;有需要的可以看一下哈。 黑马程序员版…

Threejs入门教程

一、本地搭建Threejs官方文档网站 1.官网地址&#xff1a;https://github.com/mrdoob/three.js 下载压缩包并解压或使用git clone 若github过慢&#xff0c;则使用gitee对应网址&#xff1a;three.js: mrdoob/three.js 同步库 2.目录解析 3.启动方式 在three.js项目根目录下…

Javascript机器学习教程

Javascript机器学习教程 使用 Javascript 和 TensorflowJS 通过动手项目从头开始掌握机器学习 课程英文名&#xff1a;Machine Learning with Javascript 此视频教程共1.0小时&#xff0c;中英双语字幕&#xff0c;画质清晰无水印&#xff0c;源码附件全 下载地址 课程编号…

CAD梦想画图中删除命令

“删除”命令用于删除在CAD作图过程中的图线和多余的图线。用户既可以先选择对象再执行“删除”&#xff0c;也可以先执行“删除”命令再选择对象。选择“删除”命令后&#xff0c;CAD屏幕上的十字光标将会变成一个拾取框&#xff0c;选择需要删除的对象&#xff0c;按enter键。…

CAD怎么删除图块注释?删除CAD图块注释步骤

CAD设计过程中&#xff0c;有时候会在图纸中添加许多注释&#xff0c;如&#xff1a;文字注释&#xff0c;图块注释&#xff0c;标注样式注释等。当需要删除图纸中的CAD图块注释时&#xff0c;你知道该如何操作吗&#xff1f;本节课程小编就来给大家分享一下浩辰CAD软件中删除C…

AutoCAD单独卸载,不影响其他软件,CAD 2021安装失败,怎么完全彻底卸载删除清理干净CAD 2021各种残留注册表和文件?

AIOC超级工具箱 AIOC超级工具箱是专门为了针对Autodesk类软件卸载不干净而导致Autodesk安装失败问题进行研发的Autodesk一键卸载工具。现在虽然360或一些卸载软件提供了强力卸载Autodesk的工具&#xff0c;可以将Autodesk注册表和一些Autodesk目录的Autodesk残留信息删除&…

CAD卸载重新安装方法,使用清理卸载工具完全彻底删除干净CAD各种残留注册表和文件。

CAD没有按照正确方式卸载&#xff0c;导致CAD安装失败。现在虽然360或者其他一些卸载软件提供了强力卸载清理CAD的工具&#xff0c;可以将CAD注册表和一些CAD目录的CAD残留信息删除干净&#xff0c;但仍不能确保将CAD所有相关dll程序文件、exe可执行文件和注册表信息全部彻底删…

CAD 卸载工具,完美彻底卸载清除干净cad各种残留注册表和文件

CAD提示安装未完成&#xff0c;某些产品无法安装该怎样解决呢&#xff1f;&#xff0c;一些朋友在win7或者win10系统下安装CAD失败提示CAD安装未完成&#xff0c;某些产品无法安装&#xff0c;也有时候想重新安装CAD的时候会出现本电脑windows系统已安装CAD&#xff0c;你要是不…

【AutoCAD 卸载工具,完全彻底删除清理干净AutoCAD各种残留注册表和文件】

AutoCAD卸载工具&#xff0c;完全彻底删除干净AutoCAD各种残留注册表和文件。AutoCAD安装失败&#xff0c;怎么完全彻底删除清理干净AutoCAD各种残留注册表和文件呢&#xff1f;有些同学想把AutoCAD重新安装&#xff0c;但是AutoCAD安装失败显示失败&#xff0c;有时AutoCAD安装…

CAD单独卸载,不影响其他软件,CAD专用卸载修复工具,一键完全彻底卸载删除CAD软件的专用卸载工具

AIOC超级工具箱 小伙伴是不是遇到 CAD/3dmax/maya/Revit/Inventor 安装失败或者安装不了的问题了呢&#xff1f;AUTODESK系列软件着实令人头疼&#xff0c;CAD/3dmax/maya/Revit/Inventor安装失败之后不能完全卸载&#xff01;&#xff01;&#xff01;&#xff08;比如maya&a…

cad 2020安装失败,怎么完全彻底卸载删除清理干净cad 2020各种残留注册表和文件? 【转载】

cad 2020卸载工具&#xff0c;完全彻底删除干净cad 2020各种残留注册表和文件。cad 2020安装失败&#xff0c;怎么完全彻底删除清理干净cad 2020各种残留注册表和文件呢&#xff1f;有些同学想把cad 2020重新安装&#xff0c;但是cad 2020安装失败显示失败&#xff0c;有时cad …

CAD 残留文件和注册表如何完全彻底卸载删除干净【转载】

CAD 残留文件和注册表如何完全彻底卸载删除干净&#xff1f;cad安装失败&#xff0c;怎么完全彻底删除清理干净cad各种残留注册表和文件呢&#xff1f;有些同学想把cad重新安装&#xff0c;但是cad安装失败显示失败&#xff0c;有时cad安装到一半就显示失败&#xff0c;然后会问…

CAD卸载方法,如何完全彻底卸载删除清理干净CAD各种残留注册表和文件? 【转载】

CAD卸载方法&#xff0c;完全彻底删除干净CAD各种残留注册表和文件。CAD安装失败&#xff0c;怎么完全彻底删除清理干净CAD各种残留注册表和文件呢&#xff1f;有些同学想把CAD重新安装&#xff0c;但是CAD安装失败显示失败&#xff0c;有时CAD安装到一半就显示失败&#xff0c…

cad卸载_如何卸载干净CAD?

小伙伴是不是遇到 CAD/3dmax/maya/Revit/Inventor 安装失败或者安装不了的问题了呢&#xff1f;AUTODESK系列软件着实令人头疼&#xff0c;CAD/3dmax/maya/Revit/Inventor安装失败之后不能完全卸载&#xff01;&#xff01;&#xff01;&#xff08;比如maya&#xff0c;cad&am…

CAD绘图设计中怎样删除CAD图层?怎样清理CAD图层文件?

我们平时在设计图纸的时候&#xff0c;有的时候&#xff0c;也经常会遇到图层繁多&#xff0c;需要处理的情况&#xff0c;那么图层少的话&#xff0c;我们可以一个一个的进行删除清理&#xff0c;如果图层多了该怎么办&#xff1f;那今天小编就给大家详细的解说一下遇到这种情…