2017-1227 JS初学之第一课

原创 502972636 随笔 JS 89阅读 2017-12-27 21:03:43 举报

js出现的位置:

  1. 标签行间
    好处:不用获取元素,比较直观
    坏处:不易阅读,不能复用,不易维护
    ex:<div onclick="alert(1);">css书写的位置</div>
    1. 内嵌js
      写在一对script标签中
      script标签出现的位置
      head标签中(不推荐)
      body结束之前 (推荐)
      好处:s
      html和js分离,好维护
      不好:
      内嵌的js代码,别的页面不能使用
      ex:<script>
      alert(1)
      </script>
      1. 外链js文件
        通过script标签的src外链一个js文件
        好处:html和js分离,好维护,别的页面能使用
        ex:<script src="./test.js"></script> src(写路径)

JS注释:
// 单行注释
/
多行注释
/

JS:
// 调试:alert(弹的一句话);会在浏览器中出现一个提醒框

// 需求:点击一个按钮,让按钮自身变为red

// 操作元素 => 先找到元素

// 找页面中的元素,document
/*
通过id名字找元素:
  document.getElementById("id名字" 'id名字')
绑定事件
   元素.onclick = function(){
    // 做的事情
  }
  */
// 当点击这个元素的时候做一些事情
  ex:   document.getElementById('btn').onclick = function () {
    // alert(1);    
   }

    ex:   document.getElementById('btn').onclick = function () {
            document.getElementById('btn').style.background = 'red';
            document.getElementById("btn").style.width = '200px';
            document.getElementById('btn').style.height = '200px';
        }

      // 需求:点击button,改变自身的样式,包括改变一个div的样式

    ex: document.getElementById('btn').onclick = function () {
                           (点击button,改变自身的样式)
            document.getElementById('btn').style.background = 'red';
            document.getElementById("btn").style.width = '200px';
            document.getElementById('btn').style.height = '200px';
                            (改变一个div的样式)
            document.getElementById('box').style.width = '500px'
        }

     *  javascript:
         1. 变量:
                 1). 变量
                字面意思:可变的一种量
                作用:用来存一些数据的

                声明变量
                    关键字 var
                语法: var 变量名;
                        声明变量未赋值 var 变量名;默认值为undefined
                        声明变量赋值:var 变量名 = 值。
                        声明变量并赋值,称之为初始化一个变量
                                   变量名的命名规则
                    名字由,数字、字母、下划线_、美元符$组成的,不能以数字开头

                变量名不能是关键字和保留字:
                    关键字:  js中正在使用的语法单词
                        var  if   for   function,top、name等等
                        参考:http://www.itxueyuan.org/view/6627.html
                    保留字:  js未来可能会用到语法中的单词
                        import、public

                命名风格
                    变量的名字由多个单词组成
                    驼峰命名法
                        大驼峰 从第1单词开始首字母大写
                        小驼峰 从第二单词开始首字母大写

ex: //var 1 = 1; // 不合法
var a = 10;
var b_ = 20;
var ab = 30;
var a1 = 30;
//var 1a = 30; // 不合法
var
= 10;
var $ = 40;

        // var var = 20;// 不合法   

            2). 运算符
                = 赋值运算符 把等号右边的值赋值给左边变量,这个变量就代表这个值

            注意:要使用一个变量,必须先声明

                             提醒:在js中出现的单词,要么是关键字,要么是变量名,要么是字符串(一定要加引号)

                                     ex:   var fristClassJs = 10;
                                             var FristStudent = "duoduo";
        ex:    1分别和1相加,2相加,3 相加

        var n; // 声明变量未赋值,默认值为undefined
        //alert(n)

        var m = 10000;   声明变量赋值:var 变量名 = 值。

        //alert(m)

                   3.) 如果页面没有达到预期目标,说明写代码有问题
            调试代码:
                看console控制台
            页面出现的单词:
                内置语法出现的单词,称为关键字,浏览器认识这些单词

                如果自己定义的单词,不是变量,会出错

                  案例:
                    var btn(变量名) =(运算符) document.getElementById("btn")(值)
          var box123 = document.getElementById('box')

           btn.onclick = function () {
            btn.style.background = 'red';
            btn.style.width = '200px';
            btn.style.height = '200px';
            box123.style.width = '500px'
         }
      2. 事件
                    事件:用户和页面的元素进行交互的那一瞬间就产生一个事件

            如果关系元素上产生的事件,需要绑定一个事件函数

            事件,是浏览器已经定义好的
            以下是浏览器定义的事件名:
                click(点击时)
                mouseover(鼠标移入)
                mouseout(鼠标移出)

                on 在…之时

                onclick(当点击时)
                onmouseover(当鼠标移入)
                onmouseout(当鼠标移出)
            // 给这个元素的事件绑定一个函数,当这个事件触发的时候,就会执行这个函数,在函数{}内部写上要做的事情
            元素.onclick = function(){}
                                   元素.onmouseover = function(){}

                     案例:
                          var btn = document.getElementById('btn');
        btn.onclick = function (){
            btn.style.height = '100px'; 
        }
        btn.onmouseover = function (){
            btn.style.background = 'red';   
        }
        btn.onmouseout = function (){
            btn.style.background = '#fff';  
        }

      3. 函数
                   函数:
                函数中会放入多行代码
                作用:复用一个代码块
                定义函数:
                    函数声明:
                        语法: function 函数名() {
                            // 函数体 代码
                        }
                    函数表达式
                        可以把一个函数赋给一个变量,这种形式称之为函数表达式

                        var 变量名 = function [函数名](){}

            定义函数不给名字,称之为匿名函数

            函数也是数据

            注意:写函数声明不写函数名字报错
        */

        // 函数声明
        function f() {}

        // 函数表达式
        var fn = function () {}
        var func = function miaov() {}

                  调用函数:
                直接调用:
                    函数名()
                事件调用:
                    当点击这个元素的时候,调用这个函数
                    元素.onclick = function(){}

            注意:
                声明一个函数之后,代码放在函数中,并不会执行函数中代码,除非调   用了这个函数才会执行函数中的代码

                           ex:    定义一个函数赋给一个事件,函数并不会直接执行,再点击这个元素后会执行这个函数
        document.onclick  = function (){
            alert(1)    
        }

                           案例:
                   function fn(){
            alert(1)
        }

        //document.onclick = fn(); //页面一加载,右边这个函数立马直接执行了
        document.onclick = fn; // 这是只有当点击document的时候才会调用这个函数

      4. 属性
                      属性:
                属性就是对于一个对象的抽象描述

            对象 
                由多个属性组成的,是属性的集合
                格式:
                    {
                        属性名:属性值,
                        属性名:属性值
                    }

            调试程序的方式:
                alert()
                console.log(输出的值) 向控制台输出log日志
                console.dir(输出元素) 会显示这个元素上所有的属性

                               案例:
                                 // 当获取一个元素,它其实是一个对象,称之为元素对象
        // 这个元素上有很多的属性,这个属性用来描述这个对象应该长什么样子,id class tagName
        ex:   var btn = document.getElementById('btn');

                            console.dir(btn)     [输出元素]会显示这个元素上所有的属性

]

        // 定义一个对象
        var shouji = {
            color: '#000',
            title: '锤子',
            ad: '安卓4.0'
        }

        console.log(shouji);      [输出的值 向控制台输出log日志]

                     操作属性:
                . (的) 
                读取:
                    元素.属性名  这个的意思就是通过属性名取属性值
                设置
                    元素.属性名 = 属性值 意思是给这个属性赋一个值
                                     属性名不符合命名规则,不能用.,用[]
                                                ex:       btn.style['font-size'] = '100px'
        内置这种复合样式,去掉-改为驼峰命名
        btn.style.fontSize = '100px'

            元素的属性:
                class 是一个关键字,比较特殊
                元素.className
                style
                    只能读取和设置样式,在style标签中和link标签中读不出来
                                     id

                                   案例:
                                      var btn = document.getElementById('btn');

        console.dir(btn);

        // 获取元素后属性是有默认值的

        console.log( btn.tagName );  // 取出属性值
        console.log(btn.id);    向控制台中找Id名称
        console.log(btn.className);     向控制台中找class名称

        // 通过js改变元素的样式

        console.log(btn.style.width);     向控制台中找(btn.style.width)

        btn.style.width = '1000px';

                    标识符是一个符号,是变量名、函数名、属性名统称。

                标识符的命名规则
                    名字由,数字、字母、下划线_、美元符$组成的,不能以数字开头

                标识符不能是关键字和保留字:
                    关键字,js中正在使用的语法单词
                        var if for function,top、name等等
                        参考:http://www.itxueyuan.org/view/6627.html
                    保留字,js未来可能会用到语法中的单词
                        import、public

                标识符命名风格
                    变量的名字由多个单词组成
                    驼峰命名法
                        大驼峰 从第1单词开始首字母大写
                        小驼峰 从第二单词开始首字母大写
评论 ( 3 )
最新评论
15889652954 2017-12-28 11:46:22 3F

前端网不是这样用的,想记录写在笔记里面就好了,这里是交流解答疑惑的~

戒不掉的殇 1F 2017-12-28 09:41:53 2F

js大概就这么多了,一天就学完了

wangziwanan 2017-12-27 21:23:42 1F

第一天就学了这么多