JavaScript基础

JavaScript概述

• 是一种 运行在浏览器的脚本语言
• 是一种轻量级的编程语言
• 可插入HTML页面的编程代码
• 插入HTML页面后,可用所有现代浏览器执行
• 很容易学习
• 组成
  
  
  
  • ECMAScript:基本语法
  • DOM:文档:Document Object Model.文档对象模型.
  • BOM:浏览器:Browser Object Model.浏览器对象模型
    
    
• 运行在浏览器的脚本语言
  
  
  
  • JavaScript
  • ActionScript:flash的源代码
  • flex
    
    
• JS的用途
  
  
  
  • 美化页面
  • 对页面数据的基本校验
    
    
  
  

JS的基本语法

• 基本上就是ECMA的语法
  
  
  
  • 区分大小写(变量名,函数名)
  • 弱变量类型的语言(不同于Java)
    
    
    
    • 定义所有变量都用var,给他赋值的类型就是他的类型,也就是在赋值以后才能确定变量的具体类型.
      
      

Java:
    int i = 3;

    String s = "abc"






JavaScript:






    var i = 3;   






    var s = "abc";

语句结尾的分号可有可无,但是建议都写上(可读性强).
变量命名规则和Java差不多

• JS数据类型
  
  
  
  • 原始类型
    
    
    
    • 5种
      
      
      
      • undefined:未定义(确切的说应该是未赋值.)
      • boolean:布尔类型
      • number:数字类型
      • string:字符或字符串类型
      • null:空
        
        
      
      
  • 引用类型
    
    
    
    • 对象类型,对象类型的默认值是null.(把null当做一个占位符.)
      
      
  • JS的运算符
    
    
    
    • 和Java基本一致
    • 不一样的
      
      
      

          JavaScript中有个===
          类型和值都一样才返回

true==是只要值相等就返回true   

var a = "66";    var b = 66;   

a == b;//返回true   

a === b ; //返回false;

• Js的语句
  
  
  
  • 和Java基本一致
  • 不同的是第二种
    
    

  • 
    
    
    • for(var i = 0; i < 10; i++){
          }​
      
      

  for (var i in list) {    }

  
  

通常开发的步骤

• JS通常都有一个事件触发
  
  
  
  • 事件都是由on开头的.
    
    
• 触发一个函数,定义一个函数
• 获得操作对象的控制权
• 修改要操作的对象的属性或值
  
  
  

定义函数

• function 函数名称(){函数体}
  
  

匿名函数
window.onload = function(){}

• 常用事件:
  
  
  
  • onclick
  • ondblclick
  • onsubmit
  • onload
  • ...查看W3School,文档
    
    
• 事件发生在谁身上就定义在哪里.
• JS的引入方式
• 通常两种方式
  
  
  
  • 页面内直接编写JS代码,JS代码需要使用,要写入head标签内.
  • 把代码写入一个js文件中,然后引用.
    
    

    <script src= "路径" type="text/javascript"></script>

    
    
    
• 函数的定义
  
  
  
  • 特殊函数onsubmit
    
    
    
    • onsubmit="return 函数",函数最后的的值是true就提交,是false,则不提交.
      
      
    
    
• JS校验正则表达式有两个方法
  
  
  
  • String对象调用match()方法
  • 正则对象调用test()方法
    
    
  
  

总结

• 将JS的代码定义成一个文件写入
• 获取元素
• 正则
  
  

JS常用命令

• alert():弹框,一般用于调试.
• document.getElementById("ID名称"),获取的是元素对象,然后调用需要的属性.
  
  

使用JS完成图片滚动的效果JS中的window对象

• 方法
  
  
  
  • setInterval()按照指定周期,循环执行指定的函数.
  • setTimeout()按照指定时间段后,执行一次指定函数
  • clearInterval();清除定时
  • clearTimeout();清除定时
    
    
• display
  
  
  
  • block:显示
  • none:隐藏
  • inline:显示在同一行.
    
    
  
  

JS中的BOM对象

• Window
  
  
  
  • 方法
    
    
    
    • alert();弹出对话框
    • setInterval();
    • setTimtout();
    • clearInterval();
    • clearTimtout();
    • confirm():弹出一个确认窗口:选项,是和否.有返回值,true和false.
    • prompt():弹出一个可输入的对话框.返回的是输入的文本.prompt("提示的字符","默认的文本").
    • open("网址")打开一个网页窗口.
      
      
    
    
• Navigator:包含的是浏览器的信息
  
  
  
  • onLine:返回浏览器是否处于脱机模式
  • appName:返回浏览器的名字
  • appVersion:返回浏览器的平台和版本信息
  • platForm:返回浏览器的操作系统平台
  • browserLanguage:返回当前浏览器的语言
    
    
• Screen:获取屏幕信息
  
  
  
  • width:返回显示器屏幕的宽度
  • height:返回浏览器屏幕的高度
  • pixelDepth:返回显示屏幕的颜色分辨率(比特每像素).
    
    
• History:浏览历史(记录);
  
  
  
  • back:上一个
  • go(数字):数字=-1,上一个,数字=1,下一个.
  • forward():下一个
    
    
• Location:包含URL对象的信息
  
  
  
  • href:跳转到指定网页.
  • host:设置或返回主机名和当前URL的端口号
  • hostname:设置或返回当前URL的主机名
    
    
  
  

调试方法

• alert():弹出窗口查看赋值情况
• 排除法:删除一部分代码,看看错误还存不存在,要是不存在就是你删除的那部分代码出了问题,要是还是存在就是这行代码没有问题,再删除其他的代码测试,
• 在网页里边先看控制台,要是没有严重错误就打断点.步进查看每行代码,查看变量的值,等等需要查看的元素,找出错误
• 推荐第三种方法来调试.
  
  

JavaScript基础

JavaScript概述

• 是一种 运行在浏览器的脚本语言
• 是一种轻量级的编程语言
• 可插入HTML页面的编程代码
• 插入HTML页面后,可用所有现代浏览器执行
• 很容易学习
• 组成
  
  
  
  • ECMAScript:基本语法
  • DOM:文档:Document Object Model.文档对象模型.
  • BOM:浏览器:Browser Object Model.浏览器对象模型
    
    
• 运行在浏览器的脚本语言
  
  
  
  • JavaScript
  • ActionScript:flash的源代码
  • flex
    
    
• JS的用途
  
  
  
  • 美化页面
  • 对页面数据的基本校验
    
    
  
  

JS的基本语法

• 基本上就是ECMA的语法
  
  
  
  • 区分大小写(变量名,函数名)
  • 弱变量类型的语言(不同于Java)
    
    
    
    • 定义所有变量都用var,给他赋值的类型就是他的类型,也就是在赋值以后才能确定变量的具体类型.
      
      

Java:
    int i = 3;

    String s = "abc"






JavaScript:






    var i = 3;   






    var s = "abc";

语句结尾的分号可有可无,但是建议都写上(可读性强).
变量命名规则和Java差不多

• JS数据类型
  
  
  
  • 原始类型
    
    
    
    • 5种
      
      
      
      • undefined:未定义(确切的说应该是未赋值.)
      • boolean:布尔类型
      • number:数字类型
      • string:字符或字符串类型
      • null:空
        
        
      
      
  • 引用类型
    
    
    
    • 对象类型,对象类型的默认值是null.(把null当做一个占位符.)
      
      
  • JS的运算符
    
    
    
    • 和Java基本一致
    • 不一样的
      
      
      

          JavaScript中有个===
          类型和值都一样才返回

true==是只要值相等就返回true   

var a = "66";    var b = 66;   

a == b;//返回true   

a === b ; //返回false;

• Js的语句
  
  
  
  • 和Java基本一致
  • 不同的是第二种
    
    

  • 
    
    
    • for(var i = 0; i < 10; i++){
          }​
      
      

  for (var i in list) {    }

  
  

通常开发的步骤

• JS通常都有一个事件触发
  
  
  
  • 事件都是由on开头的.
    
    
• 触发一个函数,定义一个函数
• 获得操作对象的控制权
• 修改要操作的对象的属性或值
  
  
  

定义函数

• function 函数名称(){函数体}
  
  

匿名函数
window.onload = function(){}

• 常用事件:
  
  
  
  • onclick
  • ondblclick
  • onsubmit
  • onload
  • ...查看W3School,文档
    
    
• 事件发生在谁身上就定义在哪里.
• JS的引入方式
• 通常两种方式
  
  
  
  • 页面内直接编写JS代码,JS代码需要使用,要写入head标签内.
  • 把代码写入一个js文件中,然后引用.
    
    

    <script src= "路径" type="text/javascript"></script>

    
    
    
• 函数的定义
  
  
  
  • 特殊函数onsubmit
    
    
    
    • onsubmit="return 函数",函数最后的的值是true就提交,是false,则不提交.
      
      
    
    
• JS校验正则表达式有两个方法
  
  
  
  • String对象调用match()方法
  • 正则对象调用test()方法
    
    
  
  

总结

• 将JS的代码定义成一个文件写入
• 获取元素
• 正则
  
  

JS常用命令

• alert():弹框,一般用于调试.
• document.getElementById("ID名称"),获取的是元素对象,然后调用需要的属性.
  
  

使用JS完成图片滚动的效果JS中的window对象

• 方法
  
  
  
  • setInterval()按照指定周期,循环执行指定的函数.
  • setTimeout()按照指定时间段后,执行一次指定函数
  • clearInterval();清除定时
  • clearTimeout();清除定时
    
    
• display
  
  
  
  • block:显示
  • none:隐藏
  • inline:显示在同一行.
    
    
  
  

JS中的BOM对象

• Window
  
  
  
  • 方法
    
    
    
    • alert();弹出对话框
    • setInterval();
    • setTimtout();
    • clearInterval();
    • clearTimtout();
    • confirm():弹出一个确认窗口:选项,是和否.有返回值,true和false.
    • prompt():弹出一个可输入的对话框.返回的是输入的文本.prompt("提示的字符","默认的文本").
    • open("网址")打开一个网页窗口.
      
      
    
    
• Navigator:包含的是浏览器的信息
  
  
  
  • onLine:返回浏览器是否处于脱机模式
  • appName:返回浏览器的名字
  • appVersion:返回浏览器的平台和版本信息
  • platForm:返回浏览器的操作系统平台
  • browserLanguage:返回当前浏览器的语言
    
    
• Screen:获取屏幕信息
  
  
  
  • width:返回显示器屏幕的宽度
  • height:返回浏览器屏幕的高度
  • pixelDepth:返回显示屏幕的颜色分辨率(比特每像素).
    
    
• History:浏览历史(记录);
  
  
  
  • back:上一个
  • go(数字):数字=-1,上一个,数字=1,下一个.
  • forward():下一个
    
    
• Location:包含URL对象的信息
  
  
  
  • href:跳转到指定网页.
  • host:设置或返回主机名和当前URL的端口号
  • hostname:设置或返回当前URL的主机名
    
    
  
  

调试方法

• alert():弹出窗口查看赋值情况
• 排除法:删除一部分代码,看看错误还存不存在,要是不存在就是你删除的那部分代码出了问题,要是还是存在就是这行代码没有问题,再删除其他的代码测试,
• 在网页里边先看控制台,要是没有严重错误就打断点.步进查看每行代码,查看变量的值,等等需要查看的元素,找出错误
• 推荐第三种方法来调试.