整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
數(shù)據(jù)編程入門(mén)：JavaScript輸出
JavaScript是一種當(dāng)前最流行的腳本語(yǔ)言，這門(mén)語(yǔ)言經(jīng)常用于Web，今天小編將為大家?guī)?lái)大數(shù)據(jù)編程入門(mén)：JavaScript輸出。
JavaScript是一種具有函數(shù)有限的輕量級(jí)，解釋型或即時(shí)編譯型的編程語(yǔ)言。雖然它是作為開(kāi)發(fā)Web頁(yè)面的腳本語(yǔ)言而出名，但是它也被用到了很多非瀏覽器環(huán)境中，JavaScript基于原型編程、多范式的動(dòng)態(tài)腳本語(yǔ)言，并且支持面向?qū)ο蟆⒚钍健⒙暶魇健⒑瘮?shù)式編程范式。
1、JavaScript：直接寫(xiě)入HTML輸出流
運(yùn)行結(jié)果：
注意：document.write只能在HTML輸出中使用，如果在加載文檔后使用此方法，將覆蓋整個(gè)文檔。
2、JavaScript：對(duì)事件的反應(yīng)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米谷</title>
</head>
<body>
<h1>我的第一個(gè) JavaScript</h1>
<p>
JavaScript 能夠?qū)κ录鞒龇磻?yīng)。比如對(duì)按鈕的點(diǎn)擊：
</p>
<button type="button" onclick="alert('歡迎，我尊貴的VIP!')">點(diǎn)我!</button>
</body>
</html>
運(yùn)行結(jié)果：
alert()函數(shù)在JavaScript中并不常用，但它非常方便代碼測(cè)試。
3、JavaScript：改變HTML內(nèi)容
使用JavaScript處理HTML內(nèi)容的功能是非常強(qiáng)大。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米谷的JavaScript</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改變 HTML 元素的內(nèi)容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改變內(nèi)容
}
</script>
<button type="button" onclick="myFunction()">點(diǎn)擊這里</button>
</body>
</html>
運(yùn)行結(jié)果：
在上面的document.getElementByld(“some id”)這個(gè)方法是HTML DOM中定義的。
DOM全稱(chēng)為Document Object Model，翻譯成中文為文檔對(duì)象模式，適用于訪問(wèn)HTML元素的正式W3C標(biāo)準(zhǔn)。
4、JavaScript：改變HTML圖像
運(yùn)行結(jié)果：
在上面所演示的實(shí)例中，圖片放在與HTML文檔同一個(gè)文件的image文件中，因此路徑為image/pic_buloff.gif。
上面示例中的代碼codeelement.src.match("bulbon") 意味著檢索<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里的src屬性的值是否包含字符串bulbon，如果存在字符串bulbon，則圖像SRC將更新為bulboff.gif。如果字符串bulbon不匹配，SRC將更新為bulbon.gif。
5、JavaScript：改變HTML樣式
更改HTML元素的樣式是更改HTML屬性的一種變體。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>miuku</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改變 HTML 元素的樣式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改變樣式
}
</script>
<button type="button" onclick="myFunction()">點(diǎn)擊這里</button>
</body>
</html>
運(yùn)行結(jié)果：
6、JavaScript：驗(yàn)證輸入
JavaScript可以常用于驗(yàn)證用戶(hù)的輸入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>請(qǐng)輸入數(shù)字。如果輸入值不是數(shù)字，瀏覽器會(huì)彈出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是數(shù)字");
}
}
</script>
<button type="button" onclick="myFunction()">點(diǎn)擊這里</button>
</body>
</html>
運(yùn)行結(jié)果：
說(shuō)明：Java和JavaScript無(wú)論是在概念上還是在設(shè)計(jì)上兩種完全不同的語(yǔ)言，且Java是更復(fù)雜的編程語(yǔ)言。
ECMA-262是JavaScript標(biāo)準(zhǔn)的官方名稱(chēng)。
以上就是關(guān)于大數(shù)據(jù)編程入門(mén)：JavaScript輸出的全部?jī)?nèi)容了，希望這篇文章可以幫助到大家~
取元素偏移量
獲取標(biāo)簽
示例
獲取標(biāo)簽元素
示例
獲取表單元素屬性
示例
設(shè)置自定義屬性
示例
添加和刪除元素
改變 HTML 元素
獲取元素偏移量
object.offsetLeft：元素距離leftBody多少；
object.offsetTop：元素距離topBody多少；
獲取標(biāo)簽
object.getElementById：通過(guò)ID獲取元素；
object.getElementsByTagName：通過(guò)標(biāo)簽獲取元素；
object.getElementsByName：通過(guò)name獲取元素；
object.getElementsByClassName：通過(guò)class獲取元素；
object.querySelector：通過(guò)選擇器獲取元素,只返回第一個(gè)；
object.querySelectorAll：通過(guò)選擇器獲取元素,返回所有；
示例
document.getElementById('cce') // 通過(guò)id來(lái)獲取元素;
document.getElementsByClassName('cce') // 通過(guò)class來(lái)獲取元素;
document.getElementsByTagName('div') // 通過(guò)標(biāo)簽來(lái)獲取元素;
document.querySelector('.cce') // 通過(guò)選擇器來(lái)獲取元素,只返回第一個(gè);
document.querySelectorAll('#cce') // 通過(guò)選擇器來(lái)獲取元素,返回所有;
獲取標(biāo)簽元素
innerHTML:找到標(biāo)簽下面的標(biāo)簽包括文本；
innerText/textContent:找到標(biāo)簽下面的文本,他們兩個(gè)的用法是一樣的，只不過(guò)有的瀏覽器不支持，現(xiàn)在一般用innerTEXT；
示例
document.getElementById('cce').innerTEXT='cce';
獲取表單元素屬性
value：用于大部分表單元素的內(nèi)容獲取(option除外)；
type：可以獲取input標(biāo)簽的內(nèi)心(輸入框或復(fù)選框等)；
disabled：禁用屬性；
checked：復(fù)選框選中屬性；
selected：下拉菜單選中屬性；
示例
object.getElementById('id').disabled=true/false
object.getElementById('id').checked=true/false
object.getElementById('id').selected=true/false
設(shè)置自定義屬性
getAttribute：獲取自定義屬性；
setAttribute：設(shè)定自定義屬性；
removeAttribute：移除自定義屬性；
示例
object.getAttribute('cce')
object.setAttribute('cce',18)
object.removeAttribute('cce')
添加和刪除元素
document.createElement(element)：創(chuàng)建HTML元素；
document.removeChild(element)：刪除HTML元素；
document.appendChild(element)：添加HTML元素；
document.replaceChild(element)：替換HTML元素；
document.write(text)：寫(xiě)入HTML輸出流；
改變 HTML 元素
element.innerHTML=new html content：改變?cè)氐膇nner HTML；
element.attribute=new value：改變HTML元素的屬性值；
element.setAttribute(attribute, value)：改變HTML元素的屬性值；
element.style.property=new style：改變HTML元素的樣式；
avaScript一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類(lèi)型、弱類(lèi)型、基于原型的語(yǔ)言，內(nèi)置支持類(lèi)型。它的解釋器被稱(chēng)為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶(hù)端的腳本語(yǔ)言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。
JavaScript 顯示數(shù)據(jù)
JavaScript 可以通過(guò)不同的方式來(lái)輸出數(shù)據(jù)：
使用 window.alert() 彈出警告框。
使用 document.write() 方法將內(nèi)容寫(xiě)到 HTML 文檔中。
使用 innerHTML 寫(xiě)入到 HTML 元素。
使用 console.log() 寫(xiě)入到瀏覽器的控制臺(tái)。
使用 window.alert()
你可以彈出警告框來(lái)顯示數(shù)據(jù)：
實(shí)例
nbsp;html>
我的第一個(gè)頁(yè)面
我的第一個(gè)段落。
操作 HTML 元素
如需從 JavaScript 訪問(wèn)某個(gè) HTML 元素，您可以使用 document.getElementById(id) 方法。
請(qǐng)使用 “id” 屬性來(lái)標(biāo)識(shí) HTML 元素，并 innerHTML 來(lái)獲取或插入元素內(nèi)容：
實(shí)例
nbsp;html>
我的第一個(gè) Web 頁(yè)面
"demo">我的第一個(gè)段落
以上 JavaScript 語(yǔ)句（在 標(biāo)簽中）可以在 web 瀏覽器中執(zhí)行：
document.getElementById(“demo”) 是使用 id 屬性來(lái)查找 HTML 元素的 JavaScript 代碼 。
innerHTML=“段落已修改。” 是用于修改元素的 HTML 內(nèi)容(innerHTML)的JavaScript 代碼。
在本教程中
在大多數(shù)情況下，在本教程中，我們將使用上面描述的方法來(lái)輸出：
上面的例子直接把 id=”demo” 的
元素寫(xiě)到 HTML 文檔輸出中：
寫(xiě)到 HTML 文檔
出于測(cè)試目的，您可以將JavaScript直接寫(xiě)在HTML 文檔中：
實(shí)例
nbsp;html>
我的第一個(gè) Web 頁(yè)面
我的第一個(gè)段落。
Fri Apr 22 2022 16:20:12 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
請(qǐng)使用 document.write() 僅僅向文檔輸出寫(xiě)內(nèi)容。
如果在文檔已完成加載后執(zhí)行 document.write，整個(gè) HTML 頁(yè)面將被覆蓋。
實(shí)例
nbsp;html>
我的第一個(gè) Web 頁(yè)面
我的第一個(gè)段落。
"MYFUNCTION()">點(diǎn)我
寫(xiě)到控制臺(tái)
如果您的瀏覽器支持調(diào)試，你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。
瀏覽器中使用 F12 來(lái)啟用調(diào)試模式， 在調(diào)試窗口中點(diǎn)擊 “Console” 菜單。
nbsp;html>
我的第一個(gè) Web 頁(yè)面
實(shí)例 console 截圖：
您知道嗎?
程序中調(diào)試是測(cè)試，查找及減少bug(錯(cuò)誤)的過(guò)程。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
