😁 作者简介:一名大四的学生,致力学习前端开发技术
⭐️个人主页:夜宵饽饽的主页
❔ 系列专栏:JavaScript小贴士
👐学习格言:成功不是终点,失败也并非末日,最重要的是继续前进的勇气
1.2,JavaScript的输出
1.2.1,页面输出
<script>
document.write("在页面显示")
</script>
1.2.2,控制台输出
<script>
console.log("输出一条日志");
console.info("输出一条信息");
console.warn("输出一条警告");
console.error("输出一条错误");
</script>
一些使用控制台输出语句技巧:
1.命名日志打印
function sum(a, b) {
console.log({b});//关键语句
return a + b;
}
sum(1, 2);
sum(4, 5);
2. 高级化格式
将某些东西打印到控制台最常见方法是简单地使用一个参数调用console.log(),有时我们可能想要打印一条包含多个信息。幸运地是,console.log()可以使用%s,%i 等说明sprintf()格式化字符串
const user = 'john_smith';
const attempts = 5;
console.log(user+"登录失败了"+attempts+"次")//我们也可以用字符串地拼接
console.log('%s 登录失败了 %i 次', user, attempts);//这是高级化格式打印
以下是可用说明符的列表:
说明符作用%s元素转换为字符串
-
%d 或 %i元素转换为整数
-
%f元素转换为浮点数
-
%o元素以最有效的格式显示:
%o说明符(为值关联了正确的打印格式)可以在文本消息中插入数组,对象,DOM元素和常规文本,而不会失去交互性。
const myObject = {
name: 'John Smith',
profession: 'agent'
};
console.log('Neo, be aware of %o', myObject);
-
%O元素以最有效的格式显示
-
%c应用提供的CSS
3.具有样式打印(了解一下即可)
浏览器控制台允许我们将样式应用于打印的消息。
我们可以通过将%c说明符与相应的CSS样式结合使用来实现。例如,让我们发送一条日志消息,该消息显示字体大小和字体粗细情况:
console.log('%c Big message', 'font-size: 36px; font-weight: bold');
说明符%c应用CSS样式’font-size: 36px; font-weight: bold’
4.深度不受限制地cossole.dir()
const myObject = {
propA: {
propB: {
propC: {
propD: 'hello'
}
}
}
};
console.log(myObject)
console.dir(myObject,{depth:null})
1.2.3,弹出窗口输出
如何使用JavaScript向弹出窗口输出一句话,请参考以下代码。
<script>
alert("你好Javascript");
</script>
1.2.4,弹出输入框
如何使用JavaScript弹出窗口输入框,请参考以下代码。
var a=prompt('这是一个输入框')
console.log(a)