学习，JavaScript 的四种调试输出方式_国服第二切图仔的博客-CSDN博客_js 调试输出 JavaScript简介_国服第二切图仔的博客-CSDN博客 JavaScript 的四种调试输出方式_国服第二切图仔的博客-CSDN博客_js 调试输出笔记

JavaScript简介

1.JavaScript：直接写入 HTML 输出流

document.write("<h1>这是个标题题哦</h1>");
document.write("<p>这是个段落落哦</p>")

2.JavaScript：对事件的反应

<button type="button" onclick="alert('想什么呢')">点点看嘛☠</button>

3,5.JavaScript：改变 HTML 内容,样式

<div id="demo">123</div>

x=document.getElementById("demo");
x.innerHTML="Hello JavaScript";//原本显示123
x.style.color="#277CCB";

4.JavaScript：改变 HTML 图像

function changeImage() {
    element=document.getElementById('myimage')
    if (element.src.match("bulbon")) {
      element.src="img1.png";
    }else{
      element.src="img2.png"
    }
  }

6,JavaScript：验证输入


if isNaN(x) {
    alert("不是数字");
}
 
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
    alert("不是数字");
}

ps：6是复制大大写的，自己搞不明白☹

JavaScript 的四种调试输出方式

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

使用 window.alert()

window.alert(5+6)

使用 document.write() 仅用于测试

<button onclick="document.write(5+6)">试呀试</button>

使用 innerHTML 写入 HTML 元素

访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容

提示：更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。

<p id="demo"></p>
document.getElementById("demo").innerHTML = 5+6;

使用 console.log()

console.log(5+6);

虽然大部分都懂，但还是记下笔记吧，就怕哪天突然忘了了。自己总结的学习笔记，不保证严谨性和正确率。欢迎各位大大前来纠正和指教！\ ^ @ ^ /

今日份打卡……

JavaScript简介

JavaScript 的四种调试输出方式

猜你喜欢