javascript基础

  • 使用js

  如果需要把一段 JavaScript 插入 HTML 页面,我们需要使用 <script> 标签(同时使用 type 属性来定义脚本语言)。

  这样,<script type="text/javascript"> 和 </script> 就可以告诉浏览器 JavaScript 从何处开始,到何处结束。

  当页面载入时,会执行位于 body 部分的 JavaScript。

  当被调用时,位于 head 部分的 JavaScript 才会被执行。

  • 变量

  JavaScript 变量名称的规则:

      var 语句来声明 JavaScript 变量,如果您再次声明了 JavaScript 变量,该变量也不会丢失其原始值。

    1. 变量对大小写敏感(yY 是两个不同的变量)
    2. 变量必须以字母或下划线开始
  •   运算符

    

  执行类型转换的规则如下:

    1. 如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1,并非0就是true。
    2. 如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。
    3. 如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。
    4. 如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。

  在比较时,该运算符还遵守下列规则:

    1. 值 null 和 undefined 相等。
    2. 在检查相等性时,不能把 null 和 undefined 转换成其他值。
    3. 如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。
    4. 如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。

     重要提示:即使两个数都是 NaN,等号仍然返回 false,因为根据规则,NaN 不等于 NaN。

  •   javascript消息框

    可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。 

  警告框

    警告框经常用于确保用户可以得到某些信息。

    当警告框出现后,用户需要点击确定按钮才能继续进行操作。example:alert("hello");

  确认框

    确认框用于使用户可以验证或者接受某些信息。

    当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

    如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。example:comfirm("提示需要确认的内容");

  提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。example:prompt("文本","默认值");

  • 函数

   函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

将脚本编写为函数,就可以避免页面载入时执行该脚本。

函数包含着一些代码,这些代码只能被事件激活,或者在函数被调用时才会执行。

你可以在页面中的任何位置调用脚本(如果函数嵌入一个外部的 .js 文件,那么甚至可以从其他的页面中调用)。

函数在页面起始位置定义,即 <head> 部分。

JavaScript 变量的生存期:

当您在函数内声明了一个变量后,就只能在该函数中访问该变量。当退出该函数后,这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量,这是因为只有声明过变量的函数能够识别其中的每个变量。

如果您在函数之外声明了一个变量,则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始,在页面关闭时结束。

  • with

     with(expression){...},example:

function Student() {
  this.name = "zs";
  this.age = "18";
  this.gender = "male";
}
var st=new Student();
with(st)
{ //使用了with后name就表示st对象中的name属性即:st.name
  var str = "姓名: " + name + "<br>";
  str += "年龄:" + age + "<br>";
  str += "性别:" + gender;
  document.write(str);
}
下面是一个表单提交时的邮箱格式的验证

<html>

<head>

<script type="text/javascript">

function validate_email(field,alerttxt) {

with (field) {

    apos=value.indexOf("@");

        dotpos=value.lastIndexOf(".");

    if (apos<1||dotpos-apos<2) {

      alert(alerttxt);

      return false;

    } else {

      return true;

    }

}

}

function validate_form(thisform) {

with (thisform) {

if (validate_email(email,"Not a valid e-mail address!")==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>  

  • Html Dom模型

       

        当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

        HTML DOM 模型被构造为对象的树。

         DOM HTML 树    

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

    1. JavaScript 能够改变页面中的所有 HTML 元素
    2. JavaScript 能够改变页面中的所有 HTML 属性
    3. JavaScript 能够改变页面中的所有 CSS 样式
    4. JavaScript 能够对页面中的所有事件做出反应

   

查找 HTML 元素

通常,通过 JavaScript,您需要操作 HTML 元素。

为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

    1. 通过 id 找到 HTML 元素

    var x=document.getElementById("intro");)

如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

如果未找到该元素,则 x 将包含 null。

             2.通过标签名找到 HTML 元素    var y=x.getElementsByTagName("p");

             3.通过类名找到 HTML 元素   通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

    HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

    document.write() 可用于直接向 HTML 输出流写内容。

    修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

    如需改变 HTML 元素的内容,请使用这个语法:document.getElementById(id).innerHTML=new HTML

       改变 HTML 属性

    如需改变 HTML 元素的属性,请使用这个语法:document.getElementById(id).attribute=new value(document.getElementById("image").src="xx.jpg";//修   改img的src属性)

   HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

   改变 HTML 样式

    如需改变 HTML 元素的样式,请使用这个语法:

        document.getElementById(id).style.property=new style(document.getElementById("p2").style.color="blue";)

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

    

原文地址:https://www.cnblogs.com/charleszhang1988/p/3037690.html