當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
大数据WEB阶段（四）JavaScript
生活随笔
收集整理的這篇文章主要介紹了
大数据WEB阶段（四）JavaScript
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript
一、JavaScript概述
二、在html中引入js代碼
直接在html中編寫js代碼
一般推薦把js代碼寫到head中 。
<html><head><title>標題</title><script type="text/javascript">//js代碼</script></head> </html>引入外部文件
注意：如果是用script引入外部js文件 ， 則在script便簽內部你不要寫js代碼 ， 并且標簽不要寫成自閉 形式 ， 否則 可能會導致引入失敗的問題 。
<script type="text/javascript" src="demo.js"></script>三、js語法
注釋
1. 單行注釋： //注釋 內容 2. 多行注釋： /*注釋內容*/運算符
js中與java運算負的 不同之處：
typeof：
用類返回變量\常量\表達式的數據類型
var x = 123 ; typeof x;delete : 用類刪除數組中的元素或者刪除對象中的屬性或方法
var arr = [123,"sd",true]; delete arr[1];函數
用function關鍵字來 定義 一個函數
function 函數名（參數列表）{//函數體 }用函數表達式來定義一個函數
var 函數名 = function（參數列表）{//函數體 }數組
通過Array()構造函數來創建數組
var arr1 = new Array();//創建一個空數組 var arr2 = new Array(10);//創建一個初始容量為10的數組 var arr3 = new Array(11,"ddef",true);//創建一個具有指定初始值的數組通過 數組直接量來創建數組
var arr1 = [];//創建一個空數組 var arr2 = [22,"df",,true];//創建一個具有指定初始值的數組js內置對象
String對象
創建
var str1 = new String("df"); var str2 = "sd";RegExp對象（正則表達式）
創建：
var reg1 = new RegExp("xxxx"); var reg2 = /xxxx/;Array對象
創建：
var arr1 = new Array(); var arr2 = [];date對象
創建：
var date1 = new Date();//當前時間 var date2 = new Date(年， 月 ， 日，[時， 分 ， 秒]);//指定時間 ， 可以只有 年月日 注意： 指定時間時 月份是從0開始的常用方法
data.toLocaleString() 把日期(一個數值)轉變成本地日期格式字符串
例如：var date2 = new Date(2008,7,8); date2.toLocaleString(); // "2008/8/8 上午12:00:00"data.getFullYear() 獲取日期對象中所表示時間的年份
全局對象
parseFloat(numString) 將字符串轉換成浮點數。
例如：parseFloat("13.14") // 返回number類型的13.14parseInt(numString) 將字符串轉成整數，非四舍五入。
例如：parseInt("9.99") // 返回number類型的9isNaN(numValue) 判斷一個值是否為非數字。
例如： isNaN("abc") // true isNaN("123") // falseeval(codeString) 判斷一個字符串并將其以腳本代碼的形式執行
例如：eval("alert(1+2)"); //會直接將"alert(1+2)"當作代碼執行，彈出3自定義對象
方式一 ：構造函數定義對象
function Person(){} // 定義一個空的Person對象function Person2(參數1,參數2...){對象內容... } //定義一個帶參數的對象方式二：對象直接量
var p3 = {"key1" : "value1","key2" : "value2"......... }對象中取值：
P3.key1 或者 p3["key1"]案例：
四、DHTML
BOM
案例：
<!-- BOM --><script type="text/javascript">//window對象//1.在按鈕點擊時彈出提示框function clickfn(){alert("按鈕被點擊");}//2.輸入框1獲得焦點時彈出提示框function focusfn(){alert("輸入框1獲得焦點 ");}//3.輸入框2失去焦點時彈出提示框function blurfn (){alert("輸入框2失去焦點");}//4.彈出輸入框3中的value值onload=function(){//獲取輸入框3的input按鈕var inp = document.getElementById("input3");alert(inp.value);}//5.點擊刪除商品按鈕，彈出提示是否刪除,如果確定，則彈出商品已刪除，否則彈出商品還在function delfn(){if(confirm("確認刪除商品？")){alert("商品已刪除");}else{alert("商品還在");}}//location對象//1.彈出當前urlalert(location.href);//2.將頁面url設置為"http://www.baidu.com"alert("此頁面將跳轉到tmooc");location.href = "http://www.baidu.com";</script>DOM
案例1：
/* --通過ID獲取并彈出用戶名輸入框的值-- */function demo1(){//根據ID獲取用戶名輸入框，un即代表整個輸入框var un = document.getElementById("username");alert(un.value);//可以自己設置value值un.value = "蘭姐";}/* --通過name屬性獲取并彈出密碼輸入框的值-- */function demo2(){//根據name屬性獲取密碼輸入框，因為name屬性可以重復，所以獲取的是一個集合數組var pwarr = document.getElementsByName("password");//在數組中獲取第一個元素var pw = pwarr[0];alert(pw.value);}/* --通過元素名稱獲取并彈出確認密碼輸入框的值-- */function demo3(){//根據標簽名獲取確認密碼輸入框，同樣，獲取的是一個數組var inparr = document.getElementsByTagName("input");//獲取第三個元素var pw2 = inparr[2];alert(pw2.value);} /* --獲取元素內容-- */function demo4(){var oP = document.getElementById("pid");//獲取p標簽中的文本內容 innerText(部分瀏覽器不支持)alert(oP.innerText);//獲取p標簽中的所有html內容 innerHTML(絕大部分瀏覽器都支持)alert(oP.innerHTML);//設置p標簽中的html內容oP.innerHTML = "<font color='blue'>我要變身了...!</font>";}案例2：
/* --添加節點: 添加一個div元素到body的最后面-- */function addNode(){//獲取父元素 //var oBody = document.getElementsByTagName("body")[0];//body是document的子對象，所以可以直接獲取var oBody = document.body;//創建一個游離div元素var oNewDiv = document.createElement("div");//給div中添加內容oNewDiv.innerHTML = "我是新來的....!";//將div元素掛載到父元素上oBody.appendChild(oNewDiv);}/* --刪除節點: 刪除body中id值為 div_3 的div元素-- */function deleteNode(){//獲取父元素bodyvar oBody = document.body;//獲取要刪除的元素div_3var oDiv_3 = document.getElementById("div_3");//解除父子關系oBody.removeChild(oDiv_3);}/* --更新節點: 用新節點替換id值為 div_2 的div元素 -- */function updateNode(){//創建一個新節點var oNewDiv = document.createElement("div");oNewDiv.innerHTML = "我是來替換的~!";//獲取被替換的元素var oDiv_2 = document.getElementById("div_2");//獲取父元素, 并通過父元素替換子元素var oBody = oDiv_2.parentNode;oBody.replaceChild(oNewDiv, oDiv_2);}/* --克隆節點、插入節點到指定元素的前面--*/function copyNode(){//獲取指定元素var oDiv_4 = document.getElementById("div_4");//克隆元素var oCloneDiv = oDiv_4.cloneNode(true);//false 默認值, 只克隆元素本身, 不克隆元素內容//獲取父元素bodyvar oBody = document.body;var oDiv_2 = document.getElementById("div_2");//將克隆元素插入到指定位置oBody.insertBefore(oCloneDiv,oDiv_2);}總結
以上是生活随笔為你收集整理的大数据WEB阶段（四）JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大数据WEB阶段（三）CSS
- 下一篇： 大数据WEB阶段（五）jQuery