搜索
简帛阁>技术文章>JavaScript学习笔记一

JavaScript学习笔记一

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

 

、JS实现需在HTML页面中插入JavaScript,请使用<script>标签。<script>和</script>会告诉JavaScript在何处开始和结束
JavaScript基础1trycatch使用小写字母。大写字母会出错。2Throw声明throw声明的作用是创建exception(异常)。你可以把这个声明与trycatch声明配合使用,以达到
数据类型Javascript是一种弱类型的脚本语言,它共有6种数据类型,又被分为基础数据类型,特殊数据类型,复合数据类型。1基础数据类型:数值型,字符串型,布尔型2特殊数据类型:null,und
最近在学习ES6的时候,看到ES6相对于ES5新增了块级作用域,在ES5中内层变量可能会覆盖外层变量,引起全局变量的污染vartmpnewDate();functionf(){consolelog(t
Objectassign(target,source1,source2,)//用于对象的复制合并(同名属性后覆盖前)或拷贝(拷贝自身可枚举属性,不拷贝继承属性或不可枚举属性),将source源对象的可
基本概念javascript是一门解释型的语言,浏览器充当解释器。js执行引擎并不是一行一行的执行,而是一段一段的分析执行。延迟脚本HTML401中定义了defer属性,它的用途是表明脚本在执行时不会
1延时脚本运行的方法:方法:把全部javascript引用放在<body>元素中,页面内容后,如复制代码代码如下:<html><head><title&g
1标识符与关键字标识符以字母开头,可以包含字母、数字、下划线。标识符不能使用以下保留字符:代码如下:abstract,boolean,break,byte,case,catch,char,class,
JavaScript的核心语言特性在ECMA262中是以名为ECMAScript的伪语言的形式来定义的。、变量和数据类型1变量JavaSript是弱类型语言,可以通过var定义任何类型变量,同时同
今天,2017317开始利用课余时间仔细学习JavaScript高级程序设计》,将需要掌握的知识点记录下来,争取把书里的所有代码敲一遍并掌握。1、标识符命名最好是第一个字母小写,剩下每个单词的首字