為什么學(xué)習(xí) JavaScript?
JavaScript 是 web 開發(fā)人員必須學(xué)習(xí)的 3 門語言中的一門：
1.HTML 定義了網(wǎng)頁的內(nèi)容
2.CSS 描述了網(wǎng)頁的布局
3.JavaScript 網(wǎng)頁的行為
JavaScript 是互聯(lián)網(wǎng)上最流行的腳本語言，這門語言可用于 HTML 和 web碉考，更可廣泛用于服務(wù)器侯谁、PC、筆記本電腦墙贱、平板電腦和智能手機等設(shè)備惨撇。
JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言。
JavaScript 是可插入 HTML 頁面的編程代碼报腔。
JavaScript 插入 HTML 頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行纯蛾。
JavaScript：直接寫入 HTML 輸出流
<script>
document.write("<h1>這是一個標(biāo)題</h1>");
document.write("<p>這是一個段落翻诉。</p>");
</script>
- 您只能在 HTML 輸出中使用 document.write。如果您在文檔加載后使用該方法剑令，會覆蓋整個文檔拄查。
JavaScript：對事件的反應(yīng)
<button type="button" onclick="alert('歡迎!')">點我!</button>
點擊按鈕則會彈出彈窗。
JavaScript：改變 HTML 內(nèi)容
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改變內(nèi)容
}
</script>
<button type="button" onclick="myFunction()">點擊這里</button>
JavaScript：改變 HTML 圖像
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
以上實例中代碼 element.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 科平。
JavaScript：改變 HTML 樣式
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改變樣式
}
</script>
<button type="button" onclick="myFunction()">點擊這里</button>
JavaScript：改變 HTML 樣式
<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()">點擊這里</button>
以上實例只是普通的驗證瞪慧，如果要在生產(chǎn)環(huán)境中使用，需要嚴(yán)格判斷氨菇，如果輸入的空格妓湘，或者連續(xù)空格 isNaN 是判別不出來的⊥阊校可以添加正則來判斷
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
alert("不是數(shù)字");
}
