JavaScript入门基础学习

时间:2022-04-28 14:30:58

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。

JavaScript中的常见语句用法
1. document.write()方法:常用来网页向文档中输出内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document.write()的使用</title>
</head>
<body>

<p>
JavaScript 能够直接写入 HTML 输出流中:
</p>
<script> document.write("网页文档中输出了一段文字"); document.write("<h1>网页文档中输出HTML形式</h1>"); function myFunction() { document.write("在文档已加载后使用它(比如在函数中),会覆盖整个文档"); } </script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
<button onclick="myFunction()">点我</button>
</body>
</html>

运行结果为:
JavaScript入门基础学习

点击按钮后:
JavaScript入门基础学习

2. innerHTML的使用
设置或返回表格行的开始和结束标签之间的 HTML
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
是获取或设置指定DOM元素(id)的内容,如<div id="dddd"></div>之间的东西。与id挂钩。
innerText:从起始位置到终止位置的内容, 但它去除Html标签

innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">去除HTML标签后的文本</a>

innerHTML可以方便有快捷的插入大段的HTML内容,但是不能对innerHTML插入的内容进行处理。

document中write脚本是作为文本直接处理,CSS风格奏效
innerHTML 中CSS没有生效,同样,javascript没有生效

document.write只推荐在页面onload之前使用
如果加载时就要用脚本输出,用document.write好一点! 速度会更快!
如果网页已经加载完毕,用innerHTML会更安全一点,用document.write会出错

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>innerHTML</title> 
<script> function myTest(){ document.getElementById("demo").innerHTML="段落已修改"; } </script>
</head>
<body>

<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<button onclick="myTest()">修改</button>
</body>
</html>

运行结果为:

JavaScript入门基础学习

点击按钮后

JavaScript入门基础学习

3. JavaScript 弹窗

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

1). 警告框 alert
警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。

语法

window.alert("sometext");

window.alert() 方法可以不带上window对象,直接使用alert()方法。

2). 提示框 prompt
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

语法:prompt(text,defaultText)
语法

window.prompt("text","defaultText");

text 可选。要在对话框中显示的纯文本(而不是 HTML 格式的文本)
defaultText 可选。默认的输入文本。
window.prompt() 方法可以不带上window对象,直接使用prompt()方法。

<html>
<head>
<script type="text/javascript"> function myTest() { var name=prompt("请输入您的姓名","") if (name!=null && name!="") { document.write("Hello " + name + "!") } } </script>
</head>

<body>
<input type="button" onclick="myTest()" value="点击" />
</body>
</html>

运行结果为:

JavaScript入门基础学习

3). 确认框 confirm
确认框通常用于验证是否接受用户操作。
当确认卡弹出时,用户可以点击 “确认” 或者 “取消” 来确定用户操作。
当你点击 “确认”, 确认框返回 true, 如果点击 “取消”, 确认框返回 false。

语法

window.confirm("sometext");

window.confirm() 方法可以不带上window对象,直接使用confirm()方法。