Javaweb 第2天 JavaScript課程

来源:http://www.cnblogs.com/beyondcj/archive/2017/01/10/6270852.html
-Advertisement-
Play Games

JavaScript課程 兩日大綱 ● JavaScript基本語法 ● JavaScript函數 ● JavaScript基於對象編程 ● JavaScript BOM對象編程 ● JavaScript DOM對象編程 ● JavaScript JSON格式簡介 *****************... ...


JavaScript課程

兩日大綱

● JavaScript基本語法

● JavaScript函數

● JavaScript基於對象編程

● JavaScript BOM對象編程

● JavaScript DOM對象編程

● JavaScript JSON格式簡介

 

*************************************************************************************************

 

1.    JavaScript簡介

1.1    JavaScript是什麼

JavaScript是由Netscape公司開發並隨Navigator導航者一起發佈的、介於Java與HTML之間、基於對象事件驅動的編程語言，正日益受到全球的關註。因它的開發環境簡單，不需要Java編譯器，而是直接運行在Web瀏覽器中，而因倍受Web設計者的所愛 。

 

1.2    JavaScript的作用

作用：

1、對html中的標簽實現動態的控制。

2、驗證表單中的內容。

 

 

1.3    JavaScript與Java區別

 

JS是Netscape公司的產品，前身是LiveScript;

Java是Sun公司的產品，現在是Oracle公司的產品。

 

JS只需解釋就可以執行不需要編譯。 由瀏覽器去解釋。

Java需要先編譯成位元組碼文件，再執行。

 

JS        是弱類型。

Java    是強類型。

int a = 10;

        表示a只能存儲int類型的數據。

 

 

JavaScript和java是兩種不同的語言。但是有相似的地方。比較學習。

1.4    JavaScript特點

1、腳本編寫語言（解釋型語言都叫腳本語言）

2、基於對象的語言（面向對象的概念混淆不清，類、對象、方法（函數）、屬性全部很模糊）

3、簡單性（方法的調用）

4、安全性（每種語言都會說自己很安全）

5、動態性（處處都是反射，代碼中控制代碼）

6、跨平臺性（在瀏覽器上運行）

 

*************************************************************************************************

2.    JavaScript快速入門

2.1    編寫第一個JavaScript程式

通常在<head></head>中書寫：

 

 

 

<!-- 編寫第一個JavaScript程式 -->

    <script type="text/javascript">

    //這裡寫js代碼

    alert("HelloWorld");

    </script>

 

 

 

 

註意：

1、JavaScript 代碼 必需寫在 <script type="text/javascript"> </script> 標簽內部。

2、此標簽可以編寫在html頁面代碼中的任何地方。html代碼是由上至下，順序執行。

3、通常我們會將此標簽寫在<head></head>，做到html代碼和js代碼相分離。

 

*************************************************************************************************

 

2.2    外部JS文件引用編寫方式

1、新建js文件，文件的擴展名是.js

2、在js文件中編寫

 

//切記：直接寫js代碼，不要寫<script>標簽

alert("HelloWorld--這是外部的js文件中的js程式");

 

 

 

3、在html頁面上引入該文件

 

在<head></head>中寫入：

 

 

<!-- 引入js文件 -->

    <script type="text/javascript" src="js/mao.js" ></script>

 

 

註意：

a、在html文檔中，通過script標簽的src屬性引入外部的js文件。

b、外部引入功能的<script>標簽中，不可以寫JS代碼。

c、如果要寫JS代碼，另外重新寫一對<script>標簽，然後在裡面寫。

 

 

引入JS文件和JS執行並存的代碼：

 

 

    <!-- 引入js文件 -->

    <script type="text/javascript" src="js/mao.js" ></script>

    

    <script type="text/javascript">

    alert("HelloWorld--可以和js文件中方法並存");

    alert("haha");

    </script>

 

 

 

*************************************************************************************************

3.    JavaScript基本語法

3.1    數據類型與變數

3.1.1        回顧java的數據類型：

整數：int short long

小數：float double

字元：char

布爾：boolean

位元組：byte

 

字元串：String

 

3.1.2        JavaScript的數據類型

數值（整數和實數）    不區分整數和小數。

字元串型（用""號或''括起來的字元或數值） 包含了字元串和字元。

布爾型（使True或False表示）

空值    null 表示值為空

3.1.3        回顧java定義變數

數據類型 變數名；

數據類型 變數名 = 初始值；

3.1.4        JavaScript定義變數

var 變數名=初始值；

var 變數名；

 

js中定義的變數，在沒有賦值之前，這些空間中是沒有數據類型的。

一旦賦值以後，js通過值來主動幫我們判斷該變數應該是什麼類型。

 

通過typeof可以知道js變數的類型。

 

 

代碼：

 

 

<script type="text/javascript">

    //定義變數

    var a = 10;

    var b = 20.5;

    var c = "abc";

    

    //判斷變數是什麼類型

    alert(typeof(a));

    alert(typeof(b));

    alert(typeof(c));

    

</script>

 

 

1、建議大家一定要使用var 關鍵字去定義一個變數。

2、建議大家定義一個變數，最好就存放一種數據類型數據。

 

*************************************************************************************************

 

3.2    運算符

3.2.1        算數運算符

JavaScript中的算術運算符有單目運算符和雙目運算符。


雙目運算符：
+（加） 、-（減）、 *（乘）、 /（除）、 %（取模）

 

單目運算符：
++（遞加1）、--（遞減1）。

 

註意：

1、基本的算術運算和java一樣。

2、整數除不盡，會自動轉成小數，反正在js中都是number。

3、字元串在加上一個整數的時候會進行拼接，最終轉成一個字元串。

4、如果字元串用於其它運算（非加法）的話，返回NaN（not a number）。

 

代碼：

 

 

 

<script type="text/javascript">

    //1、基本的算術運算和java一樣。

    var a = 6;

    var b = 20;

    var c = a+b;

    //alert(c);

    

    //2、整數除不盡，會自動轉成小數，反正在js中都是number。

    var d = b/a;

    //alert(d);

    

    //3、字元串在加上一個整數的時候會進行拼接，最終轉成一個字元串。

    var e = "abc";

    var f = e + a + b;

    //alert(f);

    

    //4、如果字元串用於其它運算（非加法）的話，返回NaN（not a number）。

    var g = e - a;

    alert(g);

    

    </script>

 

 

 

 

*************************************************************************************************

3.2.2        賦值運算符

java賦值運算符號： = ,+= -= *= /= %=

 

js 賦值運算符：= ,+= -= *= /= %=

 

舉例：

a += b ; 等價於 a = a+b;

a -= b ; 等價於 a = a-b;

a *= b ; 等價於 a = a*b;

a /= b ; 等價於 a = a/b;

a %= b ; 等價於 a = a%b;

 

整數除不盡，會自動轉成小數，反正在js中都是number。

 

如果保留N位小數

語法：

變數名.toFixed(N)

 

代碼：

 

    <script type="text/javascript">

    //整數除不盡，會自動轉成小數，反正在js中都是number。

    var a = 20;

    var b = 6;

    a/=b;//a = a/b;

    

    //如果保留N位小數

    a=a.toFixed(2);

    alert(a);

    

    </script>

 

 

*************************************************************************************************

3.2.3        關係運算符

比較運算符它的基本操作過程是，首先對它的操作數進行比較，然後再返回一個true或False值。

js有８個比較運算符:
<(小於)、>(大於)、<=(小於等於)、>=(大於等於)、==(等於)、!=(不等於)。

 

 

註意：

1、==      只判斷裡面的值是否相同

2、=== （表示全等：要求數值相同的同時，類型也要相同）

 

代碼：

 

    <script type="text/javascript">

    //1、==      只判斷裡面的值是否相同

    var a = "100";

    var b = 100;

    //alert(a==b);

    

    //2、=== （表示全等：要求數值相同的同時，類型也要相同）

    alert(a===b);

    

    </script>

 

 

 

*************************************************************************************************

3.2.4        邏輯運算符

&&（與）、 ||（或）、 ！（非）

 

與Java一樣，會出現邏輯短路（當左邊的表達配合邏輯運算符已經能夠確定出來結果，右邊的表達式為了節省效率就不執行了）

 

註意：

 

返回結果與java（要求兩邊是邏輯值）有不同。

 

&& ：當左邊真，返回右側表達式的值。

當左邊假，返回左側表達式的值，右側不執行 （短路）

 

|| ：當左邊真，返回表達式左邊的值，右側不執行 （短路）

當左邊假，返回表達式右側的值。

 

切記：

 

在js中非0非空非錯就是真,        0、null、""、''、undefined NaN 都是假

 

所以js邏輯運算符不再返回true false這樣的布爾值，而是具體值

 

 

 

代碼：

 

 

<script type="text/javascript">

    //&& 當左邊真，返回右側表達式的值。

    //alert(true&&100);

    

    //&&當左邊假，返回左側表達式的值，右側不執行 （短路）

    //alert(false&&true);

    //alert(0&&true);

    var a = 10;

    alert(null&&++a);//邏輯短路，前面的值能夠確定與運算的結果，右邊就不運算了

    alert(a);

    

    </script>

 

 

 

 

*************************************************************************************************

3.2.5        位運算符

JavaScript中的位運算符：

 

  • & 與：二進位比較，兩個都是1返回1，否則是0；
  • | 或：二進位比較：一個是1返回1，否則是0；
  • ^ 異或：兩個都相同返回0，否則1；
  • ~ 取反： 1取0，0取1；
  • >> 右移：高位補符號位" 這裡右移一位表示除2
  • << 左移：左移一位表示乘2，二位就表示4，就是2的n次方
  • >>> 無符號右移,高位補0"； 與>>類似

 

註：用的不多，通常都是有java處理完然後返回給頁面

 

1、如下：

a=5;

b=4;

計算a | b

 

把a，b轉換成二進位

a 0101

b 0100

----------

0101 = 5

 

代碼：

 

 

<script type="text/javascript">

    //計算a | b

    var a = 5;

    var b = 4;

    

    //位或運算

    var c = a|b;// 101

     // 100

     // 101

    alert(c);

    

    </script>

 

 

 

2、面試題：最高效率的計算 2*2*2*2

 

代碼：

 

 

<script type="text/javascript">

    //2、面試題：最高效率的計算 2*2*2*2

    alert(2<<3);

    

    </script>

 

 

 

 

*************************************************************************************************

3.2.6        三元運算符

JavaScript中的三元運算符：表達式1 ？ 表達式2 : 表達式3；

 

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Jquery Form表單取值
    之前js取form表單的值都是一個一個的取，數量一多之後容易出錯而且煩透了。感謝那些願意分享的人。 頁面定義form，並給form指定id值，裡面的元素只要是需要鍵值對應的都賦予name屬性，並且name值等於後臺能識別的參數名。 ...
  • CSS align-content 屬性
    實例 對齊彈性盒的 <div> 元素的各項： div { display: flex; flex-flow: row wrap; align-content:space-around; } 複製 效果預覽 瀏覽器支持 表格中的數字表示支持該屬性的第一個瀏覽器的版本號。 緊跟在 -webkit-, - ...
  • 模擬Vue之數據驅動3
    在"模擬Vue之數據驅動2"中，我們實現了個Observer構造函數，通過它可以達到監聽已有數據data中的所有屬性。 但，倘若我們想在某個對象中，新增某個屬性呢？ 如下： 那麼豈不是，新增的infor屬性，以及它的對象屬性，沒有得到監聽。 此時，應該怎麼處理呢？ 通過走讀Vue源碼，發現他是採用另 ...
  • CSS倒影
    前面的話   CSS倒影目前只有chrome和safari瀏覽器支持，且需要添加 webkit 首碼。本文將詳細介紹CSS倒影box reflect   語法 webkit box reflect 初始值: none 應用於: 塊級元素(包括inline block) ...
  • CSS濾鏡
    [1]語法 [2]灰度 [3]飽和度 [4]褐色 [5]色相 [6]反色 [7]透明度 [8]亮度 [9]對比度 [10]模糊 [11]陰影 ...
  • JQuery動態操作表格
    新人，小白一枚，剛剛參加工作，所以會在這裡記錄一些遇到的問題。 最近要做的東西，是對一個表格動態的添加行，刪除行，並且對錶格中內容進行非空驗證。 ...
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結
    本文對Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法進行了詳細的總結，需要的朋友可以參考下，希望對大家有所幫助。 詳細解讀Jquery各Ajax函數： $.get(),$.post(),$.ajax(),$.getJSON() 一，$.get(url, ...
  • html5後臺界面
    http://www.cssauthor.com/best-responsive-admin-templates/#Free ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類