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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類