zoukankan      html  css  js  c++  java
  • JS 教程

    1简介
    
    1、JavaScript 是脚本语言
         1.1轻量级的编程语言
         1.2可插入 HTML 页面的编程代码
         1.3可由所有的现代浏览器执行
    
    2、您将学到什么
         2.1JavaScript:写入 HTML 输出
    document.write("<h1>This is a heading</h1>");
    document.write("<p>This is a paragraph</p>");
         2.2JavaScript:对事件作出反应
    <button type="button" onclick="alert('Welcome!')">点击这里</button>
         2.3JavaScript:改变 HTML 内容
    x=document.getElementById("demo")  //查找元素
    x.innerHTML="Hello JavaScript";    //改变内容
         2.4JavaScript:改变 HTML 图像
         2.5JavaScript:改变 HTML 样式
    x=document.getElementById("demo")  //找到元素
    x.style.color="#ff0000";           //改变样式
         2.6JavaScript:验证输入
    if isNaN(x) {alert("Not Numeric")};
    
    
    2实现
    
    1、<script> 标签
         1.1<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
    <script>
     alert("My First JavaScript");
    </script>
    
    
    2、JavaScript 函数和事件
         2.1通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。
    如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。
         2.2<head> 或 <body> 中的 JavaScript
    
    3、外部的 JavaScript
         3.1外部 JavaScript 文件的文件扩展名是 .js。
    <!DOCTYPE html>
    <html>
     <body>
      <script src="myScript.js"></script>
     </body>
    </html>
    
    
    3输出
    
    1、操作 HTML 元素
         1.1如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
    <!DOCTYPE html>
    <html>
     <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>
    
    
    2、写到文档输出
         2.1下面的例子直接把 <p> 元素写到 HTML 文档输出中:
    <!DOCTYPE html>
    <html>
     <body>
      <h1>My First Web Page</h1>
      <script>
       document.write("<p>My First JavaScript</p>");
      </script>
     </body>
    </html>
    
    
    4语句
    
    1、JavaScript 语句
         1.1JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
    document.getElementById("demo").innerHTML="Hello World";
         1.2分号用于分隔 JavaScript 语句。
    
    2、JavaScript 代码
         2.1JavaScript 代码(或者只有 JavaScript)是 JavaScript 语句的序列。
    document.getElementById("demo").innerHTML="Hello World";
    document.getElementById("myDIV").innerHTML="How are you?";
    
         
    3、JavaScript 代码块
         3.1JavaScript 语句通过代码块的形式进行组合。
         3.2块由左花括号开始,由右花括号结束。
         3.3块的作用是使语句序列一起执行。
    function myFunction()
    {
     document.getElementById("demo").innerHTML="Hello World";
     document.getElementById("myDIV").innerHTML="How are you?";
    }
    
    
    4、JavaScript 对大小写敏感。
    
    5、空格
         5.1JavaScript 会忽略多余的空格。
    
    6、对代码行进行折行
         6.1您可以在文本字符串中使用反斜杠对代码行进行换行。
    document.write("Hello 
    World!");
    
    
    5注释
    
    1、JavaScript 注释
         1.1我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。
         1.2单行注释以 // 开头。
    // 输出标题:
    document.getElementById("myH1").innerHTML="Welcome to my Homepage";
    // 输出段落:
    document.getElementById("myP").innerHTML="This is my first paragraph.";
    
    
    2、JavaScript 多行注释
         2.1多行注释以 /* 开始,以 */ 结尾。
    /*
    下面的这些代码会输出
    一个标题和一个段落
    并将代表主页的开始
    */
    document.getElementById("myH1").innerHTML="Welcome to my Homepage";
    document.getElementById("myP").innerHTML="This is my first paragraph.";
    
    
    3、使用注释来阻止执行
    //document.getElementById("myH1").innerHTML="Welcome to my Homepage";
    document.getElementById("myP").innerHTML="This is my first paragraph.";
    
    /*
    document.getElementById("myH1").innerHTML="Welcome to my Homepage";
    document.getElementById("myP").innerHTML="This is my first paragraph.";
    */
    
    4、在行末使用注释
    var x=5;    // 声明 x 并把 5 赋值给它
    var y=x+2;  // 声明 y 并把 x+2 赋值给它
    
    6变量
    
    1、变量是存储信息的容器。
    var x=2;
    var y=3;
    var z=x+y;
    
    
    2、JavaScript 变量
         2.1变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。
         2.2变量必须以字母开头
         2.3变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
         2.4变量名称对大小写敏感(y 和 Y 是不同的变量)
    
    3、JavaScript 数据类型
         3.1当您向变量分配文本值时,应该用双引号或单引号包围这个值。
         3.2当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。
    var pi=3.14;
    var name="Bill Gates";
    var answer='Yes I am!';
    
    
    4、声明(创建) JavaScript 变量
    var carname="Volvo";
    
    
    5、一条语句,多个变量
    var name="Gates", age=56, job="CEO";
    
    
    6、Value = undefined
         6.1在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。
    
    7、重新声明 JavaScript 变量
         如果重新声明 JavaScript 变量,该变量的值不会丢失:
    var carname="Volvo";
    var carname;
    
    
    8、JavaScript 算数
    y=5;
    x=y+2;
    
    
    7数据类型
    
    1、JavaScript 拥有动态类型
         1.1这意味着相同的变量可用作不同的类型:
    var x                // x 为 undefined
    var x = 6;           // x 为数字
    var x = "Bill";      // x 为字符串
    
    2、JavaScript 字符串
         2.1字符串是存储字符(比如 "Bill Gates")的变量。
         2.2字符串可以是引号中的任意文本。您可以使用单引号或双引号:
    var carname="Bill Gates";
    var carname='Bill Gates';
    
    
    3、JavaScript 数字
         3.1JavaScript 只有一种数字类型。
    var x1=34.00;      //使用小数点来写
    var x2=34;         //不使用小数点来写
    var y=123e5;      // 12300000
    var z=123e-5;     // 0.00123
    
    4、JavaScript 布尔
         4.1布尔(逻辑)只能有两个值:truefalsevar x=true
    var y=false
    
    
    5、JavaScript 数组
    var cars=new Array("Audi","BMW","Volvo");
    
    
    6、JavaScript 对象
         6.1对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
    var person={firstname:"Bill", lastname:"Gates", id:5566};
    
    
    7、Undefined 和 Null
         7.1Undefined 这个值表示变量不含有值。
         7.2可以通过将变量的值设置为 null 来清空变量。
    cars=null;
    person=null;
    
    
    8、声明变量类型
         8.1当您声明新变量时,可以使用关键词 "new" 来声明其类型:
    var carname=new String;
    var x=      new Number;
    var y=      new Boolean;
    var cars=   new Array;
    var person= new Object;
    
    
    8对象
    
    1、属性和方法
         1.1属性是与对象相关的值。
         1.2方法是能够在对象上执行的动作。
    
    2、JavaScript 中的对象
         2.1在 JavaScript 中,对象是数据(变量),拥有属性和方法。
    
    3、创建 JavaScript 对象
         3.1JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。
    
    4、访问对象的属性
    objectName.propertyName
    
    5、访问对象的方法
    objectName.methodName()
    
    
    9函数
         函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
    
    1、JavaScript 函数语法
         1.1函数就是包裹在花括号中的代码块,前面使用了关键词 functionfunction functionname()
    {
    这里是要执行的代码
    }
    
    
    2、调用带参数的函数
    myFunction(argument1,argument2)
    
    
    3、带有返回值的函数
    function myFunction()
    {
     var x=5;
     return x;
    }
    
    
    4、局部 JavaScript 变量
         4.1在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。
    
    5、全局 JavaScript 变量
         5.1在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
    
    6、JavaScript 变量的生存期
         6.1JavaScript 变量的生命期从它们被声明的时间开始。
         6.2局部变量会在函数运行以后被删除。
         6.3全局变量会在页面关闭后被删除。
    
    7、向未声明的 JavaScript 变量来分配值
         7.1如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
    carname="Volvo";
    
    
    10运算符
    
    1、运算符 = 用于赋值。
         运算符 + 用于加值。
    y=5;
    z=2;
    x=y+z;
    
    
    2、JavaScript 算术运算符
         2.1算术运算符用于执行变量与/或值之间的算术运算。
    运算符描述例子结果+加x=y+2x=7-减x=y-2x=3*乘x=y*2x=10/除x=y/2x=2.5%求余数 (保留整数)x=y%2x=1++累加x=++yx=6--递减x=--yx=4
    
    3、JavaScript 赋值运算符
         3.1赋值运算符用于给 JavaScript 变量赋值。
    运算符例子等价于结果=x=y x=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=0
    
    4、用于字符串的 + 运算符
         4.1+ 运算符用于把文本值或字符串变量加起来(连接起来)。
    txt1="What a very";
    txt2="nice day";
    txt3=txt1+txt2;
    
    
    5、对字符串和数字进行加法运算
    x=5+5;
    document.write(x);
    
    x="5"+"5";
    document.write(x);
    
    x=5+"5";
    document.write(x);
    
    x="5"+5;
    document.write(x);
         如果把数字与字符串相加,结果将成为字符串。
    
    11比较
    
    1、比较运算符
         1.1比较运算符在逻辑语句中使用,以测定变量或值是否相等。
    运算符描述例子==等于x==8 为 false===全等(值和类型)x===5 为 true;x==="5" 为 false!=不等于x!=8 为 true>大于x>8 为 false<小于x<8 为 true>=大于或等于x>=8 为 false<=小于或等于x<=8 为 true
    
    2、如何使用
         2.1可以在条件语句中使用比较运算符对值进行比较,然后根据结果来采取行动:
    if (age<18) document.write("Too young");
    
    
    3、逻辑运算符
         3.1逻辑运算符用于测定变量或值之间的逻辑。
    运算符描述例子&&and(x < 10 && y > 1) 为 true||or(x==5 || y==5) 为 false!not!(x==y) 为 true
    
    4、条件运算符
    variablename=(condition)?value1:value2 
    
    
    12If...Else 语句
    
    1、条件语句
         1.1通常在写代码时,您总是需要为不同的决定来执行不同的动作。
         1.2在 JavaScript 中,我们可使用以下条件语句:
          if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
          if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
          if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
          switch 语句 - 使用该语句来选择多个代码块之一来执行
    
    2、If 语句
         2.1只有当指定条件为 true 时,该语句才会执行代码。
    if (条件)
      {
       只有当条件为 true 时执行的代码
      }
    
    
    3、If...else 语句
         3.1请使用 if....else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。
    if (条件)
      {
      当条件为 true 时执行的代码
      }
    else
      {
      当条件不为 true 时执行的代码
      }
    
    
    4、If...else if...else 语句
         4.1使用 if....else if...else 语句来选择多个代码块之一来执行。
    if (条件 1)
      {
      当条件 1 为 true 时执行的代码
      }
    else if (条件 2)
      {
      当条件 2 为 true 时执行的代码
      }
    else
      {
      当条件 1 和 条件 2 都不为 true 时执行的代码
      }
    
    
    13Switch 语句
    
    1、JavaScript Switch 语句
         1.1请使用 switch 语句来选择要执行的多个代码块之一。
    switch(n)
    {
    case 1:
      执行代码块 1
      break;
    case 2:
      执行代码块 2
      break;
    default:
      n 与 case 1 和 case 2 不同时执行的代码
    }
    
    
    2、default 关键词
         2.1请使用 default 关键词来规定匹配不存在时做的事情:
    var day=new Date().getDay();
    switch (day)
    {
    case 6:
      x="Today it's Saturday";
      break;
    case 0:
      x="Today it's Sunday";
      break;
    default:
      x="Looking forward to the Weekend";
    }
    
    
    14For
    
    1、JavaScript 循环
         1.1如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。
    for (var i=0;i<cars.length;i++)
    {
    document.write(cars[i] + "<br>");
    }
    
    
    2、不同类型的循环
          2.1JavaScript 支持不同类型的循环:
          for - 循环代码块一定的次数
          for/in - 循环遍历对象的属性
          while - 当指定的条件为 true 时循环指定的代码块
          do/while - 同样当指定的条件为 true 时循环指定的代码块
    
    3、For 循环
          3.1for 循环是您在希望创建循环时常会用到的工具。
    for (语句 1; 语句 2; 语句 3)
      {
      被执行的代码块
      }
         语句 1 在循环(代码块)开始前执行
         语句 2 定义运行循环(代码块)的条件
         语句 3 在循环(代码块)已被执行之后执行
    
    4、语句 1
         4.1通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
    
    5、语句 2
         5.1通常语句 2 用于评估初始变量的条件。
         5.2如果语句 2 返回 true,则循环再次开始,如果返回 false,则循环将结束。
    
    6、语句 3
         6.1通常语句 3 会增加初始变量的值。
    
    7、For/In 循环
         7.1JavaScript for/in 语句循环遍历对象的属性:
    var person={fname:"John",lname:"Doe",age:25};
    
    for (x in person)
      {
      txt=txt + person[x];
      }
    
    
    15While
    
    1、while 循环
         1.1While 循环会在指定条件为真时循环执行代码块。
    while (条件)
      {
      需要执行的代码
      }
    
    
    2、do/while 循环
         2.1do/while 循环是 while 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。
    do
      {
      需要执行的代码
      }
    while (条件);
    
    
    16Break
    
    1、Break 语句
          1.1break 语句可用于跳出循环。
          1.2break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话):
    for (i=0;i<10;i++)
      {
      if (i==3)
        {
        break;
        }
      x=x + "The number is " + i + "<br>";
      }
    
    
    2、Continue 语句
         2.1continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。
    for (i=0;i<=10;i++)
     {
     if (i==3) continue;
      x=x + "The number is " + i + "<br>";
      }
    
    
    17错误
    try 语句测试代码块的错误。
    catch 语句处理错误。
    throw 语句创建自定义错误。
    
    1、错误一定会发生
         1.1当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误。
    
    2、JavaScript 抛出错误
         2.1当错误发生时,当事情出问题时,JavaScript 引擎通常会停止,并生成一个错误消息。
    
    3、JavaScript 测试和捕捉
          3.1try 语句允许我们定义在执行时进行错误测试的代码块。
          3.2catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。
          3.3JavaScript 语句 trycatch 是成对出现的。
    try
      {
      //在这里运行代码
      }
    catch(err)
      {
      //在这里处理错误
      }
    
    
    4、Throw 语句
         4.1throw 语句允许我们创建自定义错误。
         4.2正确的技术术语是:创建或抛出异常(exception)。
    throw exception
    
    18验证
    
    1、JavaScript 表单验证
         1.1JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
         1.2被 JavaScript 验证的这些典型的表单数据有:
    用户是否已填写表单中的必填项目?
    用户输入的邮件地址是否合法?
    用户是否已输入合法的日期?
    用户是否在数据域 (numeric field) 中输入了文本?
    
    2、必填(或必选)项目
         2.1下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。
    function validate_required(field,alerttxt)
    {
     with (field)
    {
     if (value==null||value=="")
      {alert(alerttxt);return false}
     else {return true}
    }
    }
    
    
    3、E-mail 验证
         3.1下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
    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}
    }
    }
  • 相关阅读:
    Python将文件夹下的文件名写入excel方便统计
    Python利用openpyxl带格式统计数据(2)- 处理mysql数据
    Python利用openpyxl带格式统计数据(1)- 处理excel数据
    spfa 算法(队列优化的Bellman-Ford算法)
    bellman_ford算法(边数限制的最短路,边权可能为负)
    堆优化dijkstra
    朴素dijkstra
    1547. 切棍子的最小成本(区间dp)
    1546. 和为目标值的最大数目不重叠非空子数组数目(前缀和+dp)
    32场双周赛(模拟,模拟,前缀和加状态压缩)
  • 原文地址:https://www.cnblogs.com/cnmotive/p/3139270.html
Copyright © 2011-2022 走看看