码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript学习笔记一

时间:2015-10-31 15:36:21      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:

一、JS实现

  需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

  Script标签:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <p>
            JavaScript 能够直接写入 HTML 输出流中:
        </p>
        <script>
            document.write("<h1>This is a heading</h1>");
            document.write("<p>This is a paragraph.</p>");
        </script>
        <p>
            您只能在 HTML 输出流中使用 <strong>document.write</strong>。
            如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
        </p>
    </body>
</html>

  技术分享

 

二、JS输出

  1、操作HTML元素

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>My First Web Page</h1>
        <p id="demo">My First Paragraph.</p>
        <script>
            document.getElementById("demo").innerHTML="My First JavaScript";
        </script>
    </body>
</html>

  JavaScript 由 web 浏览器来执行。在这种情况下,浏览器将访问 id="demo" 的 HTML 元素,并把它的内容(innerHTML)替换为 "My First JavaScript"。

  2、写到文档输出

<script>
  document.write("<p>My First JavaScript</p>");
</script>

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

  ps:JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

三、JS变量

  1、JavaScript变量

  • 用于存放值和表达式
  • 变量以字母或$或_开头
  • 变量名称对大小写敏感

  2、声明JavaScript变量

var carname;

  3、JavaScript数据类型

  JavaScript的数据类型有:字符串、数字、Boolean、数组、对象、Null、Undefined

  创建数组:

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

  创建JavaScript对象:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script>
            var person=
            {
                firstname : "Bill",
                lastname  : "Gates",
                id        :  5566
            };
            document.write(person.lastname + "<br />");
            document.write(person["lastname"] + "<br />");
        </script>
    </body>
</html>

  4、局部和全局JavaScript变量

  在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。

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

  注意:如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

四、JS函数

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

  JavaScript函数语法:

function myFunction(var1,var2)
{
  这里是要执行的代码
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <p>点击这个按钮,来调用带参数的函数。</p>
        <button onclick="myFunction(‘Bill Gates‘,‘CEO‘)">点击这里</button>
        <script>
            function myFunction(name,job)
            {
            alert("Welcome " + name + ", the " + job);
            }
        </script>
    </body>
</html>

 五、JS错误

  当JavaScript错误发生时,JavaScript引擎通常会停止,并产生一个错误消息:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>这是我的第一个JavaScript项目</title>
    </head>
    <body>
        <script>
            function myFunction()
            {
            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 + ".";
              }
            }
        </script>
        <p>Please input a number between 5 and 10:</p>
        <input id="demo" type="text">
        <button type="button" onclick="myFunction()">Test Input</button>
        <p id="mess"></p>
    </body>
</html>

技术分享

六、JS验证

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

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

  必填项目:

<!DOCTYPE html>
<html>
    <head>
        <script>
            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>

  E-mail验证:

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

<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>

 

JavaScript学习笔记一

标签:

原文地址:http://www.cnblogs.com/xujian2014/p/4921986.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!