JavaScript入门基础学习

来源：互联网发布：java恶魔城编辑：程序博客网时间：2024/05/22 06:40

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>

运行结果为：
这里写图片描述

点击按钮后:
这里写图片描述

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>

运行结果为：

这里写图片描述

点击按钮后

这里写图片描述

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>

运行结果为：

这里写图片描述

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

语法

window.confirm("sometext");

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

0 0