演算法題（計算字串最後一個單詞的長度，單詞以空格隔開）

阿新 • • 發佈：2021-01-21

技術標籤：js javascript

文章目錄

- **javaScript**

javaScript

1.概念：一門客戶端指令碼語言

執行在客戶端瀏覽器中的。每一個瀏覽器都有JavaScript的解析引擎
是指令碼語言：不需要編譯，直接就可以被瀏覽器解析執行了

2.JavaScript和HTML、CSS的區別

HTML：提供網頁的結構，提供網頁中的內容
CSS: 用來美化網頁
JavaScript:可以用來控制網頁內容，給網頁增加動態的效果

3.功能:

可以來增強使用者和html頁面的互動過程，可以用來控制網頁內容，給網頁增加動態的效果，增強使用者的體驗。

4.JavaScript發展史：

1992年，Nombase公司，開發出第一門客戶端指令碼語言，專門用於表單的校驗。命名為： C-- ，後來更名為：ScriptEase
1995年，Netscape(網景)公司，開發了一門客戶端指令碼語言：LiveScript。後來，請來SUN公司的專家，修改LiveScript，命名為JavaScript
1996年，微軟抄襲JavaScript開發出JScript語言
1997年，ECMA(歐洲計算機制造商協會)，制定出客戶端指令碼語言的標準：ECMAScript，就是統一了所有客戶端指令碼語言的編碼方式。

JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)

學習JavaScript就是學習ECMAScript +（BOM+DOM）物件

5.ECMAScript：客戶端指令碼語言的標準

基本語法：

與html結合方式:

內部JS：

<head>
  <script>
    alert('Hello World!');
  </script>
</head>

外部JS：寫在外部js檔案中，在頁面引入
```
<script src="js/script.js"></script>
```

寫在行內:

<input type="button" value="按鈕" onclick="alert('Hello World')" >

注意：

   <script>可以定義在html頁面的任何地方。但是定義的位置會影響執行順序。
   																											
    <script>可以定義多個。

isNaN:判斷是否非數字：

<script>
     var a="aaa";
     var a1=isNaN(a);
     document.write(a1)//true
</script>

輸入：prompt(“提示資訊”,“預設值”)：

var inputHour = prompt("請輸入當前的小時數：", "6");
if (inputHour >=6 && inputHour <=12) {
    document.write("<h2>上午好!歡迎來到貴美</h2>");
    for (var i = 0; i<inputHour; i++) {
    document.write("<img src='images/smile.gif'>");
  }
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-BvIJpw4m-1611152101645)(C:\Users\強哥\AppData\Roaming\Typora\typora-user-images\image-20210118151928165.png)]

彈出對話方塊:alert()

<script>
     alert("彈窗");
</script>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-9aIv87gi-1611152101648)(C:\Users\強哥\AppData\Roaming\Typora\typora-user-images\image-20210118152447124.png)]

註釋:

單行註釋：
```
//註釋內容
```
多行註釋：
```
/*註釋內容*/
```

資料型別：

原始資料型別(基本資料型別)：
- number：數字。整數，小數，NaN(not a number 一個不是數字的數字型別)
  
  數值字面量：數值的固定值的表示法
  
  110 1024 60.5
- string：字串。字串 “abc” “a” 'abc’
- boolean: true和false
- null：一個物件為空的佔位符
- undefined：未定義。如果一個變數沒有給初始化值，則會被預設賦值為undefined
  
  typeof: 獲取變數的型別
  
  注：null運算後得到的是object
引用資料型別：物件

資料型別轉換

轉換成字串型別toString()

<script>
     var a=5;
     var s = a.toString();
     alert(a+s);//55
</script>

轉換成數值型別

parseInt()：轉換成整數和 parseFloat()：把字串轉換成浮點數

<script>
        var a="5.5ab";
        var a1="ab5.5"
        var s = parseInt(a)
        var s1=parseInt(a1)
        var s2=parseFloat(a)
        //他是一個一個字元去轉換
        document.write(s+"<br/>");//5
		//如果第一個字元不是數字或者符號就返回NaN
        document.write(s1+"<br/>");//NaN
		//如果碰到非數字就停止轉換
        document.write(s2+"<br/>");//5.5
</script>

他是一個一個字元去轉換

如果第一個字元不是數字或者符號就返回NaN

如果碰到非數字就停止轉換

轉換成布林型別
Boolean()

0 ’ ’ (空字串) null undefined NaN 會轉換成false 其它都會轉換成true

變數:

什麼是變數:
- 變數是計算機記憶體中儲存資料的識別符號，根據變數名稱可以獲取到記憶體中儲存的資料
為什麼要使用變數
- 使用變數可以方便的獲取或者修改記憶體中的資料
Java語言是強型別語言，而JavaScript是弱型別語言。
- 強型別：在開闢變數儲存空間時，定義了空間將來儲存的資料的資料型別。只能儲存固定型別的資料
- 弱型別：在開闢變數儲存空間時，不定義空間將來的儲存資料型別，可以存放任意型別的資料。
如何使用變數:
- var:宣告變數
- 語法：
```
//var 變數名 = 初始化值;
```

運算子:

一元運算子：只有一個運算數的運算子
- ++ --: 自增(自減)
  1. ++(–) 在前，先自增(自減)，再運算
  2. ++(–) 在後，先運算，再自增(自減)
- +(-)：正負號
  
  注意：在JS中，如果運算數不是運算子所要求的型別，那麼js引擎會自動的將運算數進行型別轉換
  其他型別轉number：
  string轉number：按照字面值轉換。如果字面值不是數字，則轉為NaN（不是數字的數字）
  boolean轉number：true轉為1，false轉為0
算數運算子

+ - * / % ...

賦值運算子

//= += -= *= /= %=
例如：
var num = 0;
num += 5;	//相當於  num = num + 5;

比較運算子
```
<  >  >=  <= == != === !==
==與===的區別：==只進行值得比較，===型別和值同時相等，則相等
var result = '55' == 55;  	// true
var result = '55' === 55; 	// false 值相等，型別不相等
var result = 55 === 55; 	// true
```
比較方式
1. 型別相同：直接比較
  
  字串：按照字典順序比較。按位逐一比較，直到得出大小為止。
2. 型別不同：先進行型別轉換，再比較
  ===：全等於。在比較之前，先判斷型別，如果型別不一樣，則直接返回false

邏輯運算子

&& || !

其他型別轉boolean：

  1. number：0或NaN為假，其他為真
     2.  string：除了空字串("")，其他都是true
     3. null&undefined:都是false
     4. 物件：所有物件都為true

三元運算子
```
? : 表示式
<script>
     var a=5;
     var a1=9;
     var a2=a>a1? 1:0;
     alert(a2)
</script>
```
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-tWrnSpbs-1611152101649)(C:\Users\強哥\AppData\Roaming\Typora\typora-user-images\image-20210117193836526.png)]
- 語法：
  1. 表示式? 值1:值2;
  2. 判斷表示式的值，如果是true則取值1，如果是false則取值2；

流程控制語句：

程式的三種基本結構

順序結構,從上到下執行的程式碼就是順序結構,程式預設就是由上到下順序執行的
分支結構根據不同的情況，執行對應程式碼
迴圈結構迴圈結構：重複做一件事情

布林型別的隱式轉換

轉換為true（非空字串非0數字 true 任何物件）
轉換成false（空字串 0 false null undefined ）

分支結構

if語句，語法結構

if (/* 條件表示式 */) {
  // 執行語句
}

if (/* 條件表示式 */){
  // 成立執行語句
} else {
  // 否則執行語句
}

if (/* 條件1 */){
  // 成立執行語句
} else if (/* 條件2 */){
  // 成立執行語句
} else if (/* 條件3 */){
  // 成立執行語句
} else {
  // 最後預設執行語句
}

switch語句語法格式:

switch (expression) {
  case 常量1:
    語句;
    break;
  case 常量2:
    語句;
    break;
  case 常量3:
    語句;
    break;
  …
  case 常量n:
    語句;
    break;
  default:
    語句;
    break;
}

在java中，switch語句可以接受的資料型別： byte int shor char,列舉(1.5) ,String(1.7)

switch(變數):
 case 值:

在JS中,switch語句可以接受任意的原始資料型別

迴圈結構

在javascript中，迴圈語句有三種，while、do…while、for迴圈。

while語句,基本語法：

// 當迴圈條件為true時，執行迴圈體，
// 當迴圈條件為false時，結束迴圈。
while (迴圈條件) {
  //迴圈體
}

do…while語句

do…while迴圈和while迴圈非常像，二者經常可以相互替代，但是do…while的特點是不管條件成不成立，都會執行一次。

do {
  // 迴圈體;
} while (迴圈條件);

for語句

while和do…while一般用來解決無法確認次數的迴圈。for迴圈一般在迴圈次數確定的時候比較方便

// for迴圈的表示式之間用的是;號分隔的，千萬不要寫成,
for (初始化表示式1; 判斷表示式2; 自增表示式3) {
  // 迴圈體4
}

continue和break

break:立即跳出整個迴圈，即迴圈結束，開始執行迴圈後面的內容（直接跳到大括號）

continue:立即跳出當前迴圈，繼續下一次迴圈（跳到i++的地方）

基本物件：

Function：函式(方法)物件

建立：

建立方式1

var fun = new Function(形式引數列表,方法體); //忘掉吧
```
var fun1=new Function("a","b","alert(a)")
//呼叫：
fun1(1);//1
```
建立方式2

function 方法名稱(形式引數列表){
方法體
}
```
 function fun2(a,b,c) {
      return a+b+c;
}
```

建立方式3

var 方法名 = function(形式引數列表){
方法體
}

 var fun3=function(){
       var sum=0;
       for (var i=0;i<arguments.length;i++){
          sum+=arguments[i];
       }
       return sum;
}

屬性：
- length:代表形參的個數
呼叫：方法名稱(實際引數列表);
- 可以呼叫多次(重複使用)

特點：

函式宣告的時候，方法體並不會執行，只要當函式被呼叫的時候才會執行。
方法定義，形參的型別不用寫,返回值型別也不寫。
方法是一個物件，如果定義名稱相同的方法，會覆蓋
在JS中，方法的呼叫只與方法的名稱有關，和引數列表無關

function fun2(a,b,c) {//方法定義，形參的型別不用寫,返回值型別也不寫。
      return a+b+c;
}
fun2=function (a) {//方法是一個物件，如果定義名稱相同的方法，會覆蓋
      return a
}
var a=fun2(1,2,5,5);//在JS中，方法的呼叫只與方法的名稱有關，和引數列表無關
alert(a)//1

在方法宣告中有一個隱藏的內建物件（陣列），arguments,封裝所有的實際引數

  var fun3=function(){
      var sum=0;
      for (var i=0;i<arguments.length;i++){//在方法宣告中有一個隱藏的內建物件（陣列），arguments,封裝所有的實際引數
           sum+=arguments[i];
      }
      return sum;
}
var fun = fun3(1,2,3,4,5,6);
alert(fun)//21

Array:陣列物件

建立：

建立方式1:var arr = new Array(元素列表);

var add=new Array(1,"abc",true);//JS中，陣列元素的型別可變的。

建立方式2:var arr = new Array(預設長度);
```
 var add1=new Array(5);
```
建立方式3:var arr = [元素列表];
```
var add2=[1,2,3];
```

方法:

join(引數):將陣列中的元素按照指定的分隔符拼接為字串
```
document.writeln(add.join("--"));//1--abc--true
```
push() 向陣列的末尾新增一個或更多元素，並返回新的長度。如果新增的是一個數組，這個時候把陣列當做一個整體字串新增進去
```
 var number = add.push("javaScript");//4 1-abc-true-javaScript
```

unshift()：在陣列的開頭新增新元素

var fruits4=["Banana", "Orange", "Mango"];
fruits4.unshift(25);
document.writeln(fruits4)//25,Banana,Orange,Mango

concat方法：陣列的連線

var b=[1,2,3];
var c=[4,5,6];
document.writeln(b.concat(c));//1,2,3,4,5,6

pop()：刪除陣列的最後一個元素,返回刪除的那個元素

var fruits=["Banana", "Orange", "Apple", "Mango"];
document.writeln(fruits.pop()+"\r\r("+fruits+")");//Mango (Banana,Orange,Apple)

shift()：刪除陣列的第一個元素,返回刪除的那個元素

var fruits1=["Banana", "Orange", "Apple", "Mango"];
document.writeln(fruits1.shift()+"\r\r("+fruits1+")");//Banana (Orange,Apple,Mango)

reverse()：顛倒陣列中的元素的順序

var fruits2=["Banana", "Orange", "Apple", "Mango"];
document.writeln(fruits2.reverse());//Mango,Apple,Orange,Banana

slice()：從一個數組中選擇元素,不包含末尾；

var fruits3=["Banana", "Orange", "Apple", "Mango"];
document.writeln(fruits3.slice(1,3))//Orange,Apple

完整陣列物件參考手冊

屬性:
- length:陣列的長度
特點：
1. JS中，陣列元素的型別可變的。
2. JS中，陣列長度可變的。
```
add[10]=12.5;//JS中，陣列長度可變的。
```

遍歷:

方式1:

for (var i=0;i<add.length;i++){
      document.write(add[i]+"\r");
}

方式2:

for (var i in add){
      document.write(add[i]+"\r")
}

[完整程式碼：](file:///F:/%E5%AD%A6%E4%B9%A0java/JavaScript/Array%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81.html)

Date：日期物件

建立：var date = new Date(); // 獲取當前時間，UTC世界時間，距1970年1月1日（世界標準時間）起的毫秒數

var date = new Date();//Tue Jan 19 2021 15:52:50 GMT+0800 (中國標準時間)

方法：

toLocaleString()：返回當前date物件對應的時間本地字串格式

 document.writeln(date.toLocaleString()+"<br>")//2021/1/19 下午3:52:50

valueOf()：獲取毫秒值

 document.writeln(date.valueOf()+"<br>")//1611042770662

getTime()：返回毫秒數和valueOf()結果一樣，valueOf()內部呼叫的getTime()
```
 document.writeln(date.getTime()+"<br>")//1611042770662
```
getFullYear()：獲取當前的年方法

document.writeln(date.getFullYear()+"\r年")//2021

getMonth()：獲取當前的月方法,返回的是 0-11月，如果想要得到準確的值，加1
```
document.writeln((date.getMonth()+1)+"\r月")//1
```
getDate()：獲取當前的日( 返回當前月的第幾天 )
```
document.writeln(date.getDate()+"\r日")//19
```

getDay()：獲取當前的星期，返回的是 (0 ~ 6)

var weekday=["週日","週一","週二","週三","週四","週五","週六"];
document.writeln(weekday[date.getDay()]+"<br>")// 返回星期幾 0週日   6周6

getHours()：獲取當前的小時，返回0-23時間
```
document.writeln(date.getHours()+"\r點")//16
```
getMinutes()：獲取當前的分鐘，返回0-59分鐘
```
document.writeln(date.getMinutes()+"\r分鐘")//5
```

getSeconds()

document.writeln(date.getSeconds()+"\r秒")// 返回0-59秒

JavaScript Date 物件參考手冊

Math：數學物件

建立：特點：Math物件不用建立，直接使用。 Math.方法名();

方法：

random():返回 0 ~ 1 之間的隨機數。含0不含1

// 公式：Math.random()*(n-m)+m
document.writeln(Math.floor(Math.random()*(101-90)+90));//90-100

ceil(x)：對數進行上舍入。

//對數進行上舍入
var a=5.5,a1=2.5,a2=-2.5;
document.writeln(Math.ceil(a1)+"<br>");//3 
document.writeln(Math.ceil(a2)+"<br>");//-2

floor(x)：對數進行下舍入。

//對數進行下舍入
var a=5.5,a1=2.5,a2=-2.5;
document.writeln(Math.floor(a1)+"<br>");//2 
document.writeln(Math.floor(a2)+"<br>");//-3

round(x)：把數四捨五入為最接近的整數。

var a=5.5,a1=2.5,a2=-2.5;
document.writeln(Math.round(a)+"<br>");//6
document.writeln(Math.round(a2)+"<br>");//-2

JavaScript Math 物件的參考手冊

屬性：
- PI：返回圓周率（約等於3.14159）
```
var pi=Math.PI;
document.writeln(pi+"<br>");
```

RegExp：正則表示式物件

正則表示式：定義字串的組成規則。
單個字元:[]:

如： [a] [ab] [a-zA-Z0-9_]
特殊符號代表特殊含義的單個字元:
\d:單個數字字元 [0-9]
\w:單個單詞字元[a-zA-Z0-9_]
量詞符號：

?：表示出現0次或1次

*：表示出現0次或多次

+：出現1次或多次

{m,n}:表示 m<= 數量 <= n:

m如果預設： {,n}:最多n次

n如果預設：{m,} 最少m次
開始結束符號
- ^:開始
- $:結束

正則物件：

建立

var reg = new RegExp(“正則表示式”);

var reg = /正則表示式/;

var reg=new RegExp("^\\w{6,12}$");
var reg1=/^\w{6,12}$/;//使用第2種方法

方法

test(引數):驗證指定的字串是否符合正則定義的規範

var reg1=/^\w{6,12}$/;
var s="ZHzh123";
var s1=reg1.test(s);
alert(s1);//ture;

Global:全域性物件

特點：全域性物件，這個Global中封裝的方法不需要物件就可以直接呼叫。方法名();

方法：

encodeURI()：url編碼
decodeURI()：url解碼
encodeURIComponent()：url編碼,編碼的字元更多

decodeURIComponent()：url解碼

//URL編碼：傳智播客 =  %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var s="https:www.baidu.com?wb=傳智播客";
document.writeln(encodeURI(s));//url編碼
document.writeln(decodeURI(encodeURI(s))+"<br>");//url解碼
//https:www.baidu.com?wb=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2  https:www.baidu.com?wb=傳智播客

document.writeln(encodeURIComponent(s));//url編碼
document.writeln(decodeURIComponent(encodeURI(s)));//url解碼
//https%3Awww.baidu.com%3Fwb%3D%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2  https:www.baidu.com?wb=傳智播客

parseInt()：將字串轉為數字
- 逐一判斷每一個字元是否是數字，直到不是數字為止，將前邊數字部分轉為number
isNaN()：判斷一個值是否是NaN
eval()：將 JavaScript 字串，並把它作為指令碼程式碼來執行。
```
var s1="document.writeln('eval')";
eval(s1)//eval
```

JavaScript 全域性物件

6.DOM簡單學習：為了滿足案例要求

功能：控制html文件的內容，然後我們就可以去改變HTML的一些內容
獲取頁面標籤(元素)物件：Element
- document.getElementById(“id值”)：通過元素的id獲取元素物件
操作Element物件：
- 修改屬性值：
  
  明確獲取的物件是哪一個？
  
  檢視API文件，找其中有哪些屬性可以設定
- 修改標籤體內容：
  
  屬性：innerHTML
  1. 獲取元素物件
  2. 使用innerHTML屬性修改標籤體內容
```
<img id="img1" src="images/aftermoon.gif"/>
<h1 id="h">liao184255</h1>
<script>
        //document.getElementById("id值"):通過元素的id獲取元素物件
        var elementById = document.getElementById("img1");
        alert("我要換圖片");
        //修改屬性值：
        elementById.src="images/smile.gif";

        //修改標籤體內容：屬性：innerHTML
        var elementById1 = document.getElementById("h");
        alert("我要換文字")
        elementById1.innerHTML="184255Pp";

</script>
```
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-BnJIBT62-1611152101651)(C:\Users\強哥\AppData\Roaming\Typora\typora-user-images\image-20210120183955314.png)][外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-PkU4lJ1L-1611152101654)(C:\Users\強哥\AppData\Roaming\Typora\typora-user-images\image-20210120184037158.png)]

7.事件簡單學習

功能：某些元件被執行了某些操作後，觸發某些程式碼的執行。

如何繫結事件:

直接在html標籤上，指定事件的屬性(操作)，屬性值就是js程式碼

事件：onclick— 單擊事件
```
<head>
    <meta charset="UTF-8">
    <title>如何繫結事件</title>
    <script>
        function fun() {
            alert("我被點了");
        }
    </script>
</head>
<body>
    <img src="images/aftermoon.gif" onclick="fun();">
</body>
</html>
```
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-kaYG3ZFj-1611152101655)(C:\Users\強哥\AppData\Roaming\Typora\typora-user-images\image-20210120210635409.png)]

通過js獲取元素物件，指定事件屬性，設定一個函式( )

<head>
    <meta charset="UTF-8">
    <title>如何繫結事件</title>
</head>
<body>
    <img src="images/aftermoon.gif" onclick="fun();">
    <img id="h" src="images/aftermoon.gif">
    <script>
        function fun() {
            alert("我被點了");
        }
        function fun1() {
            alert("我又被點了");
        }
        //通過js獲取元素物件，指定事件屬性，設定一個函式
        var elementById = document.getElementById("h");
 		//2.繫結事件
        elementById.onclick=fun1;
    </script>
</body>
</html>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-2J0mGzvI-1611152101655)(C:\Users\強哥\AppData\Roaming\Typora\typora-user-images\image-20210120213332624.png)]

ction fun() {
alert(“我被點了”);
}

```

[外鏈圖片轉存中...(img-kaYG3ZFj-1611152101655)]

通過js獲取元素物件，指定事件屬性，設定一個函式( )

<head>
    <meta charset="UTF-8">
    <title>如何繫結事件</title>
</head>
<body>
    <img src="images/aftermoon.gif" onclick="fun();">
    <img id="h" src="images/aftermoon.gif">
    <script>
        function fun() {
            alert("我被點了");
        }
        function fun1() {
            alert("我又被點了");
        }
        //通過js獲取元素物件，指定事件屬性，設定一個函式
        var elementById = document.getElementById("h");
 		//2.繫結事件
        elementById.onclick=fun1;
    </script>
</body>
</html>

[外鏈圖片轉存中…(img-2J0mGzvI-1611152101655)]

演算法題（計算字串最後一個單詞的長度，單詞以空格隔開）

文章目錄

javaScript

1.概念：一門客戶端指令碼語言

2.JavaScript和HTML、CSS的區別

3.功能:

4.JavaScript發展史：

5.ECMAScript：客戶端指令碼語言的標準

基本語法：

與html結合方式:

isNaN:判斷是否非數字：

輸入：prompt(“提示資訊”,“預設值”)：

彈出對話方塊:alert()

註釋:

資料型別：

資料型別轉換

變數:

運算子:

流程控制語句：

程式的三種基本結構

布林型別的隱式轉換

分支結構

迴圈結構

while語句,基本語法：

do…while語句

for語句

continue和break

基本物件：

Function：函式(方法)物件

Array:陣列物件

Date：日期物件

Math：數學物件

RegExp：正則表示式物件

Global:全域性物件

6.DOM簡單學習：為了滿足案例要求

7.事件簡單學習

相關推薦