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

JavaScript快速入门

2016-11-07 00:00 330 查看
函数有return，但是没有返回值声明。

function myFunction()  //函数名前面没有声明返回值类型
{
var x=5;
return x;
}

var myVar=myFunction();

局部 JavaScript 变量，只能在函数内部访问它，只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量，在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它，在页面关闭后被删除。。

向未声明的 JavaScript 变量来分配值，如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

如需把两个或多个字符串变量连接起来，请使用 + 运算符。如果把数字与字符串相加，结果将成为字符串。

a="What a very";
b="nice day";
c=txt1+txt2;

if语句

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

<p id="demo"></p>

<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<10)
{
x="Good morning";
}
else if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>


JavaScript 错误 - Throw、Try 和 Catch

//
try{
adddlert("Welcome guest!");
}
catch(err){
txt=err.message;
alert(txt);
}

//throw自定义错误，可以是 JavaScript 字符串、数字、逻辑值或对象。

try
{
var x=document.getElementById("demo").value;
if(x=="")    throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10)     throw "too high";
if(x<5)      throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}


JavaScript 表单验证

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

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

用户是否已填写表单中的必填项目？

用户输入的邮件地址是否合法？

用户是否已输入合法的日期？

用户是否在数据域 (numeric field) 中输入了文本？

有时候，我在一个程序代码中，多次需要使用某对象的属性或方法，照以前的写法，都是通过:对象.属性或者对象.方法这样的方式来分别获得该对象的属性和方法，着实有点麻烦，学习了with语句后，可以通过类似如下的方式来实现：
with(object)
{
var str = 属性1;
} 去除了多次写对象名的麻烦。

下面验证Email表哥是否为空：

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

function validate_required(field,alerttxt)
{
with (field)
{
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}
}
}
</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>


DOM - 改变 HTML

//改变 HTML 输出流
document.write(Date());
//改变 HTML 内容
document.getElementById("p1").innerHTML="New text!";
//改变 HTML 属性
<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>
//


DOM - 改变 CSS

//改变 HTML 样式
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById('p2').style.visibility='visible'
</script>

DOM Style 对象的所有属性：

http://www.w3school.com.cn/jsref/dom_obj_style.asp#text

JavaScript HTML DOM 对事件做出反应

html的元素可以拥有事件，下面的两个例子都拥有onclick事件：

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
<button onclick="displayDate()">点击这里</button>

使用 JavaScript 来向 HTML 元素分配事件：

document.getElementById("myBtn").onclick=function(){displayDate()};

onload 和 onunload 事件会在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。

onchange 事件常结合对输入字段的验证来使用。下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<input type="text" id="fname" onchange="myFunction()">

function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}

onmouseover 和 onmouseout 事件，可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

更多DOM 事件对象查询：http://www.w3school.com.cn/jsref/dom_obj_event.asp

添加和删除新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。一定要按照顺序来添加。而删除已有的 HTML 元素，您必须首先获得该元素的父元素下面是例子：

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航