【JavaScript教程】#1 零基础轻松入门JavaScript (JavaScript教学第一门课 ) | JavaScript tutorial for beginner (Intro)
前几集视频给大家实操过html和css，也给大家介绍过JavaScript的成长史，都知道html/css/javascript是铁三角，页面缺了JavaScript，就变成了一张静态图，失去了互动。这期视频我会教大家编写人生第一个JavaScript程序，让你亲手赋予网页生命！马上点击视频观看！
----------------------------------------
☕ ☕ ☕ 给我买杯咖啡提提神吧！
✅ https://bit.ly/3kCOpFK
✅ (免费) JavaScript教程系列：
https://bit.ly/310cHle
✅ 更多精彩的JavaScript入门课程：
http://bit.ly/js-for-beginners
✅ JavaScript相关书籍：
1：The Definitive Guide: Master the World's Most-Used Programming Language - 7th Edition (强烈推荐👍)
https://amzn.to/31s30uH
✅（通告）”Codetisan 自学编程社区“ 已经正式开通啦，三人行必有我师，同学们再也不用独自一人闷头自学编程了，快去社区里和其他小伙伴们互动吧！
▶︎ https://bit.ly/2AHylzN
🔆订阅我的YouTube频道，让你从一个0基础编程的菜鸟快速成为编程大师！🔆
http://bit.ly/2TBkXo1
▶︎ 文轩解码更精彩的平台 ◀︎
‣‣ Blogger ：https://bit.ly/2yMz0PC
‣‣ Twitter: https://bit.ly/2R74FS1
‣‣ Facebook: https://bit.ly/35crcmz
‣‣ Instagram: https://bit.ly/2KH6Wjw
‣‣ Github: https://bit.ly/2SHtsx4
#编程入门 #javascript教程 #javascript入门
文字版本：
Hi, 大家好，我是文轩！
欢迎再次收看文轩解码！
前几集视频给大家实操过html和css
也给大家介绍过JavaScript的成长史
都知道html/css/javascript是铁三角
页面缺了javascript
就变成了一张静态图
失去了互动
这期视频我会教大家编写
人生第一个javascript程序
让你亲手赋予网页生命！
程序员每一次学习新的编程语言
都会以编写Hello World程序作为一个起始点
简单的Hello World程序主要是运行源代码
和最终显示”Hello World“文字
这看似很简单
但其实它包含了程序员需要知道程序在什么环境里运行
是Windows还是Linux?
还有程序要用什么工具去开发和调试
能成功把Hello World程序运行起来
就意味着开发环境和工具已经到位
可以开始编写代码了
这次的实操我会使用两个工具
第一个是VS Code
用来编写javascript源代码
如果你还没安装VS Code的话
可以到VS Code的官网下载安装
第二个用到的工具就是Google Chrome浏览器
相信大家的电脑已经安装过了
如果还没安装的话
也可以去到它的官网下载安装
如果这两个工具都已经安装好了
那我们就开始吧!
我们第一个"Hello World" JavaScript程序将会通过
浏览器的消息框去显示"Hello World"文字
我们在地址栏这里输入
javascript
冒号
alert
括号
双引号
然后输入我们要显示的Hello World
然后按Enter键
Hello World的消息框弹出来了！
恭喜你！你的第一个javascript程序已经完成！
这就完了？
大家别着急啊
当然还没完
我们连VS Code都还没打开呢
刚才给你们演示的是用最简单粗暴的方式
执行javascript源代码
真真的javascript程序是不会用这种方式运行的
在我们打开VS Code之前
我再和你们介绍另外一个可以执行
javascript源代码的地方
那就是Chrome DevTool开发者工具
如果你对这个Chrome开发者工具不太了解的话
等一下看完这个教程可以翻看这个视频
好的，那现在我们启动这个开发者工具
要启动这个开发者工具的话
我们需要点击右键
然后选Inspect（检查）就可以了
这里有好几个面板
我们需要切换到Console面板
在这里，我们可以输入和执行javascript源代码
对于程序员来说
这里就像一个沙盒 (sandbox) 那样
随我们运行任何javascript源代码
也可以用它来调试（debug）javascript源代码
如果想要显示像刚才的Hello World消息框
我们在这里输入
alert
括号
双引号
然后输入我们要显示的Hello World
然后按Enter键
你看
这个消息框和之前的是一样的
我们也可以在这里输入一些命令
比如1+3是等于几之类的简单命令
一旦我们编写的javascript程序
在运行的时候出现了问题
它也会在Console面板这里报错
类似这样的报错
它显示JavaScript程序在哪里出错了
所以一般程序员在开发javascript程序的时候
很依赖Console面板
好的
现在我们要开始在VS Code里编写源代码了
我们会在VS Code里创建两个文档
一个是hello.html
用来保存HTML源代码
另外一个是hello.js
用来保存javascript源代码
记得这两个文档一定要保存在同一个文件夹里
我们先打开hello.html来编写HTML源代码
我们只需要在这里插入html tag (标签)
head tag (标签)
和 body tag (标签) 就可以了
接下来，我们会在head tag 插入一个script tag
然后在这里开始编写javascript源代码
和之前一样
我们会在浏览器刷新页面的时候
显示Hello World的消息框
这里我们输入
alert
括号
双引号
和Hello World
然后最后再加上一个分号
javascript每一行的指令会以分号作为结尾
虽然去掉结尾的分号
指令还是能运行
但是我还是建议大家养成在指令的结尾把分号加上去
免得以后复杂的javascript程序
在后期出现难以调试的问题
我们先保存这个文档
现在我们去浏览器打开hello.html
我们的Hello World消息框显示了
恭喜啊，你的第一个javascript程序又完成了！
这个script tag除了能放在head tag里
我们也可以把它放在body tag里
我们把这一行挪到body tag里
保存
然后刷新页面
你看，Hello World消息框也同样能显示
你们心里是不是有一个疑问
那个hello.js要用来干嘛的呢？
是的
你们太聪明了
这个hello.js才是重中之重
其实啊，最佳实践是
我们需要把所有的javascript源代码
都编写在hello.js里
这样做
是为了不让javascript和html tag混在一起
网页里的javascript源代码可能有几千行
甚至几万行
把javascript源代码放在html文档里会加大调试的难度
好的，接下来
我们要把script tag里的源代码复制到hello.js里
script tag不需要复制了
我们把它粘贴到hello.js里
这个script tag我们就不要了
把它都删掉吧
现在, 我们需要在head tag里
做一个hello.js文档的外部关联
不然html文档不知道从哪里读取javascript源代码
我们在head tag里插入script tag
然后添加一个src (source) 属性
因为html和javascript文档是在同一个文件夹里
所以这里直接输入hello.js就可以了
好了，那样hello.js就成功关联了
我们保存和刷新页面
看看会不会像刚才那样显示Hello World消息框
嗯，消息框弹出来了
我们关联的javascript源代码成功执行
刚才给大家介绍过
怎么编写和执行最基本的
Hello World JavaScript源代码
觉得怎么样呢？
我相信这难不倒大家吧
估计就是小菜一碟
接下来的几个视频
我会继续带大家挑战更高级的javascript
有兴趣的话记得订阅关注频道
我会在发布视频后第一时间通知你
如果觉得这个视频对你有帮助的话
记得点赞和分享
我们下个视频见
拜拜！
Comments
Post a Comment