zoukankan      html  css  js  c++  java
  • JavaScript基础总结三部曲之一

      JavaScript是一种基于对象的编程语言,基于对象指的是所有的对象已经由浏览器提供好了,用户直接使用就可以了。

    另外,JS是嵌入在HTML语法之中的编程语言。

    PS:虽然是基于对象的语言,但是在编写代码的过程中,尽量按照面向对面的要求书写代码。

    输出语法:

    document.write():向页面输出HTML代码。虽然JavaScript定义在HTML页面中,但是它却可以控制HTML代码的输出。document.write()函数输出的HTML代码不能控制元素的顺序,所以在开发之中不会使用此函数输出HTML代码。

    在开发中往往使用console.log()来进行代码输出,来进行页面调试

    变量:

    Js定义变量,是根据赋予的内容来决定变量类型。

    例如,可以像下面那样声明并初始化数组:

    PS:本操作没有严格之处,最大的好处是没有长度限制,动态数组。(当然也可以静态初始化,new数组时直接初始化)当然在开发中一般不会使用new关键字声明数组。实际在定义js变量的时候也可以不使用var进行定义,这样的是全局变量,当然一般并不使用。

    函数:

    function 函数名称(参数){//不需要返回值类型,如果需要返回,直接return,参数也可以不写var

    }

    PS:在学习java的时候,方法有几个形参,调用的时候实参个数必须相同,可是JavaScript没有这种限制,

    如add(10)依旧调用函数add(x,y):

    所以为了用户的操作,JavaScript提供了一个功能,函数名称.arguments:表示取得函数的参数的内容,返回的是一个数组。可以使用length判断长度。

    function add(x,y){
       switch(add.arguments.length){
           case 0:return 0;
           case 1:return x;
           case 2:return x+y;
    }
    alert(add(10))//调用

    PS:但是在实际工作中,还是强烈建议语法严格,函数里面定义几个参数,调用时就传几个参数, 尽量不出现以上情形。(规范)

    事件处理:

    在页面上任何的操作都可能称为事件源,而对于每一个事件都可以进行自定义的处理方式。  例如,页面加载,鼠标移动等等都可以称它为事件源。所有的事件在JavaScript里面都是以”onXXX”的形式命名。

    举例如下两个事件(这两个事件只能够在”<body>”元素里面进行处理):

    页面加载事件: onload

    页面的卸载事件:onunload

    发现浏览器打开页面时出现”页面加载”,关闭页面时显示”再见”

    范例在表格中当鼠标移入新的一行时,改变当前行的颜色:

    原理:JS是一个基于对象的编程语言,每一个HTML元素都是一个对象 ,也就是说每一个元素,例如”<tr>”、”<td>”都属于一个JS对象。

    总结:javascript取得的所有html元素都是对象。(基于对面编程语言)Java属于面向对象的编程语言,面向对象过程之中,需要由用户自己定义类,产生对象,但是JavaScript是一种基于对象的编程语言,即:所有的对象都已经由浏览器自动为用户提供好了,用户直接使用即可,最典型的对象:每一个HTML元素都是一个对象 。(如:<html><head><body>)所有HTML定义的时候要想轻松的取得指定元素,必须加上有ID属性,作为唯一标记 。

    JavaScript事件之动态绑定事件(开发中使用最多)

    但是需要注意,所有的事件除了采用以上“onXXX”的方式之外也可以动态设置,这种形式在开发之中是使用最多的。那么可以使用 addEventListener(事件类型,处理函数名称,触发时机) 进行动态设置。

    PS:触发时机都会设置为false,表示在事件的触发过程进行处理。

    范例:观察动态设置

    之前这么写: 

    动态绑定事件: 

    所有的动态设置的事件都可以在onload里面进行动态的配置。但是如果要配置,那么必须能够取得一个明确的元素对象。可以使用docuent.getElementById(元素Id)的操作方式取得元素对象。

    这种动态设置操作事件的最大好处在于,HTML代码不会和JavaScript代码混合在一起。

    PS:innerHTML方法:在此元素内增加指定内容,而且内容可以是HTML代码。

    setTimeout方法练习:

    实例:轮播图

  • 相关阅读:
    3步轻松搞定Spring Boot缓存
    备战“金九银十”10道String高频面试题解析
    ConcurrentHashMap比其他并发集合的安全效率要高一些?
    3年java开发竟然还不知道Lambda的这个坑
    5分钟搞清楚Synchronized和Lock的概念与区别
    3年Java开发都知道的Redis数据结构和通用命令
    8月份21道最新Java面试题剖析(数据库+JVM+微服务+高并发)
    35个Java代码优化的细节,你知道几个?
    vba里面打开word文档,并实现通过特殊的字符将文档中的字符实现切分
    通过vba实现替换word里面指定的字符的方法
  • 原文地址:https://www.cnblogs.com/zhangmingcheng/p/5584161.html
Copyright © 2011-2022 走看看