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

2024-06-16 10:00:31

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，那么恭喜你，你成功了!

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

最后想说的

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

ps：转载请联系宋洋葱

0基础js新手JavaScript学习入门教程相关推荐

转g代码教程_图深度学习入门教程（九）——图滤波神经网络模型
本教程是一个系列免费教程,争取每月更新2到4篇.(由于精力有限,近期停止了一段时间,在此向大家道个歉). 主要是基于图深度学习的入门内容.讲述最基本的基础知识,其中包括深度学习.数学.图神经网络等相关 ...
zbrush零基础新手必看入门教程第三部分：构成
zbrush零基础新手必看入门教程,在第三部分,如何构建模型并修复任何变形...... 第01步:打破对称性在你开始构图之前,了解你想要角色的位置是很重要的,特别是如果你在讲故事.姿势将赋予你的角色 ...
zbrush次世代零基础新手必看入门教程第一部分：建模
zbrush零基础新手必看入门教程.在第一部分中,将向您展示了如何建模...... 欢迎阅读zbrush零基础新手必看入门教程的第一部分.这部分将带您直接开始,并向您展示如何从头开始创建一个吸引人的角 ...
.NetCore微服务Surging新手傻瓜式入门教程学习日志---结构简介（二）
.NetCore微服务Surging新手傻瓜式入门教程学习日志---结构简介(二) 原文:.NetCore微服务Surging新手傻瓜式入门教程学习日志---结构简介(二) 先上项目解决方案图 ...
jsx 调用php,JavaScript_JavaScript的React框架中的JSX语法学习入门教程，什么是JSX？在用React写组件的 - phpStudy...
JavaScript的React框架中的JSX语法学习入门教程什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上 ...
D3.js的v5版本入门教程（第一章）—— 如何在项目中使用D3.js
D3.js的v5版本入门教程(第一章) 1.需要的一些工具这个其实随便!最简单的就是建一个.txt文件就可以敲起代码来!作者本人用的是myeclipse(主要需要安装tomcat),因为写的是前端, ...
D3.js的v5版本入门教程（第六章）——做一个简单的图表
D3.js的v5版本入门教程(第六章) 从这一章开始,进入正式的d3,js绘图阶段,有了前面几章基本知识的积累,这样看接下来的绘图代码才不会觉得比较辛苦做一个简单的图表为了做一个简单的图表,我们还 ...
D3.js的v5版本入门教程（第十四章）—— 力导向图
D3.js的v5版本入门教程(第十四章) 这一章我们来绘制一个力导向图,什么叫力导向图,通俗一点将就是有节点和线组成,当鼠标拖拽一个节点时,其他节点都会受到影响(力导向图有多种类型,本章绘制的效果就是 ...
D3.js的v5版本入门教程（第十三章）—— 饼状图
D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素--扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

最新文章

热门文章