JavaScript学习笔记（一）

JavaScript输出

1.操作HTML元素

如需从JS中访问某个HTML元素，可以使用document.getElementById(id)方法，id用来标识HTML属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>



<body>
<h1>我的第一张网页</h1>
<p id="demo">我的第一个段落</p>
</body>


<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script>

</html>

浏览器将访问id=“demo”的HTML元素，并把它的内容（innerHTML）替换为“我的第一段 JavaScript”

2.写到文档输出

<!DOCTYPE html>
<html>
<body>

<h1>第一个标题</h1>

<script>
document.write("<p>我的第一个JS段落</p>")；
</script>


</body>

</html>

使用document.write()仅仅向文档输出内容。如果在文档已经完成加载后执行document.write(),整个HTML页面将被覆盖；

<!DOCTYPE html >
<html>
<body>

<h1>第一个标题</h1>
<p>第一个段落</p>
<button  onclick="myFunction()">Click</button>

<script>
function myFunction()
{
   document.write("文档消失");
}
</script>

</body>
</html>

3.改变HTML样式

document.getElementById(id).style.property=new style

<!DOCTYPE html>
<html>
<body>
<p id="p2">HEllo World!</p>
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'"
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>

4.HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

onload和onunload事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

onchange事件

onchange 事件常结合对输入字段的验证来使用。

JavaScript语句

JavaScript语句向浏览器发出命令。告诉浏览器该做什么。JS对大小写敏感。

JS会忽略多余空格。

可使用反斜杠对代码进行换行,如

document.write("hello\
World");

JavaScript变量

/**********数字*********/
var x=2;

/**********字符串*********/
var string="hello world";
var name='wkl';

/**********数组*********/
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
var cars=new Array("Audi", "BMW","Volvo");

/**********对象*********/
/*对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式（name:value）来定义。属性由逗号分隔。*/
var person={
firstname:"Bill";
lastname :"Gates";
id       :5566；
}；
/*对象属性有两种寻址方式：*/
name=person.firstname;
name=persong["lastname"];

JavaScript函数

<!DOCTYPE html>
<html>
<body>
<p>点击按钮，调用参数函数</p>

<button onclick="myFunction('Bill','CEO')"> 点击</button>


<script>
function myFunction(name,job)
{
 alert("Welconm"+name+",the"+job);
}
</script>
</body>
</html>

局部JavaScript变量

在JS函数内部声明的变量是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。只要函数运行完毕，本地变量就会被删除。

全局JavaScript变量

在函数外部声明的变量是全局变量，网页上的所有脚本和函数都能访问。

JavaScript变量的生存期

局部变量会在函数运行以后被删除；全局变量在页面关闭后被删除。

若把值赋给尚未声明的变量，这个变量会自动作为全局变量声明。

JavaScript中的循环

不同类型的循环

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

For/In循环

<!DOCTYPE html>
<html>
<body>
<p>点击按钮，调用函数</p>

<button onclick="myFunction()"> 点击</button>
<p id="demo"></p>


<script>
function myFunction()
{
    var x;
    var txt="";
    var person={
            fname:"Bill",
            Lname:"Gates",
            age:56
            };
    for(x in person)
    {
        txt=txt + person[x];
    }

document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>

JavaScript表单验证

javascript可用来在数据被送往服务器前对HTML表单中的这些数据进行验证。

被javascript验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？

必填项目（若必填为空，则弹出警告框并且函数返回值为false）

function validate_required(field,alerttxt)
{
   with(field)
   {
     if(value==null||value=="")
     {
       alert(alerttxt);
       return false;
     }
     else
      {
        return true;
      }
   }      
}

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

posted @ 2017-09-15 17:09 For&you 阅读(162) 评论(0) 收藏举报

刷新页面返回顶部

For&you