整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库，里面收集了 20 个 JavaScript+Html+CSS的练手项目，没有使用任何框架，可以让你从基础入门到深入学习。这些项目原本是 Udemy 上 20 Web Projects With Vanilla JavaScript 课程的一部分，但是如果你已经拥有了一些基础，不妨试着看一下源码，然后模仿实现吧
判断输入的表单字段是否合法
一个简单的电影座位预定演示项目
一个简单的网页视频播放器
计算不同货币的兑换汇率
练习如何操作 DOM 数组
练习如何弹出登录注册窗口，以及滑动弹出菜单
练习如何判断隐藏字符是否正确
简单的点餐查询应用
简单的购物车结算应用
简单的网页音乐播放器
网页无限向下滚动实现
简单的打字输入游戏
文本阅读器
测试记忆的记忆卡片
网页歌词搜索器
模拟呼吸的节奏
简单的网页破冰游戏
网页新年倒计时
网页财富榜单
说出数字，猜测数字
今天我们给大家分享了，20 个 JavaScript+Html+CSS 练手小项目，大家觉得哪个最简单，哪个最复杂呢？赶紧去 Github 仓库拉取项目，码上行动吧
欢迎关注公众号：KnowHub 知识加油站！
[1]
vanillawebprojects: https://github.com/bradtraversy/vanillawebprojects
这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
我们总是先扬起尘土
然后抱怨自己看不见
- 2024.04.17 -
JavaScript是一种轻量级的编程语言，通常用于网页开发，以增强用户界面的交互性和动态性。然而在HTML中，有多种方法可以嵌入和使用JavaScript代码。
本文就带大家深入了解如何在HTML中使用JavaScript。
要在HTML中使用JavaScript，我们需要使用<script>标签。这个标签可以放在<head>或<body>部分，但通常我们会将其放在<body>部分的底部，以确保在执行JavaScript代码时，HTML文档已经完全加载。
使用 <script> 标签有两种方式：直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript 文件。
包含在 <script> 标签内的 JavaScript 代码在浏览器总按照从上至下的顺序依次解释。
所有 <script> 标签都会按照他们在 HTML 中出现的先后顺序依次被解析。
HTML 为 <script> 定义了几个属性：
1）async：可选。表示应该立即下载脚本，但不妨碍页面中其他操作。该功能只对外部 JavaScript 文件有效。
如果给一个外部引入的js文件设置了这个属性，那页面在解析代码的时候遇到这个<script>的时候，一边下载该脚本文件，一边异步加载页面其他内容。
2）defer：可选。表示脚本可以延迟到整个页面完全被解析和显示之后再执行。该属性只对外部 JavaScript 文件有效。
3）src：可选。表示包含要执行代码的外部文件。
4）type：可选。表示编写代码使用的脚本语言的内容类型，目前在客户端，type 属性值一般使用 text/javascript。不过这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。
1.1 直接在页面中嵌入JavaScript代码
内部JavaScript是将JavaScript代码放在HTML文档的<script>标签中。这样可以将JavaScript代码与HTML代码分离，使结构更清晰，易于维护。
在使用<script>元素嵌入JavaScript代码时，只须为<script>指定type属性。然后，像下面这样把JavaScript代码直接放在元素内部即可：
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>如果没有指定script属性，则其默认值为text/javascript。
包含在<script>元素内部的JavaScript代码将被从上至下依次解释。在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。
在使用<script>嵌入JavaScript代码的过程中，当代码中出现"</script>"字符串时，由于解析嵌入式代码的规则，浏览器会认为这是结束的</script>标签。可以通过转义字符“\”写成<\/script>来解决这个问题。
1.2 包含外部 JavaScript 文件
外部JavaScript是将JavaScript代码放在单独的.js文件中，然后在HTML文档中通过<script>标签的src属性引用这个文件。这种方法可以使代码更加模块化，便于重用和共享。
如果要通过<script>元素来包含外部JavaScript文件，那么src属性就是必需的。这个属性的值是一个指向外部JavaScript文件的链接。
<script type="text/javascript" src="example.js"></script>与解析嵌入式JavaScript代码一样，在解析外部JavaScript文件（包括下载该文件）时，页面的处理也会暂时停止。
注意：带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。
通过<script>元素的src属性还可以包含来自外部域的JavaScript文件。它的src属性可以是指向当前HTML页面所在域之外的某个域中的完整URL。
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>于是，位于外部域中的代码也会被加载和解析。
1.3 标签的位置
在HTML中，所有的<script>标签会按照它们出现的先后顺序被解析。在不使用defer和async属性的情况下，只有当前面的<script>标签中的代码解析完成后，才会开始解析后面的<script>标签中的代码。
通常，所有的<script>标签应该放在页面的<head>标签中，这样可以将外部文件（包括CSS和JavaScript文件）的引用集中放置。
然而，如果将所有的JavaScript文件都放在<head>标签中，会导致浏览器在呈现页面内容之前必须下载、解析并执行所有JavaScript代码，这可能会造成明显的延迟，导致浏览器窗口在加载过程中出现空白。
为了避免这种延迟问题，现代Web应用程序通常会将所有的JavaScript引用放置在<body>标签中的页面内容的后面。这样做可以确保在解析JavaScript代码之前，页面的内容已经完全呈现在浏览器中，从而加快了打开网页的速度。
JavaScript 解析过程包括两个阶段：预处理（也称预编译）和执行。
1、执行过程
HTML 文档在浏览器中的解析过程是：按照文档流从上到下逐步解析页面结构和信息。
JavaScript 代码作为嵌入的脚本应该也算做 HTML 文档的组成部分，所以 JavaScript 代码在装载时的执行顺序也是根据 <script> 标签出现的顺序来确定。
你是不是厌倦了一成不变的编程模式？想要突破自我，挑战新技术想要突破自我，挑战新技术？却迟迟找不到可以练手的项目实战？是不是梦想打造一个属于自己的支付系统？那么，恭喜你，云端源想免费实战直播——《微实战-使用支付宝/微信支付服务，网站在线支付功能大揭秘》正在进行，点击前往获取源码！云端源想
2、预编译
当 JavaScript 引擎解析脚本时候，他会在与编译期对所有声明的变量和函数预先进行处理。当 JavaScript 解析器执行下面脚本时不会报错。
alert(a); //返回值 undefined
var a = 1;
alert(a); //返回值 1由于变量声明是在预编译期被处理的，在执行期间对于所有的代码来说，都是可见的，但是执行上面代码，提示的值是 undefined 而不是 1。
因为变量初始化过程发生在执行期，而不是预编译期。在执行期，JavaScript 解析器是按照代码先后顺序进行解析的，如果在前面代码行中没有为变量赋值，则 JavaScript 解析器会使用默认值 undefined 。
由于第二行中为变量 a 赋值了，所以在第三行代码中会提示变量 a 的值为 1，而不是 undefined。
fun(); //调用函数，返回值1
function fun(){
alert(1);
}函数声明前调用函数也是合法的，并能够正确解析，所以返回值是 1。但如果是下面这种方式则 JavaScript 解释器会报错。
fun(); //调用函数，返回语法错误
var fun = function(){
alert(1);
}上面的这个例子中定义的函数仅作为值赋值给变量 fun 。在预编译期，JavaScript 解释器只能够为声明变量 fun 进行处理，而对于变量 fun 的值，只能等到执行期时按照顺序进行赋值，自然就会出现语法错误，提示找不到对象 fun。
总结：声明变量和函数可以在文档的任意位置，但是良好的习惯应该是在所有 JavaScript 代码之前声明全局变量和函数，并对变量进行初始化赋值。在函数内部也是先声明变量，后引用。
通过今天的分享，相信大家已经对JavaScript在HTML中的应用有了一定的了解。这只是冰山一角，JavaScript的潜力远不止于此。希望这篇文章能激发大家对编程的热情，让我们一起在编程的世界里探索更多的可能性！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
多朋友可能在学习javascript的时候感觉很枯燥乏味，找不到方法跟方向，今天就给大家分享些学习javascript的方法技巧跟心得。
如今的编程行业吸引了众多其他行业的同志加入我们程序员的行列，还有很多半路“回车”了。原因大概就以下几种：
坚持不下去
没找到方法
觉得时间太久
部分人觉得有点难度
感觉学了不知道怎么用
那么今天就这些问题给大家一个清晰的思路，跟分享如何学好javascript，提前告诉大家一声，学好了javascript，框架之类的都没问题，要知道，JS框架的原生是javascript。
好了，鸡汤之类的我不说，直接开工。
针对第一个原因，我想发表下自己的看法！首先问问自己，为什么当初选择了编程，而如今却寸步难行？其次，你有没有问问自己的决心，是不是非要坚持下来，当然了如果你是业余爱好者，小编我只能说，鸡汤我干了，你随意！
既然当初，热血沸腾的进来了，咋们就不能空手而退，一定得坚持。不是有句话说的好嘛，这个成功与失败之间原因很简单，同样的事情，别人坚持了，而你只是没坚持而已。
额，话说，到这怎么还没见关于javascript的事情，原谅小编话多。。。（尴尬）
来到第二个原因，也是今天的重点，学习方法。这里还是老规矩，先列出流程：
找一本合适自己的书
找到自己合适的编写代码的工具
学会找资源
学会用代码总结
好了，我的粉丝们，大概你们知道我接下来要干啥了。对，没错，开始念经。。。
如何找到一本适合自己的javascript书籍呢？决定于你是否纯小白还是半点儿白，纯白的建议你选择javascript权威指南，半白的建议你javascript高级程序设计，这两本书，我多次在不同社区跟平台给别人推荐过。因为我认为，这两本书的过渡很好。
那么找到书了，开始学，学的时候得边写代码吧！这时候找个得心应手的工具在合适不过了。建议大家学习javascript不要用浏览器去看结果，不方便。来，跟着老司机动起来
一、下载node.js，并且全局安装
二、找到你的javascript文件目录，运行命令，输入node 文件名.js 你会有大发现
效果图如下：
边写边看，效率高
这样你在学方法的时候，属性操作的时候，能够快速清晰的看到结果。话说用命令行学习，逼格是不是高了点。哈哈！
当你学的有点苗头了，别想着它能干啥，想想找点资源来练手，网络上一大堆的javascript写的特效代码，拿来练手不是更好？
最后，总结性的用javascript结合web前端布局，写一个有点效果的静态网页，找成就感，多给自己找找成就感，学习起来倍儿轻松。
好了，前面几个简单概括了下。现在重点讲讲怎么学习javascript！
当你在看javascript书的第一天开始，你一定得分好时间，什么时间看什么部分的书！比如：简介性质部分，概念部分，代码示例部分。
给大家一个比较好的安排：简介可以当小说看，在地铁上，公交上；概念建议夜深人静的时候看，你的世界没人打扰你；代码示例建议任何有空时间都要敲，不敲代码敲什么。
当我们开始坚持了一段时间，然后回过头来重复我上面说的第三跟第四部分，最终行成，成就感由小到大，慢慢的时间一长，你会发现，原来我已经学的差不多了！
开到这里，大家可能觉得怎么没见一行代码，没错，今天这个就是javascript开篇，给大家一个清晰的思路，后之我在分享javascript这个脚本语言的时候，你会很快接受。而且学习兴趣会增强。那么，提前跟大家说下接下来要分享的javascript文章流程。
一、javascript基础知识（主要分享变量跟数据类型）
二、javascript常用语句（主要分享条件判断循环）
三、javascript函数（函数）重点
四、javascript环境跟作用域（重难点，主要是概念）
五、javascript对象（长期要讲的，可知多重要）
希望接下来的这些分享，可以给学编程的你带来帮助！
加油
*请认真填写需求信息，我们会在24小时内与您取得联系。
