JS学习第一天笔记

原创 lucialiu 随笔 前端基础学习 312阅读 2017-12-28 02:41:15 举报

2017年12月27日 笔记

大纲

 页面:

    html结构
    css 样式
    JavaScript(js)行为

    html+css => 静态页面
    JavaScript 一门语言 与浏览器进行沟通的一种工具

  1. JavaScript能够干什么?
    能够让页面和浏览器与用户之间有交互行为
    可与服务器进行数据交互
    发送给后端数据
    从后端获取数据
    能动态改变页面中结构和样式
  2. JavaScript使用的场景:
    浏览器 - 前端写的页面
    服务端 - 后台写的
    桌面应用
    APP
    数据可视化
    游戏
    物联网
  3. 使用的编辑器:
    vscode
    sublime Text
    atom
    hbuilder
    webstorm

    浏览器
    chrome
    firefox

  4. js出现的位置:
    标签行间 :
    好处:不用获取元素,比较直观
    坏处:不易阅读,不能复用,不易维护

    内嵌js :
    写在一对script标签中
    script标签出现的位置
      head标签中(不推荐)
      body结束之前 (推荐)
    好处:
       html和js分离,好维护

    外链js文件:
    通过script标签的src外链一个js文件
    好处:html和js分离,好维护,别的页面能使用

  5. 注释
        // 单行注释
        /
        
    / 多行注释

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

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

    操作元素 => 先找到元素

    找页面中的元素,document

    通过id名字找元素:
       document.get Element By Id("id名字" 'id名字')

    绑定事件:
       元素.onclick = function(){
           做的事情
    }
     当点击这个元素的时候做一些事情:
    document.getElementById('btn').onclick = function () {
          alert(1);
    }

  6. 调试

  如果页面没有达到预期目标,说明写代码有问题
  调试代码:看console控制台

  页面出现的单词:
    内置语法出现的单词,称为关键字,浏览器认识这些单词
    如果自己定义的单词,不是变量,会出错

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

  字面意思:可变的一种量
  作用:用来存一些数据的

声明变量:
    关键字 var<!--作var 是 variable[ `var-i-able ](变量,可变物)的简写 --> 

声明变量的语法: var 变量名

    声明变量未赋值 var 变量名;默认值为undefined(列:var n;)
    声明变量赋值:var 变量名 = 值(列:var m = 1000;)
    声明变量并赋值,称之为初始化一个变量

  变量名的命名规则:
    名字由,数字、字母、下划线_、美元符$组成的,不能以数字开头
    变量名不能是关键字和保留字:
    关键字,js中正在使用的语法单词
       var if for function,top、name等等
       参考:http://www.itxueyuan.org/view/6627.html
    保留字,js未来可能会用到语法中的单词
       import、public

        eg:
            //var 1 = 1; // 不合法 
            var a = 10; 
            var b_ = 20; 
            var a_b = 30; 
            var a1 = 30; 
            //var 1a = 30; // 不合法 
            var _ = 10; 
            var $ = 40;

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

            var fristClassJs = 10;

            var FristStudent = "duoduo";

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

  1. 运算符

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

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

  提醒:在js中出现的单词,要么是关键字,要么是变量名,要么是字符串(一定要加引号)
   列:
      1分别和1相加,2相加,3 相加
        var m = '1000px';/声明变量赋值/
        alert(m+1)
        alert(m+2)
        alert(m+3)
        alert(m+4)
   var n; /声明变量未赋值,默认值为undefined/

10.事件

事件:用户和页面的元素进行交互的那一瞬间就产生一个事件

如果关系元素上产生的事件,需要绑定一个事件函数 
  事件,是浏览器已经定义好的

    以下是浏览器定义的事件名:
     click
     mouseover
     mouseout

     on 在…之时

     onclick 
     onmouseover 
     onmouseout

给这个元素的事件绑定一个函数,当这个事件触发的时候,就会执行这个函数,在函数{}内部写上要做的事情 
     eg: 
      元素.onclick = function(){} 
      元素.onmouseover = function(){}
  1. 函数

    函数:
    函数中会放入多行代码

    作用:复用一个代码块
    
    定义函数:
        函数声明: 
            语法: function 函数名() { 
            // 函数体 代码 
            }
            eg:
            /  var fn = function () {} 
              var func = function miaov() {}/
    
                /alert(1) 
                alert(2) 
                alert(3) 
                alert(4)
    
                alert(1) 
                alert(2) 
                alert(3) 
                alert(4)
    
                alert(1) 
                alert(2) 
                alert(3) 
                alert(4)/
    
        函数表达式 :
            可以把一个函数赋给一个变量,这种形式称之为函数表达式
    
            var 变量名 = function 函数名{}
    
            定义函数不给名字,称之为匿名函数
    
            函数也是数据
    
            注意:写函数声明不写函数名字报错
    
            eg:
                // 函数声明
                function f() {}
    
                // 函数表达式
                var fn = function () {}
                var func = function mm() {}
  2. 调用函数

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

    fn();

      定义一个函数赋给一个事件,函数并不会直接执行,再点击这个元素后会执行这个函数

    eg:
      一、
        document.onclick = function (){
          alert(1)
        }//事件调用

      二、
        function fn(){
          alert(1)
        }
        document.onclick = fn;

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

  3. 操作属性

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

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

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

  4. 操作属性

操作属性:
  . (的)
  读取:
    元素.属性名   这个的意思就是通过属性名取出属性值
  设置:
    元素.属性名 = 属性值  意思是给这个属性赋一个值

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

  1. 标识符

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

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

    标识符不能是关键字和保留字:

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

    便令的名字由多个单词组成
    驼峰命名法:
        大驼峰  从第一个单词开始首字母大写
        小驼峰  从第二个单词开始首字母大写

  2. 调试程序的方式

    调试程序的方式:
    alert()
    console.log(输出的值) 向控制台输出log日志
    console.dir(输出元素) 会显示这个元素上所有的属性
    /dir 是directory的缩写,是目录的意思 /

    eg:
    var btn = document.getElementById('btn');

    console.dir(btn);
    
    // 获取元素后属性是有默认值的
    
    console.log( btn.tagName );  // 取出属性值
    console.log(btn.id);
    console.log(btn.className);
    
    // 通过js改变元素的样式
    
    console.log(btn.style.width);
    
    btn.style.width = '1000px';

    html 代码

html 代码

评论 ( 2 )
最新评论
tjn 2017-12-28 16:23:14 2F

同学,你能不能别再发了?培训的东西简直把别人的好东西都顶没了!你自己找个笔记记下不行吗?实在找不到我给你推荐个有道云笔记?

戒不掉的殇 2017-12-28 09:24:52 1F

非常好!js大概就这些了。但是你一天就学完了吗,好可怕!