javascript基础复习--2016.6.16

最新推荐文章于 2023-06-23 15:10:30 发布

刘小妞

最新推荐文章于 2023-06-23 15:10:30 发布

阅读量446

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/liuwengai/article/details/51695028

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

1.javascript引入

<script>
//这里是javascript代码
</script>

<script type="text/javascript" src="main.js">
</script>

对比css

<style>
//这里是css样式部分
</style>

<link type="text/css" href="css/mian.css">

2.javascript输出
访问某个html元素，可以使用document.getElementById(id)方法

<div id="div1" >
这里是一段原来的文字
</div>
<script>
document.getElementById("div1").innerHTML="修改后的文字";
</script>

写到文档输出

document.write("直接写到网页上的文字");

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>

3.数组

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
//或者
var cars=new Array("Audi"，"BMW","Volovo");
//或者
var cars=["Audi"，"BMW","Volvo"];

4.对象
对象由花括号分割。在括号内部，对象的属性以名称和值对的形式定义。

var person={firstname:"Bill",lastname:"Gates",id:0329};

输出：

document.write(person.lastname + "<br />");
document.write(person["lastname"] + "<br />");

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

var person;
var car="Volvo";
document.write(person + "<br />");//输出undefined
document.write(car + "<br />");//输出Volvo
var car=null
document.write(car + "<br />");//输出null

声明变量类型

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

创建javascript对象

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

访问对象的属性

var txt="hello javascrpit";
var x=message.toUpperCase();

5函数

<DOCTYPE html>
<html>
<head>
<script>
function clickFunction()
{
alert("hello javascript");
}
</script>
</head>
<body>
<button onclick="clickFunction()">点击按钮</button>
</body>
</html>

局部变量和全局变量
通过var在函数内部声明的变量称为局部变量，所以只能在函数内部访问它。函数运行完毕，本地变量就会自动被删除。
在函数外部声明的变量是全局变量，网页上所有的脚本和函数都能访问它。在页面关闭后会被删除。
如果直接使用未声明的变量，该变量将自动作为全局变量。
6.运算符

//数字和字符串相加，结果将成为字符串
x=5+5;
document.write(x);//10

x="5"+"5";
document.write(x);//55

x=5+"5";
document.write(x);//55

x="5"+5;
document.write(x);//55

7循环语句

<button onclick="clickFunction()">点击按钮</button>
<p id="demo"></p>
<script>
function clickFunction()
{
var x="";
var time=new Date().getHours();//获取当前的小时数
if(time<20)
{
x="Good day";
}
document.getElementById("demo").innerHTML=x;
}
</script>

//获取今天是星期几，其中星期日为0，星期一为1。。。
var day=new Date().getDay();

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

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
  {
  txt=txt + person[x];
  }

8.错误
try语句测试代码块的错误
catch语句处理错误，try代码块发生错误时，所执行的代码块
throw语句创建自定义错误
当错误发生时，javascript通常会停止，抛出一个错误。

<input type="button" value="查看消息" onclick="message()" />//定义一个按钮
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="本页有一个错误。\n\n";
  txt+="错误描述：" + err.message + "\n\n";
  txt+="点击确定继续。\n\n";
  alert(txt);
  }//发生错误后显示的信息
}
</script>

throw允许我们创建自定义错误

<p>请输入 5 到 10 之间的数字：</p>
<input id="demo" type="text" />//输入的文本框
<button type="button" onclick="myFunction()">测试输入值</button>
<p id="mess"></p>
<script>
function myFunction()
{
try
{ 
var x=document.getElementById("demo").value;//获取输入的值
if(x=="")    throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10)     throw "太大";
if(x<5)      throw "太小";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="错误：" + err + "。";
}
}
</script>

9.表单验证
表单的数据被送往服务器之前对HTML表单中的这些输入数据进行验证。

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)//with 语句：为语句设定默认对象。with (object){ statements } 
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}//光标显示在email，返回false
  }
}
</script>
</head>

<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post"> //表单提交时调用验证有效性的函数
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

刘小妞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript基础复习--2016.6.16

1.javascript引入<script>//这里是javascript代码</script><script type="text/javascript" src="main.js"></script>对比css<style>//这里是css样式部分</style><link type="text/css" href="css/mian.css">2.javascript输出访问某
复制链接

扫一扫

专栏目录