css day2 js 前端編程語言 day1 # 47

時間 2019-11-12

標籤 css day2 day 前端編程語言 day1 欄目 CSS 简体版

原文原文鏈接

day47css題 JavaScript(JS) 前端編程語言

0.做業-day46做業最優-頁面設計

  1 /*博樂園頁面的頁面的樣式文件*/
  2 
  3 /*通用樣式*/
  4 body{
  5     margin: 0;
  6     background-color: red;
  7 }
  8 /*去掉ul的醜陋部分*/
  9 ul{
 10     list-style-type: none;
 11     /*padding填充,覆蓋*/
 12     padding: 0;
 13     text-align: center;
 14     margin-top: 160px;
 15 }
 16 /*去掉a的裝飾(decoration)*/
 17 a{
 18     text-decoration: none;
 19 }
 20 /*左側樣式*/
 21 .blog-left{
 22     float: left;
 23     background-color: aqua;
 24     width: 30%;
 25     height: 100%;
 26     position: fixed;
 27 }
 28 /*左側內部頭像*/
 29 /*分兩部分:外部邊框 內部圖片*/
 30 /*外部邊框*/
 31 .blog-avatar{
 32     border-radius: 50%;
 33     border: 10px solid red;
 34     height: 300px;
 35     width: 300px;
 36     margin: 40px auto;
 37     overflow: hidden;
 38 }
 39 /*頭像圖片*/
 40 .blog-avatar img{
 41     max-width: 100%;
 42 }
 43 /*博客 格言*/
 44 .blog-title,.blog-info{
 45     color: black;
 46     font-size: 50px;
 47     text-align: center;
 48 }
 49 .blog-tag,.blog-link{
 50     font-size: 50px;
 51     text-align: center;
 52 }
 53 .blog-link a,.blog-tag a{
 54     color: green;
 55 }
 56 /*a的四大僞類選擇器*/
 57 /*懸浮太*/
 58 .blog-link a:hover,.blog-tag a:hover{
 59     color: red;
 60 }
 61 /*鏈接態*/
 62 .blog-link a:link,.blog-tag a:link{
 63     color: yellow;
 64 }
 65 .blog-link a:active,.blog-tag a:active{
 66     color: gold;
 67 }
 68 .blog-link a:visited,.blog-tag a:visited{
 69     color: blue;
 70 }
 71 /*右側樣式*/
 72 .blog-right{
 73     float: right;
 74     background-color: white;
 75     width: 70%;
 76     height: 100%;
 77 }
 78 .article{
 79     background-color: pink;
 80     margin: 30px;
 81     /*box-shadow 盒陰影*/
 82     box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
 83 }
 84 .article-title{
 85     border-left: 10px solid indigo;
 86     text-indent: 30px;
 87     /*indent縮進*/
 88 }
 89 .title{
 90     font-size: 60px;
 91     /*bold 加粗*/
 92     font-weight: bold;
 93 }
 94 .date{
 95     float: right;
 96     font-size: 48px;
 97     margin-left: 100px;
 98 }
 99 .article-body{
100     font-size: 48px;
101     text-indent: 30px;
102     border-bottom: 3px solid black;
103 }
104 .article-bottom{
105     font-size: 48px;
106     padding: 20px;
107 }

my.css

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>做業</title>
  6     <link rel="stylesheet" href="my.css">
  7 </head>
  8 <body>
  9 <!--左邊-->
 10 <div class="blog-left">
 11     <!--博客頭像-->
 12     <div class="blog-avatar">
 13         <img src="賞心悅目圖.jpg" alt="">
 14     </div>
 15     <div class="blog-title">
 16         <p><a href="https://www.cnblogs.com/llx--20190411">沒有若是的博客</a></p>
 17     </div>
 18     <div class="blog-info">
 19         <p>醉飲千觴不知愁,忘川來生空餘恨!</p>
 20     </div>
 21     <!--博客鏈接-->
 22     <div class="blog-link">
 23         <ul>
 24             <li><a href="https://i.zhaopin.com/resume">關於我</a></li>
 25             <li><a href="https://weibo.com">微博</a></li>
 26             <li><a href="http://xyz.zbwlkj1.com:8080/xiaochengxu1/kaitong.html">微信公衆號</a></li>
 27         </ul>
 28     </div>
 29     <div class="blog-tag">
 30         <ul>
 31             <li><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#Python</a></li>
 32             <li><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#Java</a></li>
 33             <li><a href="https://www.baidu.com/s?ie=UTF-8&wd=Golang">#Golang</a></li>
 34         </ul>
 35     </div>
 36 </div>
 37 
 38 
 39 <!--右邊-->
 40 <div class="blog-right">
 41     <div class="article">
 42         <div class="article-title">
 43             <span class="title">尋人啓事</span>
 44             <span class="date">2019/09/06</span>
 45         </div>
 46         <div class="article-body">
 47             <p>
 48                尋人啓事事成以後,贈送100萬美金
 49             </p>
 50         </div>
 51         <div class="article-bottom">
 52             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
 53             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
 54         </div>
 55     </div>
 56     <div class="article">
 57         <div class="article-title">
 58             <span class="title">尋人啓事</span>
 59             <span class="date">2019/09/06</span>
 60         </div>
 61         <div class="article-body">
 62             <p>
 63                尋人啓事事成以後,贈送100萬美金
 64             </p>
 65         </div>
 66         <div class="article-bottom">
 67             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
 68             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
 69         </div>
 70     </div>
 71     <div class="article">
 72         <div class="article-title">
 73             <span class="title">尋人啓事</span>
 74             <span class="date">2019/09/06</span>
 75         </div>
 76         <div class="article-body">
 77             <p>
 78                尋人啓事事成以後,贈送100萬美金
 79             </p>
 80         </div>
 81         <div class="article-bottom">
 82             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
 83             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
 84         </div>
 85     </div>
 86     <div class="article">
 87         <div class="article-title">
 88             <span class="title">尋人啓事</span>
 89             <span class="date">2019/09/06</span>
 90         </div>
 91         <div class="article-body">
 92             <p>
 93                尋人啓事事成以後,贈送100萬美金
 94             </p>
 95         </div>
 96         <div class="article-bottom">
 97             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
 98             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
 99         </div>
100     </div>
101     <div class="article">
102         <div class="article-title">
103             <span class="title">尋人啓事</span>
104             <span class="date">2019/09/06</span>
105         </div>
106         <div class="article-body">
107             <p>
108                尋人啓事事成以後,贈送100萬美金
109             </p>
110         </div>
111         <div class="article-bottom">
112             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
113             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
114         </div>
115     </div>
116     <div class="article">
117         <div class="article-title">
118             <span class="title">尋人啓事</span>
119             <span class="date">2019/09/06</span>
120         </div>
121         <div class="article-body">
122             <p>
123                尋人啓事事成以後,贈送100萬美金
124             </p>
125         </div>
126         <div class="article-bottom">
127             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
128             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
129         </div>
130     </div>
131     <div class="article">
132         <div class="article-title">
133             <span class="title">尋人啓事</span>
134             <span class="date">2019/09/06</span>
135         </div>
136         <div class="article-body">
137             <p>
138                尋人啓事事成以後,贈送100萬美金
139             </p>
140         </div>
141         <div class="article-bottom">
142             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
143             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
144         </div>
145     </div>
146     <div class="article">
147         <div class="article-title">
148             <span class="title">尋人啓事</span>
149             <span class="date">2019/09/06</span>
150         </div>
151         <div class="article-body">
152             <p>
153                尋人啓事事成以後,贈送100萬美金
154             </p>
155         </div>
156         <div class="article-bottom">
157             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
158             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
159         </div>
160     </div><div class="article">
161         <div class="article-title">
162             <span class="title">尋人啓事</span>
163             <span class="date">2019/09/06</span>
164         </div>
165         <div class="article-body">
166             <p>
167                尋人啓事事成以後,贈送100萬美金
168             </p>
169         </div>
170         <div class="article-bottom">
171             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
172             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
173         </div>
174     </div><div class="article">
175         <div class="article-title">
176             <span class="title">尋人啓事</span>
177             <span class="date">2019/09/06</span>
178         </div>
179         <div class="article-body">
180             <p>
181                尋人啓事事成以後,贈送100萬美金
182             </p>
183         </div>
184         <div class="article-bottom">
185             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
186             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
187         </div>
188     </div><div class="article">
189         <div class="article-title">
190             <span class="title">尋人啓事</span>
191             <span class="date">2019/09/06</span>
192         </div>
193         <div class="article-body">
194             <p>
195                尋人啓事事成以後,贈送100萬美金
196             </p>
197         </div>
198         <div class="article-bottom">
199             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
200             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
201         </div>
202     </div>
203     <div class="article">
204         <div class="article-title">
205             <span class="title">尋人啓事</span>
206             <span class="date">2019/09/06</span>
207         </div>
208         <div class="article-body">
209             <p>
210                尋人啓事事成以後,贈送100萬美金
211             </p>
212         </div>
213         <div class="article-bottom">
214             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
215             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
216         </div>
217     </div>
218     <div class="article">
219         <div class="article-title">
220             <span class="title">尋人啓事</span>
221             <span class="date">2019/09/06</span>
222         </div>
223         <div class="article-body">
224             <p>
225                尋人啓事事成以後,贈送100萬美金
226             </p>
227         </div>
228         <div class="article-bottom">
229             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
230             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
231         </div>
232     </div><div class="article">
233         <div class="article-title">
234             <span class="title">尋人啓事</span>
235             <span class="date">2019/09/06</span>
236         </div>
237         <div class="article-body">
238             <p>
239                尋人啓事事成以後,贈送100萬美金
240             </p>
241         </div>
242         <div class="article-bottom">
243             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
244             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
245         </div>
246     </div><div class="article">
247         <div class="article-title">
248             <span class="title">尋人啓事</span>
249             <span class="date">2019/09/06</span>
250         </div>
251         <div class="article-body">
252             <p>
253                尋人啓事事成以後,贈送100萬美金
254             </p>
255         </div>
256         <div class="article-bottom">
257             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
258             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
259         </div>
260     </div>
261     <div class="article">
262         <div class="article-title">
263             <span class="title">尋人啓事</span>
264             <span class="date">2019/09/06</span>
265         </div>
266         <div class="article-body">
267             <p>
268                尋人啓事事成以後,贈送100萬美金
269             </p>
270         </div>
271         <div class="article-bottom">
272             <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span>
273             <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span>
274         </div>
275     </div>
276 
277 </div>
278 </body>
279 </html>

博客頁面搭建.html

賞心悅目圖.jpg

 1 01 內容回顧.mp4
 2 02 博客園做業講解.mp4
 3 03 JS簡介.mp4
 4 04 JS變量.mp4
 5 05 數值類型.mp4
 6 06 字符類型.mp4
 7 07 布爾值類型.mp4
 8 08 對象類型.mp4
 9 09 運算符.mp4
10 10 流程控制.mp4
11 11 函數.mp4
12 12 函數全局與局部變量.mp4
13 13 內置對象.mp4

1.JavaScript前端編程語言

1.JS引入方式二.png
javascript

 1 javascript(JS) 前端編程語言
 2 
 3     儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：
 4 
 5             核心（ECMAScript）
 6             文檔對象模型（DOM） Document object model (整合js，css，html)
 7             瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
 8             簡單地說，ECMAScript 描述了JavaScript語言自己的相關內容。
 9 
10             JavaScript 是腳本語言
11             JavaScript 是一種輕量級的編程語言。
12 
13             JavaScript 是可插入 HTML 頁面的編程代碼。
14 
15             JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。
16 
17             JavaScript 很容易學習。
18 
19     js跟Java沒有半毛錢關係,純粹是爲了蹭當時紅極一時java的熱度
20 
21     引入js的兩種方式
22         script 標籤內直接寫
23         script src屬性導入外部文件
24 
25     js註釋
26         單行註釋       //
27         多行註釋    /**/
28 
29     js語言是以分號(;)做爲語句的結束符
30         通常狀況下不加分號也不會報錯
31 
32     JS 與Python對應數據類型
33 
34         數值類型 int和float
35         字符類型 str
36         布爾值類型 bool
37         對象類型 list和dict
38         undefined(None)
39         Symbol
40         ES6新引入了一種新的原始數據類型（Symbol），表示獨一無二的值。它是JavaScript語言的第7種數據類型。
41             typeof "abc"  // "string"
42             typeof null  // "object"
43             typeof true  // "boolean"
44             typeof 123 // "number"

1.JS簡介

1.print操做打印.pngcss

1.書寫JS的界面.pnghtml

2.JS變量
2.模板語法.png前端

 1 變量:
 2        在js中聲明變量須要使用關鍵詞聲明
 3        var name = 'jason'
 4        ECMA6最新語法
 5        let name = 'jason'
 6        var 與 let的區別
 7             var做用的是全局
 8             let做用的是局部  能夠保證變量的不被隨意修改
 9 
10 
11        在JS中 是有真正意義上的常量
12        聲明常量關鍵字 const
13        const pi = 3.1415926
14 
15        JS 中變量的命名
16             數字 字母 下劃線(_) $
17             數字不能開頭,關鍵字不能做爲變量名
18 
19             ps:注意：
20                 變量名是區分大小寫的。
21                 推薦使用駝峯式命名規則。
22                 保留字不能用作變量名。
23 
24        變量名的命名規範
25             JS中推介你使用駝峯式命名
26                 userName
27                 dataOfDb
28                 ageOfJason
29             python 中推介使用下劃線
30                 age_of_jason

2.JS變量

 1 數值類型
 2     數據類型(整型和浮點型)
 3         JS中將整型和浮點型統稱爲數值類型
 4 
 5         NaN(即Not a Number):是數值類型 可是表示的意思是 不是一個數字
 6 
 7     例:
 8         var x; 此時x是underined
 9         var x=1; 此時x是數字
10         var x='Alex' 此時x是字符串
11 
12     JavaScript不區分整型和浮點型，就只有一種數字類型。
13 
14         var a = 12.34;
15         var b = 20;
16         var c = 123e5; (e5限定0的位數) // 12300000
17         var d = 123e-5;  (e-5限定小數點的位數)// 0.00123
18 
19 2.經常使用方法
20     parseInt("123")  //返回123
21     parseInt("ABC")  //返回NaN,NaN屬性是表明非數字值的特殊值。該屬性用於指示某個值不是數字。

3.數值類型

 1 字符類型(字符串)
 2     JS中字符串的拼接推薦你使用加號(Python不推薦使用加號由於效率極低)
 3 
 4     undefined
 5     對象
 6         null    爲空
 7         數組 []   類比Python中列表
 8         自定義對象 {}        類比Python中字典
 9 
10 
11 2.經常使用方法:
12     1.拼接字符串通常使用「+」
13     var a = "Hello"
14     var b = "world;
15     var c = a + b;
16     console.log(c);  // 獲得Helloworld
17 
18 ps:
19     注意：
20 
21         若是模板字符串中須要使用反引號，則在其前面要用反斜槓轉義。
22 
23         JSHint啓用ES6語法支持:/* jshint esversion: 6 */
24 
25 
26 經常使用方法:
27     .length 返回長度
28     .trim() 移除空白
29     .trimLeft() 移除左邊空白
30     .trimRight() 移除右邊空白
31     .charAt(n) 返回第n個字符
32     .concat(value,...) 拼接
33     .indexOf(substring,start) 子序列位置
34     .substring(from,to)根據索引獲取子序列
35     .slice(start,end)切片
36     .toLowerCase() 小寫
37     .toUpperCase() 大寫
38     .split(delimiter,limit)分割

4.字符類型

 1 布爾值
 2         js中的布爾值都是全小寫
 3             true
 4             false
 5         布爾值爲false的有
 6             ""(空字符串),   0,  null,   undefined,  NaN
 7 
 8 2.null和undefined
 9     null :清空  undefined 未賦值
10        null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null;
11 undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。
12 null表示變量的值是空(null能夠手動清空一個變量的值，使得該變量變爲object類型，值爲null)，undefined則表示只聲明瞭變量，但尚未賦值。

5.布爾值類型

6.forEash方法.pngjava

 1 對象(Object)
 2     JavaScript 中的全部事物都是對象：
 3         字符串、str
 4         數值、int float
 5         數組、[],{}
 6         函數
 7         自定義對象
 8             ...此外，JavaScript 容許自定義對象。
 9 
10     JavaScript 提供多個內建對象，好比 String、Date、Array 等等。
11 
12     對象只是帶有屬性和方法的特殊數據類型。
13 
14 
15 1.數組:類比[]
16     做用:使用單獨的變量名來存儲一系列的數值
17     例:
18     var a = [123, "ABC"];
19     console.log(a[1]);  // 輸出"ABC"
20 
21 2.經常使用方法
22     .length 數組的大小
23     .push(ele) 尾部追加元素
24     .pop() 獲取尾部元素
25     .unshift(ele) 頭部插入元素
26     .shift() 頭部移除元素
27     .slice(start,end)切片
28     .reverse()反轉
29     .join(sep) 將數組元素拼接成字符串
30     .concat(val,..)鏈接數組
31     .sort排序
32     .forEach()將數組中的每一個元素傳遞給回調函數
33     .splice() 刪除元素,並向數組添加新元素
34     .map() 返回一個數組元素調回函數處理後的值的新數組
35 
36   python 中列表增刪元素的方法
37     append 尾增
38     insert 指定索引插
39     extend for循環挨個插
40 
41     pop(index) 索引
42     remove(target) 指定刪除的元素
43     del 列表索引

6.對象類型

6.對象類型.pngpython

6.對象類型數組[].png正則表達式

 1 1.+ - * / %(求餘) ++ --
 2     例:
 3     var x=10;
 4     var res1=x++;
 5     var res2=++x;
 6 
 7     res1;
 8     10
 9     res2;
10     12
11 
12     ps:
13         這裏因爲的x++和++x在出現賦值運算式，
14         x++會先賦值再進行自增1運算，
15         而++x會先進行自增運算再賦值！
16 
17 2.比較運算符
18     > >= < <= != == === !==
19         1 == 「1」  // true  弱等於
20         1 === "1"  // false 強等於
21         //上面這張狀況出現的緣由在於JS是一門弱類型語言(會自動轉換數據類型)，因此當你用兩個等號進行比較時，JS內部會自動先將
22         //數值類型的1轉換成字符串類型的1再進行比較，因此咱們之後寫JS涉及到比較時儘可能用三等號來強制限制類型，防止判斷錯誤
23 
24 3.邏輯運算符
25     && || !
26 4.賦值運算符
27     = += -= *= /=

7.運算符

 1 流程控制
 2     1.if-else
 3         var a = 10;
 4         if (a > 5){
 5           console.log("yes");
 6         }else {
 7           console.log("no");
 8         }
 9     2.switch中的case子句一般都會加break語句，不然程序會繼續執行後續case中的語句。
10     switch
11     var day = new Date().getDay();
12     switch (day) {
13       case 0:
14       console.log("Sunday");
15       break;
16       case 1:
17       console.log("Monday");
18       break;
19     default:
20       console.log("...")
21     }
22     3.for
23     for (var i=0;i<10;i++) {
24         console.log(i);
25     }
26     4.while
27     var i = 0;
28     while (i < 10) {
29       console.log(i);
30       i++;
31     }
32     5.三元運算符
33     var a = 1;
34     var b = 2;
35     var c = a > b ? a : b
36     //這裏的三元運算順序是先寫判斷條件a>b再寫條件成立返回的值爲a,條件不成立返回的值爲b;三元運算能夠嵌套使用；
37     var a=10,b=20;
38     var x=a>b ?a:(b=="20")?a:b;
39     x

8.流程控制

 1 函數定義
 2 JavaScript中的函數和Python中的很是相似，只是定義方式有點區別。
 3 
 4 語法:
 5 // 普通函數定義
 6 function f1() {     //function 關鍵字 類比def  f1函數名 () 傳參
 7   console.log("Hello world!");  # 函數體
 8 }
 9 
10 // 帶參數的函數
11 function f2(a, b) {   //(a,b) 參數
12   console.log(arguments);  // 內置的arguments對象
13   console.log(arguments.length);
14   console.log(a, b);
15 }
16 
17 // 帶返回值的函數
18 function sum(a, b){
19   return a + b;     //return  返回值
20 }
21 sum(1, 2);  // 調用函數
22 
23 // 匿名函數方式
24 var sum = function(a, b){  function 相似於lambda
25   return a + b;
26 }
27 sum(1, 2);
28 
29 // 當即執行函數 書寫當即執行的函數，首先先寫兩個括號()()這樣防止書寫混亂
30 (function(a, b){
31   return a + b;
32 })(1, 2);  // 傳參
33 
34 ps:
35     //一個參數
36     var f = v => v;
37     // 等同於
38     var f = function(v){
39       return v;
40     }
41     //多個參數
42     var f = () => 5;
43     // 等同於
44     var f = function(){return 5};
45 
46     var sum = (num1, num2) => num1 + num2;
47     // 等同於
48     var sum = function(num1, num2){
49       return num1 + num2;  //這裏的return只能返回一個值，若是想返回多個值須要本身手動給他們包一個數組或對象中
50     }
51 ps:函數只能返回一個值，若是要返回多個值，只能將其放在數組或對象中返回
52 
53 ps:
54 函數中的arguments參數至關於Python中 args
55     function add(a,b){
56       console.log(a+b);
57       console.log(arguments.length);
58     　console.log(arguments[0]);//arguments至關於將出傳入的參數所有包含，這裏取得就是第一個元素1
59     }
60 
61     add(1,2)

9.函數

 1 函數的全局變量和局部變量
 2     局部變量：
 3 
 4         在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。
 5 
 6     全局變量：
 7 
 8         在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。
 9 
10     變量生存週期：
11 
12         JavaScript變量的生命期從它們被聲明的時間開始。
13 
14         局部變量會在函數運行之後被刪除。
15 
16         全局變量會在頁面關閉後被刪除。
17 
18     做用域
19         首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。與python做用域關係查找如出一轍！
20 
21     例:
22         詞法分析過程：
23             一、分析參數，有一個參數，造成一個 AO.age=undefine;
24             2、分析變量聲明，有一個 var age, 發現 AO 上面已經有一個 AO.age，所以不作任何處理
25             三、分析函數聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...};
26 
27             最終，AO上的屬性只有一個age，而且值爲一個函數聲明
28 
29             執行過程：
30             注意：執行過程當中全部的值都是從AO對象上去尋找
31 
32             1、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，因此第一個輸出的一個函數
33             二、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，因此在第二個輸出的是 2
34             三、同理第三個輸出的仍是22, 由於中間再沒有改變age值的語句了

10.函數全局與局部變量

  1 自定義對象
  2 JavaScript的對象（Object）
  3     本質上是鍵值對的集合（Hash結構），
  4     可是隻能用字符串做爲鍵。
  5 
  6 例:
  7     var a = {"name": "Alex", "age": 18};
  8     console.log(a.name);
  9     console.log(a["age"]);
 10 
 11     for遍歷對象中全部的內容
 12     var a = {"name": "Alex", "age": 18};
 13     for (var i in a){
 14       console.log(i, a[i]);
 15     }
 16 
 17 建立對象
 18     var person=new Object();  // 建立一個person對象
 19     person.name="Alex";  // person對象的name屬性
 20     person.age=18;  // person對象的age屬性
 21 
 22     ps:
 23         ES6中提供了Map數據結構。它相似於對象，
 24         也是鍵值對的集合，
 25         可是「鍵」的範圍不限於字符串，
 26         各類類型的值（包括對象）均可以當作鍵。
 27 
 28         即，Object結構提供了「字符串--值」
 29         的對應，Map結構提供了「值--值」的對應，
 30         是一種更完善的Hash結構實現。
 31 
 32 
 33     例:map
 34     var m = new Map();
 35     var o = {p: "Hello World"}
 36 
 37     m.set(o, "content"}
 38     m.get(o)  // "content"
 39 
 40     m.has(o)  // true
 41     m.delete(o)  // true
 42     m.has(o) // false
 43 
 44 
 45     JS 面向對象之繼承 -- 擴展
 46         // 父類構造函數
 47         var Car = function (loc) {
 48           this.loc = loc;
 49         };
 50 
 51         // 父類方法
 52         Car.prototype.move = function () {
 53           this.loc ++;
 54         };
 55 
 56         // 子類構造函數
 57         var Van = function (loc) {
 58           Car.call(this, loc);
 59         };
 60 
 61         // 繼承父類的方法
 62         Van.prototype = Object.create(Car.prototype);
 63         // 修復 constructor
 64         Van.prototype.constructor = Van;
 65         // 擴展方法
 66         Van.prototype.grab = function () {
 67           /* ... */
 68         };
 69 
 70 1.date對象 -- 日期
 71     //方法1：不指定參數
 72     var d1 = new Date();
 73     console.log(d1.toLocaleString());
 74     //方法2：參數爲日期字符串
 75     var d2 = new Date("2004/3/20 11:12");
 76     console.log(d2.toLocaleString());
 77     var d3 = new Date("04/03/20 11:12");
 78     console.log(d3.toLocaleString());
 79     //方法3：參數爲毫秒數
 80     var d3 = new Date(5000);
 81     console.log(d3.toLocaleString());
 82     console.log(d3.toUTCString());
 83 
 84     //方法4：參數爲年月日小時分鐘秒毫秒
 85     var d4 = new Date(2004,2,20,11,12,0,300);
 86     console.log(d4.toLocaleString());  //毫秒並不直接顯示
 87 
 88 date對象的經常使用方法:
 89     var d = new Date();
 90     //getDate()                 獲取日
 91     //getDay ()                 獲取星期
 92     //getMonth ()               獲取月（0-11）
 93     //getFullYear ()            獲取完全年份
 94     //getYear ()                獲取年
 95     //getHours ()               獲取小時
 96     //getMinutes ()             獲取分鐘
 97     //getSeconds ()             獲取秒
 98     //getMilliseconds ()        獲取毫秒
 99     //getTime ()                返回累計毫秒數(從1970/1/1午夜)
100 
101 2.JSON對象
102     parse =loads
103     stringify = dumps
104 
105     var str1 = '{"name": "Alex", "age": 18}';
106     var obj1 = {"name": "Alex", "age": 18};
107     // JSON字符串轉換成對象
108     var obj = JSON.parse(str1);
109     // 對象轉換成JSON字符串
110     var str = JSON.stringify(obj1);
111 3.RegEXP對象
112     // 定義正則表達式兩種方式
113     var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
114     var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
115 
116     // 正則校驗數據
117     reg1.test('jason666')
118     reg2.test('jason666')
119 
120     /*第一個注意事項，正則表達式中不能有空格*/
121 
122     // 全局匹配
123     var s1 = 'egondsb dsb dsb';
124     s1.match(/s/)
125     s1.match(/s/g)
126     var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
127     reg2.test('egondsb');
128     reg2.test('egondsb');
129     reg2.lastIndex;
130     /*第二個注意事項，全局匹配時有一個lastIndex屬性*/
131 
132     // 校驗時不傳參數
133     var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
134     reg2.test();
135     reg2.test(undefined);
136 
137     var reg3 = /undefined/;
138     reg3.test();

11.內置函數

11.自定義對象方法er.png編程

11.自定義對象方法一.png後端

2.代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>兩種引入JS的方式-方式一</title>
 6     <script>
 7         // <!--alert:彈出窗口直接顯示-->
 8         alert(123)
 9     </script>
10 </head>
11 <body>
12 
13 </body>
14 </html>

1.兩種引入JS的方式方法一.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>兩種引入JS的方式</title>
 6     <script src="myjs.js"></script>
 7 </head>
 8 <body>
 9 
10 </body>
11 </html>

1.兩種引入JS的方式方法二.html

 1 # l = [111,222,333,444]
 2 # l = str(l)
 3 # res = '|'.join(l)
 4 # print(res)
 5 # [|1|1|1|,| |2|2|2|,| |3|3|3|,| |4|4|4|]
 6 
 7 # map zip filter reduce sort sorted
 8 
 9 # map 地圖(映射到對應位置)
10 # l = [11,22,33,44]
11 # print(list(map(lambda x:x+1,l)))
12 # [12, 23, 34, 45]
13 
14 
15 # zip 拉鍊
16 # l = [1,2,3,4]
17 # l1 = ['a','b','c']
18 # print(list(zip(l,l1)))
19 # [(1, 'a'), (2, 'b'), (3, 'c')]
20 
21 # filter  過濾器
22 # l = [1,2,3,4,5,6,7,8]
23 # print(list(filter(lambda x:x>3,l)))
24 # [4, 5, 6, 7, 8]
25 
26 # reduce 減小
27 from functools import reduce
28 # l = [1,2,3,4,5,6]
29 # print(reduce(lambda x,y:x+y,l,100))
30 # 121  求和
31 # print(5 == '5')  # False

3.test.py

1 //檢查代碼側顯示
2 console.log("hello world!");
3 // 相似於python的print('hello world');
4 //操做打印
5 // print('hello world');

View Code

總結

  1 HTML
  2     一對標籤 標記語言
  3     XML 也是標記語言
  4     h1-h6 標題標籤
  5     i(斜體) s(刪除) ,b(加粗) u(下劃線)
  6     br hr
  7     div span 用於頁面佈局
  8     p 文字段落
  9     a href 網址連接
 10         錨點 a href="" 默認跳轉到頂點
 11             a href="#d1" 跳轉到指定標籤
 12         target(目標)  跳轉
 13             <a href="https://www.baidu.com " target="_self">前往百度</a>
 14             默認_self 本身窗口 直接跳
 15             -blank 新建窗口(另建新窗口)
 16     img src 圖片地址/url後綴/二進制數據
 17         alt 圖片加載不出來,提示信息
 18         title 鼠標懸浮,默認提示信息
 19 
 20     1.標籤的分類
 21         塊兒級標籤
 22         行內標籤
 23 
 24 
 25     表格標籤:
 26         table :表
 27             thead  : 頭
 28                 tr  :行
 29                     td(單元格)/th(標題)  :
 30             tbody :內容
 31                 tr
 32                     td
 33     提交方式:
 34         get 獲取資源
 35             get請求也能夠攜帶數劇
 36             跟在url的後面
 37                 ip:post?
 38                 xxx=yyy&zzz=qqq
 39                 1.get可以攜帶的參數大小 有限制
 40                 2.數據是直接可見
 41         post:提交數據
 42             跟在請求體中
 43 
 44     HTTP協議
 45         1.四大特性
 46             1.基於請求響應
 47             2.基於ip和tcp 之上做用於應用層之上的傳輸
 48             3.無狀態
 49             4.無鏈接
 50         2.數據格式
 51             首行()HTTP協議 get.post |響應代碼
 52             頭(一大堆鍵值對)
 53             體(請求攜帶密碼保密| 響應經過HTTP 返回前端界面)
 54 
 55         3.響應狀態碼
 56             1xx 接收成功,繼續傳輸
 57             2xx 服務接受請求成功 ,你的請求成功
 58             3xx 服務器重定向 (登陸跳轉到登陸界面)
 59             4xx 權限不足403 不存在404
 60             5xx 服務器內部代碼錯誤
 61 
 62 
 63     form表單
 64         可以獲取用戶輸入並提交後端
 65         action :控制數據提交地址
 66             1.不寫狀況下,默認就當往當前頁面所在
 67             2.全寫,指名道姓提交
 68             3.後綴/index 補全你本網站ip 和 port
 69         mothed:提交方式
 70 
 71         form 表單默認是get請求
 72 
 73     enctype:控制先後端提交數據的編碼格式
 74             form 表單默認是urlencode格式
 75             若是想要form表單提交文件
 76             須要改爲formdata
 77 
 78     input 標籤
 79         type
 80             text
 81             password
 82             date
 83             radio checked 默認選中狀態 加之後默認爲已經選中狀態 反之,未選中狀態
 84             checkbox checked
 85             file
 86             submit
 87             reset
 88             buttom
 89     select 下拉框
 90         一個選項就是一個個的option標籤
 91 
 92     textarea 大段文本
 93         1.獲取用戶輸入的標籤都應該有name屬性
 94             用戶輸入的值會被存爲標籤 value 屬性中
 95         2.觸發form 表單提交數據 的按鈕
 96             1.input 標籤type = submit
 97             2.button 標籤
 98 
 99 css
100     1.如何查找標籤
101         基本選擇器
102             標籤選擇器 div
103             類選擇器 .c1
104             id選擇器 #d1
105             通用選擇器 *
106 
107         後代選擇器
108             div span 後代
109             div>span 子代
110             div~span 兄弟
111             div+span 毗鄰
112         p:after
113          /*after 在標籤內容後添加content修飾過的內容*/
114         p:after{
115             content: "?";
116             color: red;
117         }
118         a:hover  鼠標懸浮顯示
119 
120     操做樣式
121         字體樣式
122             font-size
123         文字屬性
124             text-decoration 字體
125             text-align 居中
126             list-style-type:none  去除醜陋部分
127         背景
128             border-radius: 50%;畫圓
129 
130         盒子模型
131             margin
132             border
133             padding
134             content
135 
136         浮動float
137             浮動的元素所有都是脫離文檔流的
138 
139         clear 屬性
140             清除浮動形成的父標籤塌陷
141             .clearfix:after{
142                 content:"";
143                 display:block;
144                 clear:both;
145             }
146 
147         定位:
148             相對定位
149                 relative
150             絕對定位 前提相對於已經定義過的父標籤
151                 absolute
152             固定定位
153                 fixed
154 
155         z-index 模態框
156 
157         opacity 透明度
158 
159 
160 JS
161     註釋:
162     // 單行註釋
163     /**/ 多行註釋
164 
165     引入方式:
166         alter() 彈出窗口按時
167         console.log() 在檢查console顯示
168 
169     變量:
170         var /let
171         const 常量 聲明以後,沒法修改
172 
173     數據類型
174         數值類型
175             parseInt 轉整型
176             parseFloat
177                 NaN 數值類型 意思是否是一個數字
178         字符類型
179             **模板字符串
180             asdsd
181             asdsad
182             ${name} ${age}
183         undefined和null比較
184             var name; undefined null 清空
185         布爾值類型
186             true
187             false
188         對象
189             null
190             數組[]
191             自定義對象 {}
192         symbol 相似id具備惟一性
193 
194         JSON對象
195             JSON.parse   >>>> loads
196             JSON.stringify >>> dumps
197         Date對象
198         RegExg正則對象
199             1.正則表達式不要出現空格
200             2.全局模式/g 會有一個lastindex 屬性
201             3.當你不匹配任何內容 默認匹配的是undefined
202 
203         JS中使用內置對象 有兩種方式
204             1.第一種 直接使用關鍵詞new
205             2.直接按照特定的數據格式{}