发表于： 2018-11-23 21:51:46
1 819
今天完成的事情：今天先学习了javascript一部分基础概念：
javascript是一种脚本语言，他一般是解释执行的一种语言；
脚本语言一般要用解释器来解释执行，但是每步都要解释翻译，执行会变慢，以文本形式存在；
而编译语言要用编译器一次翻译成二进制代码，以可执行文件形式存在，之后不会需要源代码。
单从语法上来说，脚本语言不够全面也没有编译语言复杂和严格，不过脚本语言易学易用。
所有现代的 HTML 页面都使用 JavaScript，可以用于改进设计、验证表单、检测浏览器、创建cookies等。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript：直接写入 HTML 输出流
JavaScript：对事件的反应；
JavaScript：改变 HTML 内容；
JavaScript：改变 HTML 图像；
JavaScript：改变 HTML 样式；
JavaScript：验证输入；
以上这些目前只能看看效果，具体代码还是不理解；
JavaScript 用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
JavaScript 输出
JavaScript 没有任何打印或者输出的函数。
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
window可以省略：
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
使用 document.write() 方法将内容写到 HTML 文档中：
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
使用 innerHTML 写入到 HTML 元素；
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
使用 console.log() 写入到浏览器的控制台。
用来验证函数或者事件是否输出过来：
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
然后完成了任务十三，虽然之前用了bootstrap4，不过具体布局都是用的flex，没有用到太多固定样式，所以改起来没有太多问题，只不过在用到sass嵌套时，父子选择器选中项出现问题，不过已经及时更改。
明天计划的事情：继续学习js基础，开始任务十四。
遇到的问题：问题上面已经提过。
收获：熟悉了sass，了解了js。
进度：task13
任务总结：
任务名称：CSS=TASK13
成果链接：https://gu1354181433.github.io/learn/css13/task13-1.html
任务耗时：2天
个人脑图：
官方脑图：
任务总结：
不用bootstrap4布局，代码量会多不少。不过布局思路没有变 因为复杂的组件，主要还是依靠flex布局，
复杂的时候也就是嵌套flex。
代码简化方面，用sass的嵌套 特别是父子选择器和兄弟选择器，非常好用，不过注意父子选择器不要选中多余的子级。
还有固定定位fixed，用到了z-index具体数值，因为页面中有层叠上下文元素，z-index：auto无法覆盖在所有元素上面。
返回列表
评论