巨蟒python全棧開發數據庫前端5:JavaScript1

時間 2019-11-29

標籤巨蟒 python 開發數據庫前端 javascript1 javascript 欄目 Python 简体版

原文原文鏈接

1.js介紹&變量&基礎數據類型css

2.類型查詢&運算符&if判斷&for循環html

3.while循環&三元運算符前端

4.函數java

5.今日總結node

1.js介紹&變量&基礎數據類型python

js介紹es6

(1)什麼是JavaScript&一些歷史&ECMASCRIPT和JavaScript的關係?數據庫

JavaScript是一門編程語言,既能夠寫前端,又能夠寫後端.可是JavaScript有不少槽點,所以咱們如今更適合作前端的開發.(以如今的認知水平)編程

(2)後端

JavaScript是網景公司(Netscape公司)開發的,可是如今倒閉了,被美國一家公司收購.

當年靜態網頁已經遠遠知足不了人們對網頁的需求,由此,js應運而生,知足了人們對動態網頁的追求.

js起名字也是蹭了當年java的熱度,二者沒有太大的聯繫

(3)

網景公司最後決定將JavaScript提交給國際標準化組織ECMA，但願這門語言可以成爲國際標準。

次年，ECMA發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲ECMAScript，這個版本就是1.0版。

該標準一開始就是針對JavaScript語言制定的，可是沒有稱其爲JavaScript，有兩個方面的緣由。一是商標，JavaScript自己已被Netscape註冊爲商標。二是想體現這門語言的制定者是ECMA，而不是Netscape，這樣有利於保證這門語言的開發性和中立性。

所以,ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。

(4)

網景公司的大神10天寫出來的語言,龜叔聖誕節寫了一門python.

JavaScript能夠寫前端/後端,能夠鏈接數據庫

可是JavaScript槽點太多,而且不報錯,因此很難寫

JavaScript輔助咱們寫項目

(5)

儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：

核心（ECMAScript）
文檔對象模型（DOM） Document object model (整合js，css，html)
瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

(6)

簡單地說，ECMAScript 描述了JavaScript語言自己的相關內容。

　　JavaScript 是腳本語言
　　JavaScript 是一種輕量級的編程語言。後來出現了node.js，能夠做爲後端語言來開發項目，js是一個既能作前端又能作後端的語言，可是js這個做者用了10天就開發了這麼個語言，因此寫的不是很完善，這個語言有不少的槽點，後面學習起來你們就知道啦。

　　JavaScript 是可插入 HTML 頁面的編程代碼。

　　JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。

　　JavaScript 很容易學習。

JavaScript引入方式

　　　　方式一:Script標籤內寫代碼

在head標籤裏面能夠寫，在body標籤裏面也能夠寫，放到head標籤裏面和放到body標籤裏面到底有什麼區別，咱們後續在講~
<script>
  // 在這裏寫你的JS代碼
　//console.log('你好,我是JavaScript!！')     #f12建打開瀏覽器的調試窗口，而後在console這個調試臺就能看到這個內容了
  alert('你好,我是JavaScript！')   #這個是瀏覽器窗口一打開我們這個文件，就彈出一個窗口
</script>

具體代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
  // 在這裏寫你的JS代碼
　//console.log('你好,我是JavaScript！') #f12鍵打開瀏覽器的調試窗口，而後在console這個調試臺就能看到這個內容了
   alert('你好,我是JavaScript！')
  // #這個是瀏覽器窗口一打開我們這個文件，就彈出一個窗口
    </script>
</head>
<body>

</body>
</html>

代碼以下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
  // 在這裏寫你的JS代碼
　   console.log('你好,我是JavaScript！')
  // #f12鍵打開瀏覽器的調試窗口，而後在console這個調試臺就能看到這個內容了
   // alert('你好,我是JavaScript！')
  // #這個是瀏覽器窗口一打開我們這個文件，就彈出一個窗口
    </script>
</head>
<body>

</body>
</html>

在開始調試的瀏覽器上,按F12=>console,能夠看見了

方式二:引入額外的JS文件(注意這個通常是在同一級目錄下)

html中的完整代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="07js初識.js">

    </script>
</head>
<body>

</body>
</html>

html

js完整代碼:

alert('你好啊!');

JavaScript

核心部分

<script src="myscript.js"></script>

myscript.js文件

alert('你好啊!');  #注意單詞的寫法,以及須要加上;

結果顯示:

注意:彈窗的alert()在console不顯示,而 console.log()在console顯示

代碼也能夠直接在console寫,課上代碼通常在瀏覽器上寫就好了,瀏覽器內置的js解釋器

JavaScript語言規範

註釋:

// 這是單行註釋

/*
這是
多行註釋
*/

結束符:

　　　　JavaScript中的語句要以分號（;）爲結束符。也就是說和縮進不要緊了

　　　　注意區分:python不是以分號結尾的

JavaScript語言基礎

　　　　變量聲明（咱們就經過瀏覽器自帶的那個調試臺來寫吧~~）

　　　　1.JavaScript的變量名可使用_，數字，字母，$組成，不能以數字開頭。

　　　　2.聲明變量使用 var 變量名; 的格式來進行聲明

var name = "Alex";
也能夠分兩步，聲明變量var name;而後name='Alex'，可是一般咱們都是一步寫完
var age = 18;

　　　　注意：

　　　　　　變量名是區分大小寫的。

　　　　　　推薦使用駝峯式命名規則。首字母大寫

　　　　　　保留字不能用作變量名。

ES6新增const用來聲明常量。一旦聲明，其值就不能改變。這個東西就是爲了定義一個固定的常量，供你們使用，這個常量不會改變

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

常量測試:

再次補充：保留字列表，不用硬記，寫多了天然就知道了

測試1:

測試2:(es6新特性,如今瀏覽器也嵌套了)let也是不可修改的

JavaScript數據類型

　　JavaScript擁有動態類型（python也是動態的）

var x;  // 此時x是undefined  靜態語言好比c：建立變量的時候，要指定變量的類型，python3.6也出現了類型註解的新特性def func(x:int,y:int) --> int: return x + y，意思是參數是int類型，返回值也是int類型的，就是個註釋的做用
var x = 1;  // 此時x是數字
var x = "Alex"  // 此時x是字符串

數值(Number)

　　　　　　JavaScript不區分整型和浮點型，就只有一種數字類型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

　　　　　　還有一種NaN，表示不是一個數字（Not a Number），也就是說是一個值，但不是數字。

　　　　　　經常使用方法：

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN屬性是表明非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456")  // 返回123.456

parse:

字符串(String)

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 獲得Helloworld

slice和substring的區別：

string.slice(start, stop)和string.substring(start, stop)：

二者的相同點：
若是start等於end，返回空字符串
若是stop參數省略，則取到字符串末
若是某個參數超過string的長度，這個參數會被替換爲string的長度

substirng()的特色：
若是 start > stop ，start和stop將被交換
若是參數是負數或者不是數字，將會被0替換

silce()的特色：
若是 start > stop 不會交換二者
若是start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)
若是stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)

查看數據類型:

測試1:

字符串操做測試:

注意:(1)反引號鍵是1左邊的那個鍵.

　　 (2)在console換行是:shift+enter

注意下面反引號的區別:重點!!!!!!!!!

　布爾值(Boolean)

　　　　區別於Python，true和false都是小寫。

var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

null和undefined

null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null;
undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。

　　　　null表示變量的值是空，undefined則表示只聲明瞭變量，但尚未賦值。

對象(Object)

　　　　JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象。

　　　　JavaScript 提供多個內建對象，好比 String、Date、Array 等等。

　　　　對象只是帶有屬性和方法的特殊數據類型。

　　　　自定義對象能夠認爲是咱們python中的列表.

數組:

　　　　數組對象的做用是：使用單獨的變量名來存儲一系列的值。相似於Python中的列表。

var a = [123, "ABC"]; 
console.log(a[1]);  // 輸出"ABC"

數組的經常使用方法

test1:

var c=new string("aaa");#對象類型的字符串

注意:數組也叫array

sort有坑

splice() #刪除並添加新的元素

sort() #將數字轉成字符串,在按照ascii碼的排序,進行排序

2.類型查詢&運算符&if判斷&for循環

自定義對象

注意上邊的區別

類型查詢

運算符:

流程控制

　　if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

例子:

　　if-else if-else #多條件

複製代碼
var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch 切換

var day = new Date().getDay(); //示例化一個今天的日期對象，getDay()是獲取天數的編號，0表示星期日
switch (day) {  //這裏day這個參數必須是一個值或者是一個可以獲得一個值的算式才行，這個值和後面寫的case後面的值逐個比較，知足其中一個就執行case對應的下面的語句，而後break，若是沒有加break，還會繼續往下判斷
  case 0: //若是day是0
  console.log("Sunday"); //執行它
  break; //而後break跳出
  case 1:
  console.log("Monday");
  break;
default:  //若是沒有任何知足條件的，就執行它
  console.log("...")
}

switch中的case子句一般都會加break語句，不然程序會繼續執行後續case中的語句。

注意寫法

例子:

for

for (var i=0;i<10;i++) {  //就這麼個寫法，聲明一個變量，變量小於10，變量每次循環自增1，for(;;){console.log(i)}；這種寫法就是個死循環，會一直循環，直到你的瀏覽器崩了，就不工做了，回頭能夠拿別人的電腦試試~~
  console.log(i);
}

3.while循環&三元運算符

while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

test:

三元運算

var a = 1;
var b = 2;
var c = a > b ? a : b 
//若是a>b這個條件成立，就把冒號前面的值給c，不然把冒號後面的值給c   
//python中的：a = x if x>y else y

4.函數

函數定義

　　　　JavaScript中的函數和Python中的很是相似，只是定義方式有點區別。

// 普通函數定義
function f1() {
  console.log("Hello world!");
}

// 帶參數的函數
function f2(a, b) {
  console.log(arguments);  // 內置的arguments對象
  console.log(arguments.length);
  console.log(a, b);
}

// 帶返回值的函數
function sum(a, b){
  return a + b;  //在js中，若是你想返回多個值是不行的，好比return a ，b；只能給你返回最後一個值，若是就想返回多個值，你能夠用數組包裹起來 return [a,b]；
}
sum(1, 2);  // 調用函數  sum(1,2,3,4,5)參數給多了，也不會報錯，仍是執行前兩個參數的和，sum(1)，少參數或者沒參數也不報錯，不過返回值就會是NAN

// 匿名函數方式，多和其餘函數配合使用，後面咱們就會用到了
var sum = function(a, b){  //在es6中，使用var，可能會飄黃，是由於在es6中，建議你使用let來定義變量，不過不影響你使用
  return a + b;  
}
sum(1, 2);

// 當即執行函數，頁面加載到這裏，這個函數就直接執行了，不須要被調用執行
(function(a, b){
  return a + b;
})(1, 2);  //python中寫能夠這麼寫：ret=(lambda x,y:x+y)(10,20) 而後print(ret)

補充：

　　　　ES6中容許使用「箭頭」（=>）定義函數，能夠理解爲匿名函數，用的很少。

var f = v => v;
// 等同於
var f = function(v){
  return v;
}

　　若是箭頭函數不須要參數或須要多個參數，就是用圓括號表明參數部分：

var f = () => 5;
// 等同於
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2){
  return num1 + num2;
}

test:

運行html後,在console輸入,f1();纔會調用,(這種方式是調用纔會執行)

上邊這個是自執行函數,加載就會執行.(上邊這個是非傳參的自執行函數)

(傳參的自執行函數)

函數中的arguments參數（看一下就好了）

function add(a,b){
  console.log(a+b);
  console.log(arguments.length) //獲取傳入的參數的個數，arguments就是指的你傳入的全部的實參，放在一個數組裏面，這個arguments.length是統計這個數組的元素的個數。
}

add(1,2)

輸出: