2017-12-27 JS,你好!

原创 moxiao 随笔 个人笔记 72阅读 2017-12-27 18:44:25 举报

今天开始学习JS了,因为前两天预习了下,今天讲师讲的东西还可以听懂,顿时感觉压力好大啊!
一、知识脉络
javascript 一门语言
实例
先了解需求
布局
写js
获取元素
通过id获取 document.getElementById('id名字')
变量
存储数据
声明变量,使用关键字var
事件
和页面进行交互的桥梁
元素.onclick = function(){
// 写上要做的事情
}
函数
语法,使用关键字function来定义函数
定义函数:
函数声明
function 函数名字() {
// 函数体
}
函数表达式
var f = function(){}
元素.属性名 = function(){}
调用函数
直接调用:函数名()
事件调用:触发某个元素的事件,调用函数

属性
描述对象长的样子
获取属性值、设置属性值

操作属性: . []
获取属性值:元素.属性名
设置属性值:元素.属性名 = 属性值

对象
由多个属性组成

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

二、
js出现的位置:

  1. 标签行间
    好处:不用获取元素,比较直观
    坏处:不易阅读,不能复用,不易维护
  2. 内嵌js
    写在一对script标签中
    script标签出现的位置
    head标签中(不推荐)
    body结束之前 (推荐)
    好处:
    html和js分离,好维护
    不好:
    内嵌的js代码,别的页面不能使用
  3. 外链js文件
    通过script标签的src外链一个js文件
    好处:html和js分离,好维护,别的页面能使用

三、
调试:alert(弹的一句话);会在浏览器中出现一个提醒框
如果页面没有达到预期目标,说明写代码有问题
调试代码:
看console控制台
调试程序的方式:
alert()
console.log(输出的值) 向控制台输出log日志
console.dir(输出元素) 会显示这个元素上所有的属性

需求:点击一个按钮,让按钮自身变为red
操作元素 => 先找到元素
找页面中的元素,document
通过id名字找元素:
    document.get Element By Id("id名字" 'id名字')
绑定事件
    元素.onclick = function(){
         做的事情
    }

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

五、

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

    声明变量
    关键字 var
    语法: var 变量名;
    声明变量未赋值 var 变量名;默认值为undefined
    声明变量赋值:var 变量名 = 值。
    声明变量并赋值,称之为初始化一个变量
    运算符
    = 赋值运算符 把等号右边的值赋值给左边变量,这个变量就代表这个值

    注意:要使用一个变量,必须先声明
    提醒:在js中出现的单词,要么是关键字,要么是变量名,要么是字符串(一定要加引号)
  2. 事件
    用户和页面的元素进行交互的那一瞬间就产生一个事件
    如果关系元素上产生的事件,需要绑定一个事件函数
    事件,是浏览器已经定义好的
    以下是浏览器定义的事件名:
        click
        mouseover
        mouseout
    
    on 在…之时
    
    onclick
    onmouseover
    onmouseout
    
    给这个元素的事件绑定一个函数,当这个事件触发的时候,就会执行这个函数,在函数{}内部写上要做的事情
    元素.onclick = function(){}
    元素.onmouseover = function(){}
  3. 函数
    函数中会放入多行代码
    作用:复用一个代码块
    定义函数:
    函数声明:
    语法: function 函数名() {
    // 函数体 代码
    }
    函数表达式
    可以把一个函数赋给一个变量,这种形式称之为函数表达式
    var 变量名 = function [函数名](){}

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

    函数也是数据

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

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

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

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

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

    当获取一个元素,它其实是一个对象,称之为元素对象
    这个元素上有很多的属性,这个属性用来描述这个对象应该长什么样子

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

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

    属性名不符合命名规则,不能用.,用[]

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

    id

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

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

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

标识符命名风格
    便令的名字由多个单词组成
    驼峰命名法
        大驼峰 从第1单词开始首字母大写
        小驼峰 从第二单词开始首字母大写

上面呢就是今天的知识点了,来看看今天修改的前几天的东西:
html 代码

前几天做的因为是A标签,所以在点击的时候会有链接跳转所以,一直没法使用onclick,今天老师讲解了之后,使用的button,而且把input标签换掉了。
算是做了一点小小的改动吧!
今天没有拿书,也没法看视频,所以早早的就回来了,明天把JS高程带去,在晚自习的时候学习下,毕竟回来就不想学习了,赶紧再看看视频把明天的东西预习下,不然明天就该睁眼瞎了!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复