您的位置：首页 > Web前端 > JavaScript

制作一张简单的网页（HTML+CSS+JS) 【3】

2017-02-10 12:05 821 查看
        前面两篇文章写了HTML和CSS，接下来这篇我把我学到的JavaScript，做一下简单的总结。如果我把一张网页比作是一幢大楼，那么HTML就是大楼的根基和基本骨架，CSS就是使大楼宏伟的一些装饰物，那么JS就是大楼里面活动的东西。简单的说就是网页上的特效效果都要靠JS来完成，比如一些焦点新闻的轮换、与用户的交互等等。

一.JS的基本知识及窗口交互

1.写js的基本格式：
<script type="text/javascript”>...</script>
2.有关注释：
 （1）单行注释：//
 （2）多行注释：/*.......*/ 
3.定义变量：var 变量名；

4.函数：
function 函数名()
{
函数代码;
}

5.输出内容：document.write()
   (1)多项内容之间用“+”
   (2)要输出空格的时候，可以在输入时加“ ”，一个“ ”表示一个空格。 
6.窗口交互方法
（1）消息对话框-警告：alert（字符串或变量）；



(2)消息对话框-确认：confirm（str）；



(3)消息对话框-提问:prompt(str1,str2);
   需要注意的是str1是显示在文本框中的内容，不可以修改
   而str2是自己要输进去的内容，这是可以修改的 



(4)打开新窗口
window.open([URL], [窗口名称], [参数字符串]}

1>URL这是在网页打开的地址或路径。
2>窗口名称：被打开窗口的名称，由字母、数字和下划线组成 
    一些特殊的名称：
_blank:在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
(5)关闭新窗口
Window.close();

二.认识事件和内置对象

我把一些常用的事件整理出来：
1.onclick（鼠标单击事件）
2.onmouseover（鼠标经过事件）
3.onmouseout（鼠标移开事件）
4.onfocus（光标聚焦事件）
5.onblur（失焦事件）
6.onselect（内容选中事件）
7.onchange（文本框内容改变事件）
8.onload（加载事件）
9.onunload（卸载事件）

接下来的内容是在js中内置对象
1.定义一个时间对象：
var Udate=new Date();
定义初始化：
var d = new Date(2017, 10, 1);  //2017年10月1日
var d = new Date('Oct 1, 2017'); //2017年10月1日
2.返回、设置年份，用四位数表示
get/setFullYear()
3.返回星期，返回的是0-6的数字，0表示星期天。如果要返回相对应“星期”，通过数组完成
getDay()

4.返回/设置时间，单位毫秒数
get/setTime()
5.小写字母转大写字母
var mystr="Hello world!";
var mynum=mystr.toUpperCase();
大写字母转小写字母
toLowerCase()
6.返回指定位置的字符

 字符串中第一个字符的小标是0，最后一个字符的下标为字符串长度减一(string.length-1)
7.返回指定的字符串首次出现的位置

<script type="text/javascript">
var str="I love JavaScript!"
document.write(str.indexOf("I") + "<br />");
document.write(str.indexOf("v") + "<br />");
document.write(str.indexOf("v",8));
</script>
结果：0
           4
           9

在该例子中，str.indexof(“v”,8) 这个的意思是说从该字符串的下标为8的数开始寻找v这个字符，找到它在9这个位置。
如果没有找到该字符，则会输出-1. 
8.字符串的分割split()
var mystr = "www.baidu.com";
document.write(mystr.split(".")+"</br>");
document.write(mystr.split("", 2)+"</br>“);

三.DOM操作

1.在网页中，我们通过id先找到标签，然后进行操作，这是通过ID获取元素。
document.getElementById(“id”)

当然，通过name属性查也未尝不可。
ducument,getElementsByname("name")

需要注意的是，id只能有一个，但是name属性可以不唯一。
2.通过innerHTML我们可以获取甚至改变网页上的内容。

Object.innerHTML
举个例子�：
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p id="test">hello world!</p>
</body>
<script type="text/javascript">
var mystr = document.getElementById("test")
document.write("p标签修改之前："+mystr.innerHTML+ "</br>");
mystr.innerHTML="hello DSCN!"
document.write("p标签修改之前："+mystr.innerHTML + "</br>");
</script>
</html>
显示效果：



3.在js中还能改变HTML的样式
(1)基本语法：
Object.style.property=new style;
（2）基本属性（property）
backgroundColor（元素的背景颜色）
height（元素的高度）
width（元素的宽度）
color（文本的颜色）
font（在一行设置所有的字体属性）
fontFamily（设置元素的字体系列）
fontSize（设置元素的字体大小）

4.显示和隐藏（display）
Object.style.display = value
值为none时，此元素会被隐藏；
值为block时，此元素会被显示。

四.实例介绍

我们已经把网页加上了一些图片来修饰，接下来，我在上面两篇的代码基础之上，在加上一些其他的功能。比如检查表单有没有空格项用户没有填写，而这些需要js来完成。
代码如下：
<html>
<head>
<style type="text/css">
div {

font-weight:bold;
font-family: Microsoft Yahei;
width: 400px;
padding-left: 50px;
margin-left: 450px;
}

h1 {
text-align: center;
}

#sub {
background-color: #689;
width: 250px;
height: 30px;
color:white;
font-weight: bold;
}
body {
background-image: url("http://pic.qiantucdn.com/58pic/20/13/88/25r58PICqQa_1024.jpg");
}
</style>
<script type="text/javascript">
function abc()
{
if (document.getElementById("name").value == "")
{
alert("Please write your name!");
form.myname.focus();
return false;
}
if (document.getElementById("passward").value == "")
{
alert("Please write your password!");
form.mypassward.focus();
return false;
}
if (document.getElementById("profile").value == "")
{
alert("please write your profile!");
form.profile.focus();
return false;
}
}

</script>

</head>

<body>
<div id="sign">
<h1>Sigh Up</h1></br>
<h2>Your basic info</h2>
<form>
<strong>Name:</strong>
<input type="text" name="myname" id="name"/></br>
</br>

<strong>Passward:</strong>
<input type="password" name="mypassward" id="passward"/></br>
</br>

<strong>Age:</strong></br>
<input type="radio" name="age" value="1" checked="checked"/>Under 13</br>
<input type="radio" name="age" value="2" />13 or older</br>
</br>

<strong>Your profile:</strong></br>
<textarea cols="50" rows="4" name="profile" id="profile"></textarea></br>
</br>

<strong>Job Role:</strong></br>
<select>
<option value="Front-End Developer" selected="selected" name="job">Front-End Developer</option>
<option value="Back-End Developer" name="job">Back-End Developer</option>
</select></br>
</br>

<strong>Interests:</strong></br>
<input type="checkbox" name="development" value="1" checked="checked">Development</br>
<input type="checkbox" name="design" value="2" >Design</br>
<input type="checkbox" name="business" value="3" >Business</br>
</br>

<input type="submit" name="Sign Up" value="Sign Up" id="sub" onclick="abc()">
</input>
</form>
</div>
</body>
</html>
显示效果：
当我没填姓名时：



当我没输入密码时，然后以此类推：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JavaScript 事件 DOM
相关文章推荐
新的分享
章节导航