发表于： 2019-11-15 23:56:32
1 1177
今日完成
任务一需要的学的东西:
为什么学习 JavaScript?
JavaScript web 开发人员必须学习的 3 门语言中的一门：
1.HTML 定义了网页的内容
2.CSS 描述了网页的布局
3.JavaScript 网页的行为
javascript是什么？
1.JavaScript 被设计用来向 HTML 页面添加交互行为。
2.JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
3.JavaScript 由数行可执行计算机代码组成。
4.JavaScript 通常被直接嵌入 HTML 页面。(可由所有的现代浏览器执行。)
5.JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
总结:js是一般直接写在html中用来进行交互的轻量级编程语言
ps:
轻量级框架的特点：
一般是非侵入性的、依赖的东西非常少，占用资源非常少，部署简单，比较容易使用。
重量级,超出知识范围
JavaScript可以做什么？
1.JavaScript 为 HTML 设计师提供了一种编程工具
JavaScript 是一种只拥有极其简单的语法的脚本语言！
可以将短小的代码片断放入HTML 页面当中。
2.JavaScript 可以将动态的文本放入 HTML 页面
类似于这样的一段 JavaScript 声明可以将一段可变的文本放入
HTML 页面：document.write("<h1>" + name + "</h1>")
3.JavaScript 可以对事件作出响应
可以将 JavaScript 设置为当某事件发生时才会被执行，例如页面载入完成或者当用户点击某个 HTML 元素时。
4.JavaScript 可以读写 HTML 元素
JavaScript 可以读取及改变 HTML 元素的内容。
5.JavaScript 可被用来验证数据
在数据被提交到服务器之前，JavaScript 可被用来验证这些数据。
6.JavaScript 可被用来检测访问者的浏览器
JavaScript 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。
7.JavaScript 可被用来创建 cookies
JavaScript 可被用来存储和取回位于访问者的计算机中的信息。
JavaScript 简介
JavaScript：直接写入 HTML 输出流
JavaScript 能够对事件作出反应。比如对按钮的点击
JavaScript：改变 HTML 内容
JavaScript：改变 HTML 图像
JavaScript：改变 HTML 样式
JavaScript：验证输入
JavaScript 用法
1.HTML 中的脚本必须位于 <script> 与 </script> 标签之间
2.脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
ps:
1.<script> 标签
如需在 HTML 页面中插入 JavaScript，使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript
2.暂时不用深究远离,只需明白，浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码即可.
3.外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
例如:
<body>
<script src="myScript.js"></script>
</body>
ps:脚本放置于 <head> 或者 <body>中，放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致
JavaScript 输出
ps:JavaScript 没有任何打印或者输出的函数。
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
代码:
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
效果描述:在登陆或者刷新后,弹出一个必须点击确认or点击叉号(x)才能退出的提示框,并且,在点击确认or点击叉号(x)使提示框消失之前,不能对当前html里的内容做任何操作
//
使用 document.write() 方法将内容写到 HTML 文档中。
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
效果描述:就是直接把js直接写在html中
思考:
1.html中可以直接写,所以这个输出,应该不常用,或者就是资料上说的,测试目的,具体测什么,待思考
2.document.write(Date());浏览器呈现 Sat Nov 当天具体时间 (中国标准时间)
应该也是一种用法,html页面直接写,无法直接表现这种效果,应该也是混合其他属性使用
3.如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
不是很了解具体怎么操作,等学的在深入一点,如果还是有疑问,就自己设个demo看效果
//
使用 innerHTML 写入到 HTML 元素。
代码:
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
效果描述:直接改变了匹配id的内容
思考:应该不是单独,使用,没有意义,应该跟其他属性配套使用的,满足一定条件后改变
ps:
document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
document.write(Date());
}
</script>
点击前:
点击后:
Sat Nov 当日具体时间年月日小时分钟秒 GMT+0800 (中国标准时间)
描述:
类似css中的input点击效果,点击后,切换另一个页面,显示具体时间
ps:关于 document.write(Date());其中一种用法思考正确
//
使用 console.log() 写入到浏览器的控制台。
如果浏览器支持调试，可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
显示:
描述:效果在显示页面体现不出来,而是f12后,点击console,出现一个页面,具体用法待思考
2.掌握javascript的基本语法；
3.了解javascript的全局函数；
4.学习使用javascript的自定义函数；
5.javascript如何操作DOM；
6.javascript如何修改CSS；
任务一需要的知识点:
1.js的基本数据类型有哪些?
2.数据类型的方法怎么调用?
3.判断和循环语句的使用?
4.函数是什么，DOM和BOM是什么，事件是什么。
JavaScript 函数:
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
遇到问题:
1.开始学基础,太多,太杂,需要联系起来,并且思考,现在看的那些任务可能用到
2.开始写了围绕的点,又变成越学点越多,不过有重复的部分,还有补充的部分
收获:
1.js的初步了解
2.为了,看过脑子有印象,有一定的了解,就每个点,用自己的话再总结一遍,或者描述呈现效果
明日计划:
把上面的点找完,就开始尝试做代码
返回列表
评论