前言:
自己是个菜鸟,只有基础的MS EXCEL的VBA脚本编制经验。非IT行业从业者。只是在工作过程中感觉会一些代码脚本的常识,有利于工作效率的提升。
希望通过这里,能够记录一些自学的经验,作为自己的记录,也作为和大家的分享。
学习的工具:
- 学习材料:以MDN的学习材料为主,中间也找了一些其他的内容做补充学习。
- 练习工具:就一个windows+自带的记事本+自带的edge浏览器。可以说近乎无门槛了。
初步认识
建立一个HTML。原先,笔者概念还停留在上个世纪dreamwaver、用Word画表格的年代。
然后看了MDN的材料,才知道,现在时代不一样了,用个记事本就搞定的事情。
主要有三样东西学习:HTML、CSS、JS。
HTML:主体文件,记录承载页面的主要标签。
CSS:给HTML做格式化妆用的。
JS:让浏览器能实现各种程序脚本功能的。
初始建立一个,如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>日期生成</title>
<h1>点击<strong>按钮</strong>生成日期。</h1>
<style>
//这里可以放CSS的描述,后面说
//或者像这样引用外部的文件:<link rel="stylesheet" href="css/mystyle.css">
</style>
</head>
<body>
<h1>JavaScript练习002</h1>
<p><button type="button" onclick="document.getElementById('demo').innerHTML = Date()">点击我来显示日期和时间</button></p>
<p id="demo"></p>
<p id="test">脚本执行后的文本:</p>
<script>
//也可将下面的脚本套一个函数,放到上面的onclick后面,用函数调用的方式
//document.getElementById("test").innerHTML="啊啊啊啊啊啊啊啊啊啊本";
</script>
</body>
</html>
学习小结:
- CSS的描述放在Head里。或者使用引用,链接外部的文件。
- JS的内容,一般放最后。可以放在body里面,也可以放body外面。
- JS取HTML的标签对象方式:
- document.getElementById("XXX"),这种方式相对靠谱。
- document.querySelecotr("XXX"),这种方式返回符合条件的第一个。没必要不建议使用。
- 在HTML中的标签显示内容,使用innerHTML和textContent基本都可以。两者稍有差别,初学还没深切体会。网上有专门的文章说明,不再补充。
- 用记事本保存时,注意保存文件扩展名:html。就能用浏览器打开。
光靠一个记事本,码出一个按钮响应的感觉还是很不错的。为后面学习其他玩意,提供了动力。
关键,就靠一个记事本,简直无门槛。