zoukankan      html  css  js  c++  java
  • java复习前端篇——JavaScript

    1.JS的概述:
         什么是JS:运行在浏览器端脚本语言,基于对象和事件驱动的语言,应用于客户端,浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
         JS的用途:使用JS提升用户的体验.使HTML动起来.

    2.JS的引入方式:

       (1):页面内直接编写JS代码,JS代码需要使用<script></script>.
       (2):将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
        <script  type="text/javascript"  src="../js/check.js"> //这里面不写东西</script>。外部脚本不能包含 <script> 标签。

    3.JS的组成:

       (1) ECMAScript:JS的核心
        基本语法
            与 Java 一样,变量、函数名、运算符以及其他一切东西都是区分大小写的。
                比如:变量 test 与变量 TEST 是不同的
            弱类型语言,可以任意改变变量的类型,变量是弱类型的与 Java 和 C 不同,ECMAScript 中的变量无特定的类型,定义变量时只用 var 运算符,可以将它初始化为任意值。因此,可以随时改变变量所存数据的类型(尽量避免这样做)。

    例子
    var color = "red";
    var num = 25;
    var visible = true;

            行代码结束可不加分号,就默认为换行,建议加上分号,最好的代码编写习惯是总加入分号,因为没有分号,有些浏览器就不能正确运行,不过根据 ECMAScript 标准,下面两行代码都是正确的:

    var test1 = "red"
    var test2 = "blue";

            变量名可以包含数字,但是不能以数字开头
            注释
                单行注释    :    以双斜杠开头(//)
                多行注释    :    以单斜杠和星号开头(/*),以星号和单斜杠结尾(*/)


        js运算符:
            一元运算符:++ --  与Java一致
            逻辑运算符:&& || !or
            算术运算符:+ - * / % 运算
                + 特点 :做的是拼接操作
                - 特点 : 先把值转换成数值后再进行减法运算,转换后不是数值相减会出现NaN
            关系运算符:
                >   <      >=    <=    ==    !=
                == 和 ===的区别,前者比较的是数值,后者不仅比较值而且还比较数据类型
            三元运算符
                值?表达式1:表达式1
                如果值为true,整个表达式取表达式1的值,如果值为false,整个表达式取表达式2值。
            赋值运算符
                *=、+=、-=、/=、%=
                以上赋值运算符与java中操作一样
            逗号运算符
                var a=1, b=2;
                逗号运算符可以在一条语句中执行多个运算
        声明变量
            var关键字
                var i = 10;
                var i =  "wangbadan";
                var i = true;
                var i = null;
                ......


        js流程控制语句:
            if条件
                格式 :if(条件){语句}else{语句}
                在java中if语句后面的条件必须是true/false值,而在javascript 中我们描述true/false有多种方式,所以要注意与java中的区别
            switch语句
            While与do-while
            for循环


        js类型
            原始类型
                string:字符及字符串都看做为字符类型
                number:数值类型
                boolean:逻辑类型
                null
                undefined:变量未初始化


            引用类型:
                对象类型.对象类型默认值是null.
            类型判断:
                typeof()


            类型转换:
                toString():转传成字符串
                parseInt(值):转换成数字类型
                parseFloat(值):转换成浮点类型
                Boolean(值):值转换成Boolean类型
                Number(值):值转换成Number类型

      (2)DOM:Document Object Model   文档对象模型
        DOM:就是将文档加载到内存,形成树形结构, 从而操作树形结构就可以改变HTML的样子.
        Document :文档对象.代表的是加载到内存中的整个的文档.
        Element :元素对象.代表文档中的每个元素(标签)
        Attribute:属性对象.代表元素上的属性.
        Document,Element,Attribute统称为Node(节点)


        DOM基本操作:1.获取元素:
                document.getElementById()     通过ID获得元素
                document.getElementsByName()    通过name属性获得元素
                document.getElementsByTagName();    通过标签名获得元素


              2.创建元素:
                document.createElement();  创建元素
                        var para=document.createElement("p");


                  document.createTextNode();   创建文本节点
                        var node=document.createTextNode("这是新段落。");


                  3.添加元素:
                element.appendChild(); 在最后添加一个节点
                element.insertBefore();  在某个元素之前插入一个节点
            4.  删除元素:
                element.removeChild();  如需删除 HTML 元素,您必须首先获得该元素的父元素:
                        var parent=document.getElementById("div1");
          var child=document.getElementById("p1");
          parent.removeChild(child);


                    如果能够在不引用父元素的情况下删除某个元素,就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:
                        var child=document.getElementById("p1");
          child.parentNode.removeChild(child);


              5.修改元素:
                elementNode.setAttribute(name,value)
                    参数 描述
                        name 必需。规定要设置的属性名。
                        value 必需。规定要设置的属性值。
                    说明:  该方法把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。


             6. 改变 HTML
                改变 HTML 内容:document.getElementById(id).innerHTML=new HTML
                改变 HTML 属性:document.getElementById(id).attribute=new value


              7.改变 CSS
                document.getElementById(id).style.property=new style


             8. 事件
                  对 HTML 事件做出反应
                    onclick=JavaScript
                        <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
                        <h1 onclick="changetext(this)">请点击该文本</h1>


                HTML 事件属性
                    向 button 元素分配 onclick 事件:
                        <button onclick="displayDate()">点击这里</button>


                使用 HTML DOM 来分配事件
                    向 button 元素分配 onclick 事件:
                        <script>
           document.getElementById("myBtn").onclick=function(){displayDate()};
    </script>

        (3)BOM:Browser Object Model  浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

    Window:窗口对象
        alert();     显示带有一段消息和一个确认按钮的警告框      alert("文本")
        confirm();    弹出一个确认对话框   confirm("文本")
        open();     打开一个新窗口
        prompt();    显示可提示用户输入的对话框     prompt("文本","默认值")


        设置定时的方法
            * setInterval(); :每隔多少毫秒执行某个表达式.     * setInterval(“change()”,5000);
            * setTimeout(); :隔多少毫秒执行一个该表达式.    * setTimeout(“change()”,5000);
        清除定时的方法 clearInterval();
               (1) clearInterval(id_of_setinterval)
                    var int=self.setInterval("clock()",50)
                    window.clearInterval(int);
             (2)clearTimeout();
                clearTimeout(setTimeout_variable)
                     t=setTimeout("timedCount()",1000)
                    clearTimeout(t)
    Navigator:浏览器对象
    Screen:屏幕对象
    History:历史对象   go();   加载history 列表中的某个具体页面
    Location:路径对象    href:   设置或者返回完整的URL

    4.JS函数的定义和创建:

      创建
        function 函数名(参数){
    函数体;
    }
    //默认返回值为true。
    * window.onload = function(){

    }
        var 函数名 = new Function(参数(函数体))
        var 函数名 = function(参数) {
    函数体
    }
    js函数参数问题: 参数无数据类型,调用时不用按照方法里的参数规定来
    js函数返回值问题:
      (1) 如果有返回值可以用return
           (2)有返回值不用声明返回值类型
                注:没有方法重载,可以用arguments模拟
           (3) 如果没有返回值就返回undefined

  • 相关阅读:
    #Responsive# 响应式图片//www.w3cplus.com/blog/tags/509.html 整个系列完结。
    用js实现帧动画
    js判断对象是否存在
    canvas
    函数的四种调用模式
    递归真的好难啊!!! 看完之后好多了
    词法作用域
    变量名提升
    ajax调用后台Java
    左图又文字自适应
  • 原文地址:https://www.cnblogs.com/unrulywind/p/9141466.html
Copyright © 2011-2022 走看看