JavaScript在web中的简单使用（二）

来源：互联网发布：使命召唤10优化好吗编辑：程序博客网时间：2024/06/10 18:02

前言：前面对JavaScript的常用概念做了介绍，现在一起了解一下JavaScript在web中是如何使用的，本文会介绍JavaScript的一些简单用法。

引入方式

我们先了解一下JavaScript应该如何引入到我们的Html页面中，JavaScript的引入方式大体上分为两种，方式一：内嵌，即在我们的HTML页面中直接嵌入JavaScript脚本；方式二：外联，即链接外部的JavaScript脚本文件。下面详细介绍一下两个方式的具体实现方法：

内嵌

内嵌的方式，我们平时直接在HTML页面中，通过在<head>标签中添加<script>标签，然后在<script>标签里面添加需要的JavaScript脚本代码。

<head><meta charset="UTF-8"><title>获取元素</title><script type="text/javascript">//此处写下你的JavaScript代码</script></head>

在<script>标签中的type 属性是可以省略的，因为默认就是这个属性值

外联

外联的方式，在HTML页面中，通过<script src=" ">在src属性中设置对应的JavaScript脚本文件，该文件应该是一个以.js为扩展名的文件。

<script src="test.js" type="text/javascript" charset="utf-8"></script>

执行

引入了JavaScript，这时候我们需要学习一下，应该在什么时候执行这些操作呢。所以就需要了解JavaScript中的事件。这里先讲一下几个简单的事件，其他的后面慢慢补充吧。onload

首先谈一下，有些时候需要在页面加载时对用户做出一下提醒操作，这时候就要用到页面加载事件：onload，这个onload其实是window对象的事件，因为这个一般是用于在浏览器窗口加载页面的时候执行的，用法如下：

<head><meta charset="UTF-8"><title></title><script>window.onload = function() {//初始化页面后要执行的操作}</script></head>

平时页面少不了数据处理，比如很多网站都会有一个登录或者注册页面，特别是用户注册时，我们一定要对用户输入的数据进行校验，看格式是否符合标准，这些数据往往都是通过表单来提交的，表单数据的提交就需要一个事件 onsubmit，然后我们是这样子使用的：

首先在<form>标签中添加注册这个onsubmit事件，而onsubmit事件的具体功能又通过JavaScript中的 checkForm() 方法来实现：

<form action="#" method="get" name="regForm" onsubmit="return checkForm()">

然后在<script>标签中写下具体的实现过程：

<head><meta charset="UTF-8"><title>注册页面</title><script>function checkForm(){//具体的操作过程}</script></head>

输出

接下来，我们稍微了解一下JavaScript向外输出的几个操作：

1、弹出对话框 ：alert(); 2、向页面指定位置写入内容：innerHTML(); 3、向页面写入内容：document.write();

先来看看第一种输出方式对话框：

我们常用的对话框有三种，第一种是普通的提示对话框（alert()），或者也可以成为警告对话框，一般用于在用户执行某些操作不规范或者报错的时候给出相应的提示，用法很简单：

function showAlert() {     alert("提示信息！");   }

有些操作不能让系统默认执行，需要用户自己选择然后根据用户选择做出对应的响应，而且这种选择的状态只有两种，即确定或者取消，这时候就可以使用询问对话框（confirm()），具体用法如下：

function confirmAlert(){   if (confirm("你确定提交吗？"))    {  //点击确定之后的操作    }    else    {//点击了取消之后的操作     }}

还有一种情况，有时候在执行过程中需要动态地提示用户输入一些内容，这时候就需要用到输入对话框了（prompt()）：

prompt("请输入内容");

然后我们还可以通过 var content = prompt("请输入内容",""); 这样子获取到用户输入的内容。

看完了对话框，我们来学习一下如何向页面指定位置写入内容，这个指定位置，其实就是在页面中的某一个元素中写一段内容，然后就可以覆盖掉原来的设置。在这之前，我们需要先回顾一下如何在JavaScript代码中找到需要的元素了。上一篇文章介绍了JavaScript中的三大对象，其中有一个是DOM对象，其实就是document，指的就是整个html文档，那获取到文档中的内容，当然就需要用到document对象了，document对象常用的获取元素的方式有三种，但是我这里只是需要操作某个元素，所以我们使用getElementById()方法。在元素内部，我们设置了id，然后这里就通过这个设定的id来获取到该元素。获取到元素之后，就可以做想要的操作了。

document.getElementById("userspan").innerHTML="<font color='red'>这是一串文字!</font>";

第三种输出方式，向页面写入内容：document.write();这个输出方式很少用到，一般很少会是直接向页面输入内容的。

阅读全文

1 0