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