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

最新推荐文章于 2024-03-13 15:39:43 发布

宋洋葱

最新推荐文章于 2024-03-13 15:39:43 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript html html5 typescript

本文链接：https://blog.csdn.net/sxy365/article/details/104013965

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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：转载请联系宋洋葱

宋洋葱

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
0基础js新手JavaScript学习入门教程

1 下载所需工具chrome，谷歌开发的一款浏览器。vscode，微软开发的一款写代码的工具。JavaScript代码需要浏览器来运行，用来控制网页的各种行为。浏览器地址栏访问的是网页，因此JavaScript需要放到网页里。2 先创建1个网页在电脑本地硬盘任意位置，右键新建一个文件夹day1，用vscode打开此文件夹，点击new file,内容如下:<html>...
复制链接

扫一扫

专栏目录