當前位置：首頁 > 编程语言 > python >内容正文

python

python web开发 JavaScript基础

發布時間：2024/7/5 python 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 python web开发 JavaScript基础小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- 1. script 標簽
- 2. 字面量、變量
- 3. 數據類型
- 4. 運算符
- 5. if 條件
- 6. switch分支
- 7. for循環
- 8. while循環
- 9. break， continue
- 10. 函數
- 11. JS事件
- 12. 引入JS的兩種方式
- - 12.1 HTML頁面嵌入
  - 12.2 引入外部JS文件

learning from 《python web開發從入門到精通》

JavaScript 跨平臺、面向對象的 腳本語言，能使網頁產生交互行為，服務端版本有 Node.js
前端技術主要指：HTML（定義內容）, CSS（描述樣式）, JavaScript（描述行為）

1. script 標簽

<script> 腳本 </script>，腳本數量不限，可位于 body 部分或 head 部分，或同時存在

2. 字面量、變量

字面量：
數字3.14， 1001， 12e5
字符串"michael"，'michael'（兩種引號都可）
數組 Array[1,2,3,4,5]
對象 {name:"michael", age:18, hobby:"coding"}
函數 function myFunc(a, b) {return a+b;}
變量，var 定義變量，= 賦值（必須以字母，$，_開始，大小寫敏感）

3. 數據類型

值類型，引用數據類型
值類型（基本類型）：字符串，數字，布爾，空null，未定義undefined，唯一標識符symbol
引用數據類型：數組，對象，函數

字符串 var name="michael"; var sentence="my name is 'michael', nice to meet you!";數值 var x = 3.14; var y = 12e-6;布爾 var x = True; var y = False;空 x=null; 清空變量的值數組 var hobby = new Array(); hobby[0] = "basketball"; hobby[1] = "singing"; hobby[2] = "playing games";var hobby=new Array("a", "b", "c");var hobby=["a", "b", "c"];對象 var person = {name:"michael", age:18}; 空格換行沒有影響對象尋址: 兩種方式 name = person.name age = person["age"]

聲明變量類型

var name = new String; var x = new Number; var y = new Boolean; var cars = new Array; var person = new Object;

4. 運算符

算術運算符，賦值運算符（跟c++一致）
比較運算符多了===（值和類型均一樣）!== （值，類型至少有一個不一樣）

5. if 條件

同c++，if和if ... else和if ... else if ... else

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>條件分支</title> </head> <body><script>var score = 78;if (score >= 90) {document.write("優秀");}else if (score >= 80) {document.write("良好");}else if (score >= 60) {document.write("及格");}else {document.write("不及格");} </script></body> </html>

6. switch分支

同c++

7. for循環

c++類似的形式

for in 形式

8. while循環

同c++

while(condition){ }
do{ } while(condition);

9. break， continue

同c++

break 跳出當前循環
continue跳過當次循環迭代，進行下一次迭代

10. 函數

function funcName() { // 執行代碼 }

帶參數的函數

帶返回值的函數 return

<div id="myfunction1"></div> <script>function myFunc1(x, y){return x * y;}document.getElementById("myfunction1").innerHTML = myFunc1(3, 6); </script>

11. JS事件

如：瀏覽行為，用戶行為
常見事件：HTML加載完成，input 字段發生變化，按鈕被單擊

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>按鈕事件</title> </head> <body><p>單擊按鈕獲取當前時間: 執行 <em>displayDate()</em> 函數。</p> <button onclick="displayDate()">獲取時間</button> <script>function displayDate() {var d = new Date(); // 實例化日期var now = d.toLocaleString(); // 轉換為本地時間格式document.getElementById("here").innerHTML = now;//寫入 id 為 here的元素中} </script> <p id="here"></p></body> </html>

12. 引入JS的兩種方式

12.1 HTML頁面嵌入

如上所示 <script> function... </script> 嵌入

12.2 引入外部JS文件

<script src= url > </script> 指向外部 url .js 文件

myscript.js

function display123(){alert("hello Michael!"); } <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>外部引用JS文件</title><script src="myscript.js"></script></head> <body><button onclick="display123()">點擊我！</button></body> </html>

總結

以上是生活随笔為你收集整理的python web开发 JavaScript基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： LeetCode MySQL 1607.
下一篇： LeetCode 1819. 序列中不同