Skip to content

Commit 68c09b5

Browse files
HaoZhang95HaoZhang95
committed
11JS基础day01完成
1 parent 9c10278 commit 68c09b5

7 files changed

Lines changed: 162 additions & 127 deletions

File tree

‎.idea/workspace.xml‎

Lines changed: 26 additions & 113 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎06AdvancedPyton/day02/basic04.py‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"""
22
with .. as
3-
43
一个类实现了__enter()__和__exit__两个魔法方法，就表示这个类有了context上下文管理器
54
65
一般with配合上下文管理器使用， 上下文管理器就是给自己的类定义**鞍前马后**地处理
@@ -72,7 +71,12 @@ def main():
7271

7372
test01()
7473
test02()
74+
# test03()
7575

7676

7777
if __name__ == '__main__':
7878
main()
79+
80+
# python中的函数都是从上到下执行的，即使写了main函数也一样,通常把main函数写在最后，不支持像js一样的预解析
81+
# def test03():
82+
# print("......")

‎11JavaScript/day01/basic01.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,95 @@
66
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
88
<title>Document</title>
9+
10+
<!-- js的三种导入方式运行环境是cript标签，css的运行环境是style -->
11+
12+
<!-- 1- 嵌入式写法 -->
13+
<script>
14+
15+
// js 函数,js的代码分号可写可不写,建议写分号，用来js文件格式化压缩的时候(去除多余空行)，清晰分辨
16+
// alert("Hello World...")
17+
18+
// <!-- js入口函数:让浏览器从上到下遇见js先跳过，先加载html，css代码，读取完成后再加载js -->
19+
// <!-- 不然浏览器从上到下，在没有加载html，css的时候就加载js的代码 -->
20+
// 在html,css窗口加载完毕才会执行window.onload的函数
21+
window.onload = function () {
22+
// 修改标签的内容, 内容的修改都是通过innerHTML
23+
document.getElementById("box").innerHTML = "js控制的内容";
24+
// 添加标签到父标签
25+
document.getElementById("box").innerHTML = "<p>div内部的p标签</p>";
26+
// 清空标签内容
27+
// document.getElementById("box").innerHTML = "";
28+
29+
30+
// 修改节点样式是通过style来修改,css的background-color在js中使用的是大驼峰backgroundColor
31+
document.getElementById("box").style.width = "500px";
32+
document.getElementById("box").style.background = "green";
33+
document.getElementById("box").style.fontSize = "60px";
34+
35+
36+
// 修改标签的属性,直接点属性即可,大部分html的属性名在js中是一样的,只有class属性不一样,在js中是className
37+
document.getElementById("link").href = "https://www.baidu.com"
38+
document.getElementById("pic").src = "xxx.jpg"
39+
document.getElementById("pic").alt = "这是被修改的替换文字"
40+
document.getElementById("pic").className = "box2"
41+
42+
43+
// js中的变量var
44+
var oMyLink = document.getElementById("link");
45+
oMyLink.className = "box3"
46+
oMyLink.className = "box3"
47+
48+
// js数据类型
49+
console.log("类型是%s", typeof(1.1)); // number (不存在int,float)
50+
console.log(typeof("Hello World")); // string
51+
console.log(typeof(false)); // boolean
52+
console.log(typeof(null)); // object(js中的null也是一个对象)
53+
console.log(typeof(myObj)); // undefined
54+
55+
// 定义函数，js允许函数预解析,可以调用在定义之前,变量不支持预解析
56+
// js中的与或非 && || !, python中的是单词and or not
57+
myFunc("你好")
58+
function myFunc(str) {
59+
console.log("%s,函数已被调用...", str);
60+
61+
if (1 > 2) {
62+
console.log("1 > 2");
63+
} else if (1 == 2){
64+
console.log("1 = 2");
65+
} else {
66+
console.log("1 < 2");
67+
}
68+
}
69+
}
70+
71+
</script>
72+
73+
<!-- 2- 外链式写法，开发中使用的就是外链式,注意外链式的也必须加window.onload -->
74+
<!-- <script src="./js/my_js.js"></script> -->
75+
976
</head>
1077
<body>
1178

79+
<!-- 3- 行内式js, 用于处理行内元素用户出发的事件(click, 划过等等),用户不触发不会执行 -->
80+
<div onclick="alert('Hello World...')">测试行内js</div>
81+
82+
<!-- DOM文档对象模型:通过DOM自己的方式，将页面的所有标签形成一个**倒置**的树状结构图
83+
树状结构图中查找的是节点，从而找到节点(标签,属性,方法和内容)去被js控制
84+
85+
Document
86+
Head Body
87+
metadata title h1 span h2
88+
(每个节点的属性，方法，内容都可以被控制)
89+
-->
90+
91+
<!-- DOM查找结点的方式
92+
1- getElementById 最快的方式
93+
-->
94+
<div id="box">测试DOM的查找及控制内容</div>
95+
96+
<a href="#" id="link">这是超链接</a>
97+
<img src="1.jpg" id="pic" alt="替换文字" class="box">
98+
1299
</body>
13100
</html>

‎11JavaScript/day01/basic02.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,42 @@
66
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
88
<title>Document</title>
9+
10+
<script>
11+
12+
window.onload = function () {
13+
14+
function func1() {
15+
var oBtn1 = document.getElementById("btn1")
16+
var oBtn2 = document.getElementById("btn2")
17+
var oBtn3 = document.getElementById("btn3")
18+
19+
// 这里的事件采用匿名函数,匿名函数主要用来执行命令的
20+
oBtn1.onmouseenter = function () {
21+
console.log("鼠标滑过...");
22+
}
23+
oBtn2.onclick = function () {
24+
console.log("鼠标点击...");
25+
}
26+
oBtn3.onmouseleave = function () {
27+
console.log("鼠标离开...");
28+
}
29+
30+
// id也可以添加到head中的标签身上，
31+
// 比如link的css外链式，通过id来设置css的href属性来实现加载不同的网页皮肤
32+
// 如果标签有自己的类或者修改类名为类名2来切换css样式
33+
}
34+
35+
func1();
36+
}
37+
38+
</script>
939
</head>
1040
<body>
1141

42+
<button id="btn1">鼠标滑过</button>
43+
<button id="btn2">鼠标点击</button>
44+
<button id="btn3">鼠标离开</button>
45+
1246
</body>
1347
</html>

‎11JavaScript/day01/basic03.html‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎11JavaScript/day01/js/my_js.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
2+
// 外链式的也需要肚独自加上window.onload
3+
window.onload = function () {
4+
alert("Hello World...")
5+
}

‎11JavaScript/day02/js/my_js.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
2+
// 外链式的也需要肚独自加上window.onload
3+
window.onload = function () {
4+
5+
}

0 commit comments

Comments
 (0)