JavaScript快速入门

javascript:

• 概念 :一门客户端脚本语言
  • 运行在客户端浏览器中的,每一个浏览器都有一个javascript的解析引擎
  • 脚本语言:不需要编译,直接就可以被浏览器解析执行了
• 功能:
  • 可以用来增强用户和html页面的交互过程,用来控制html元素,让页面有一些动态效果,增强用户的体验
    
• javascrpit=ecmascript+javascript(bom+dom);
• ecmascript:客户端脚本语言的标准
  1. 基本语法:
     1. 与html结合方式
        1. 内部js:
           • 定于
        2. 外部js:
           • 定义
        • 注意:
     2. 注释:
        1. 单行注释://注释内容
        2. 多行注释:/注释内容/
           
     3. 数据类型
        1. 原始数据类型
           1. number:数字.整数/小数/nan(not a number 一个不是数字的数字类型)
           2. string:字符串."abc" "a" 'abc''
           3. boolean:true/false
           4. null:一个对象为空的占位符
           5. undefined:未定义.如果一个变量没有给初始值,则会被默认赋值为underfined
        2. 引用数据类型:对象;
     4. 变量
        • 变量:一小块储存数据的内存空间
        • java语言是强类型语言,而javascript是弱类型语言
          • 强类型:在开辟变量储存空间时,定义了空间用来存储数据的数据类型,只能储存固定数据类型的数据
          • 弱类型:在开辟变量空间时,不定义空间的储存数据类型,可以存放任意类型的数据
        • 语法:
          • var 变量名 =初始化值;
          • type of运算符:获取变量的类型
            • 注意: null运算后得到的结果时object
              
     5. 运算符
        1. 一元运算符: 只有一个运算数的运算符
           ++,--,+,-
           • ++,--:自增,自减
             • ++(--)在前,先自增(自减),再运算
             • ++(--)在后,先运算,再自增(自减)
           • +,-:正号,负号
             • 注意:在js中如果运算数不是运算符所要求的类型,那么js引擎谁自动将其他类型转为number类型
               • string转number:按照字面值转换,如果字面值不是数字,则转为 nan(不是数字的数字)
               • boolean转number:true转为1,false转为0
                 
        2. 算数运算符
           +,-,*,/,%...
        3. 赋值运算符
           = += -=

        4. 比较运算符

           < >= <= == ===(全等于)

           • 比较方式
             • 类型相同,直接比较
               • 字符串,按照ascii比较,按位逐一比较,直到得出大小为止
                 
             • 类型不同,先进行类型转化再比较
               • ===,全等于,在比较之前先判断类型,如果不同直接返回false
        5. 逻辑运算符
           && || !
           • 其他类型转boolean
             1. number:0或nan为假,其他为真
             2. string:除了空字符串(""),其他都是true
             3. null&underfined:都是false
             4. 对象:所有对象都是true
                
        6. 三元运算符
           * 语法:
           * 表达式?值1:值2;
           * 判断表达式的值,如果是true则取值1,如果是false则取值2;
     6. 流程控制语句
        1. if...else..
        2. switch
           • 在java中switch语句可以接受的数据类型: byte int short char 枚举(1.5) string
             • switch(变量):
               case 值:
           • 在js中,switch语句可以接受任意的原始数据类型
             
        3. while
        4. do...while
        5. for
     7. js中特殊用法
        1. 语句以;结尾,如果一行只有一条语句则;可以省略(不建议);
        2. 变量的定义使用var关键词,也可以不使用
           • 用:定义的变量是局部变量
           • 不用:定义的变量是全局变量(不建议)
  2. 基本对象
     1. function:函数(方法)对象
        1. 创建:
           1. var fun=new function(形参,方法体);
           2. function 方法名(形参){
              方法体
              }
           3. var 方法名=function(形参){
              方法名
              }
        2. 方法:
        3. 属性:
           • length长度
        4. 特点
           1. 方法定义 形参的类型不用写,返回类型也不用写
           2. 方法是一个对象,如果定义名称相同的方法会被覆盖
           3. 在js中,方法的调用只与方法的名称有关,与参数列表无关
        5. 调用:
           方法名称(实际参数列表)
           
     2. array:数组对象
        1. 创建
           1. var arr=new array(元素列表);
           2. var arr=new array(默认长度);
           3. var arr=new array[元素列表];
        2. 方法
           1. join(参数):将数组中的元素按照指定的分隔符拼接为字符串
           2. push():向数组的末尾添加一个或更多元素,并返回新的长度
        3. 属性
           length:数组的长度
        4. 特点
           1. js中,数组元素类型是可变的
           2. js中,数组长度可变的
     3. date:日期对象
        1. 创建:
           var date=new date();
        2. 方法:
           tolocalstring():返回当前date对象对应的时间本地字符串格式
           gettime():获取毫秒值.返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差
     4. math
        1. 创建
           • 特点:math对象不用创建,直接使用,math.方法名
        2. 方法:
           • random():返回0~1之间的随机数.含0不含1
           • ceil(x):对数进行向上舍入,大于等于x
           • floor(x):对数进行向下舍入,小于等于x
           • round(x):将数进行四舍五入最接近的整数
     5. regexp:正则表达式对象
        1. 正则表达式:定义字符串的组成规则
           1. 单个字符:[]
              • 如 [a] [ab] [a-za-z0-9]
              • 特殊符号代表特殊含义的单个字符:
                \d:单个数字字符[0-9]
                \w:单个单词字符[a-za-z0-9]
           2. 量词符号:
              ?:表示出现0次或1次
              :表示出现0次或多次
              +:表示出现1次或多次
              {m,n}:表示出现m<=数量<=n
              m如果缺省:{,n}:最多n次
              * n如果缺省:{m,}:最少m次
           3. 开始结束符号
              • ^:开始
              • $:结束
           4. 正则对象
           5. 创建:
              1. var reg=new regexp("正则表达式");
              2. var reg=/正则表达式/;
           6. 方法:
              test(参数):验证指定的字符串是否符合正则定义的规范
     6. global
        1. 特点:全局对象,直接调用.方法名();
        2. 方法:
           • encodeuri():url编码
           • decodeuri():url解码
           • encodeuricomponent():url编码,编码的字符更多
           • decodeuricomponent():url解码
           • isnan:判断一个值是否是nan
             • nan参与的==比较中全部为false
           • paseint:将字符串转为数字
             • 逐一判断每一个字符是否是数字,直到不是数字为止将前面的数字部分转为number
           • eval():将javascript字符串作为脚本语言执行
             
  3. bom
     1. 概念:browser object model 浏览器对象模型
        • 将浏览器的各个组成部分封装成对象
     2. 组成:
        • windows:窗口对象
          1. 创建
          2. 方法:
             1. 与弹出框有关的方法:
                1. alter():显示带有一段消息和一个确认按钮的警告框
                2. confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
                   • 点击确认返回true
                   • 点击取消返回false
                3. pompt():显示可提示用户输入的对话框
                   • 返回值:获取用户输入的值
                4. 与打开关闭有关的方法
                5. close()关闭浏览器当前窗口
                6. open()打开一个新的浏览器窗口
                   • 返回新的window对象
             2. 与定时器有关的方法
                • settimeout():在指定毫秒后调用函数或计算表达式
                  • 参数:
                    1. js代码或者方法对象
                    2. 毫秒值
                       
                  • 返回值:唯一标识,用于取消定时器
                • cleartimeout():取消由stetimeout()方法设置的timeout
                • setinterval():按照指定的周期(以毫秒计)来调用函数或计算表达式
                • clearinterval():取消由steinterval()方法设置的timeout
          3. 属性:
             1. 获取其他bom对象
             2. 获取dom对象
          4. 特点:
             1. window对象不需要创建可以直接使用,window.方法名();
             2. window引用可以省略.方法名().
        • navigator:浏览器对象
        • screen:显示器对象
        • history:历史记录对象
        • location:地址栏对象
          1. 创建(获取):
             1. windows.location
             2. location
          2. 方法:
             • reload():重新加载当前文档
          3. 属性 :
             • href:设置或返回完整的url

1. dom
   1. 概念:document object model文档对象模型
      • 将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行crud的动态操作
      1. w3c dom标准分为3个不同的部分:
         1. 核心dom-针对任何结构化文档的标准模型
         2. documnet:文档对象
            1. 创建:在html dom模型中可以使用window对象获取
               • window.document
               • document
            2. 方法:
               1. 获取element对象
                  1. getelenmetbyid():根据id属性获取元素对象,id值一般唯一
                  2. getelenmetbytagname():根据元素名称获取元素对象们,返回值是一个数组
                  3. getelenmetbyclassname():根据classname():根据class属性值获取元素对象们,返回值是一个数组
                  4. getelenmetbyname():根据name属性值获取元素对象们,返回值是一个数组
               2. 创建其他dom对象
               3. 属性:
            3. element:元素对象
               1. 获取/创建:通过document来获取和创建
               2. 方法:
                  1. removeattribute():删除属性
                  2. setattribute():设置属性
                     
               3. attribute:属性对象
               4. text:文本对象
               5. comment:注释对象
               6. node:节点对象,以上五个对象的父对象
                  • 特点:所有dom对象都可以被认为是一个节点
                  • 方法:
                    • cruddom树:
                      • appendchild():向节点列表的结尾添加一个新的子节点
                      • removechild():删除(并返回当前节点的指定节点),由其父对象调用
                      • replacechild():用新节点替换一个子节点
                        
                      • 属性:
                      • parentnode:返回节点的父节点
      2. xml dom:针对xml文档的标准模型
      3. html dom:准对html文档的标准模型
         1. 标签体的设置和获取:innerhtml
         2. 使用html元素对象的属性
         3. 控制元素样式

            1. 使用元素的style属性来设置
               ```html
               

               ```

            2. 使用classname
               html <script> var div1 = document.getelementbyid("div1"); div1.onclick = function() { div1.classname="d1"; } </script>
2. 事件监听机制
   1. 概念:某些组件被执行了某些操作后,触发了某些代码的执行
      1. 事件:某些操作.如单击,双击,鼠标移动,键盘按下
      2. 事件源:组件,如按钮,文本输入框
      3. 监听器:代码
      4. 注册监听:将事件,事件源,监听器结合在一起,当事件源发生了某个事件,则触发执行某个监听器代码
   2. 常见事件:
      1. 点击事件:
         1. onclick当用户点击某个对象时调用的事件句柄。
         2. ondblclick当用户双击某个对象时调用的事件句柄。
      2. 焦点事件:表单校验
         1. onfocus元素获得焦点
         2. onblur元素失去焦点。
      3. 加载事件,window body
         1. onload一张页面或一幅图像完成加载
      4. 鼠标事件(定义方法时,定义一个形参,接受event对象,event对象的button属性可以获取鼠标按钮的键值)
         1. onmousedown鼠标按钮被按下
         2. onmousemove鼠标被移动。
         3. onmouseout鼠标从某元素移开。
         4. onmouseover鼠标移到某元素之上。
         5. onmouseup鼠标按键被松开。
      5. 键盘事件(定义方法时,定义一个形参,接受event对象,event对象的button属性可以获取鼠标按钮的键值)
         1. onkeydown某个键盘按键被按下。
         2. onkeypress某个键盘按键被按下并松开。
         3. onkeyup某个键盘按键被松开。
      6. 选择和改变:
         1. onselect文本被选中。
         2. onchange域的内容被改变。
            1. 表单事件
         3. onsubmit确认按钮被点击。
            1. 表单校验:判断表单是否提交
            2. return false;
         4. onreset重置按钮被点击。