JavaScript快速入门

时间 2019-12-06

原文原文链接

函数有return，可是没有返回值声明。javascript

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

var myVar=myFunction();

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

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

向未声明的 JavaScript 变量来分配值，若是您把值赋给还没有声明的变量，该变量将被自动做为全局变量声明。node

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

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 表单中的这些输入数据进行验证。cookie

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

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

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

下面验证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);