JavaScript学习笔记(1)

寒假备战服创大赛,选题A06,需要使用前后端技术对地铁出行中的人流进行数据分析和预测。遂开始学习JS。本博文仅作为学习笔记(防止自己偷懒~)

  • HTML 定义了网页的内容
  • CSS 描述了网页的布局
  • JavaScript 网页的行为

以上是基本的Web结构。JavaScript在网站中主要负责动作交互这一块。

使用的工具

HBuilder 9.1.29.201811231920

hbuilder.png

JavaScript写在哪里

直接内嵌在HTML中

1
<script>JS代码</script>

HTML中引入外部的JS文件

HTML中引入外部的JS代码的语句:

1
<script src="xxxxxx.js"></script>

外部 javascript 文件中不使用 <script> 标签,直接写 javascript 代码即可。

JavaScript常用的输出语句

使用 window.alert() 弹出警告框。

1
window.alert(5 + 6);

使用 document.write() 方法将内容写到 HTML 文档中。

跟其他语言中直接使用print差不多

使用 innerHTML 写入到 HTML 元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。"; /*getElementById("")方法根据元素id来查找到对应的元素然后实现innerHTML的修改元素的功能*/
</script>

</body>
</html>

使用 console.log() 写入到浏览器的控制台。

实现类似百度首页的这个控制台日志的这个效果

baiduindex.png

注意点

比较两种输出文字方式的不同:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>

<script>
document.write(Date());
</script>

</body>
</html>

按顺序执行,所有内容在第一次加载的时候全部执行完毕。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
document.write(Date());
}
</script>

</body>
</html>

分两次加载,第一次加载是在用户点击按钮前的加载,显示两行文字和一个按钮。用户点击按钮后,实现第二次加载。此时的输出内容会覆盖第一次加载输出的内容,即点击按钮后页面显示内容只有当前日期而无其他内容。

本文标题:JavaScript学习笔记(1)

文章作者:zzzain46

发布时间:2020年01月13日 - 17:01

最后更新:2020年01月15日 - 17:01

原始链接:https://www.52debug.cn/posts/a0f74e97.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

如果你觉得我的文章对你有用,请随意打赏!
0%