html和css制作简单的个人网页代码,制作一张简单的网页（HTML+CSS+JS) 【3】

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

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

1.写js的基本格式：

结果：0

4

9

在该例子中，str.indexof(“v”,8) 这个的意思是说从该字符串的下标为8的数开始寻找v这个字符，找到它在9这个位置。

如果没有找到该字符，则会输出-1.

8.字符串的分割split()

var mystr = "www.baidu.com";

document.write(mystr.split(".")+"");

document.write(mystr.split("", 2)+"“);

三.DOM操作

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

document.getElementById(“id”)

当然，通过name属性查也未尝不可。

ducument,getElementsByname("name")

需要注意的是，id只能有一个，但是name属性可以不唯一。

2.通过innerHTML我们可以获取甚至改变网页上的内容。

Object.innerHTML

举个例子��：

TODO supply a title

hello world!

显示效果：

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来完成。

代码如下：

Sigh Up

Your basic info

Name:

Passward:

Age:

Under 13

13 or older

Your profile:

Job Role:

Front-End Developer

Back-End Developer

Interests:

Development

Design

Business

显示效果：

当我没填姓名时：

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