初识JavaScript

  • JavaScript 一种脚本语言，是一种动态类型、弱类型

  • JavaScript通常用来操作HTML页面的

  • html骨架，css是样式，js是行为

js代码写在哪里

  • JavaScript代码可以写在页面的script标签里面，或者单独的js文件里面，或者标签属性里面（不推荐）

  • 写在外部.js后缀文件里面，通过script标签引入，类似于img 的src标签引入

    • 在引入js文件的script标签里面，一定不能再写js代码

  • script标签可以放置于任何位置，不同位置要注意加载顺序，如果没有什么特殊要求，通常放在body 结束之前。

    • 如果script里面涉及到操作后面的元素，而script又非得放在前面的话，需要加上window.onload

写js代码需要注意什么

  • 注释里面是没有要求的

  • 严格区分大小写

    • alert()才是js本身自带的，Alert()不是自带的

  • 语句字符都是半角字符（字符串里面可以使用任意字符）

  • 某些完整语句后面要写分号

  • 代码要缩进，缩进要对齐

  • 引号里面代表字符串，字符串是没有代码的功能的，所以不需要满足上述要求。

注释

  • 多行注释 /* */

  • 单行注释 //

js里的系统弹窗代码

  • alert("内容")

js里的打印

  • console.log(1);

js获取元素及修改内容

  • 其实，要操作页面，就是操作标签，JS要操作标签，就要先获取标签

  • 独有标签的获取：

    • document.title   document.title
document.body    document.body.innerHTML 
 			     document.body.innerText 
document.head    document.head.innerHTML

  • 其他标签的获取

    • 通过id获取元素

      • document.getElementById("box");

    • 通过class获取：（不兼容IE8及以下）

      • .getElementsByClassName();

    • 通过标签名获取

      • .getElementsByTagName();

    • 通过选择器的写法获取元素：（不兼容IE7及以下）

      • .querySelector();

      • .querySelectorAll();

    • 通过name获取

      • .getElementsByName();

注意： 除了ID获取前面必须是document之外，其他的方式，前面可以是某个元素（不能是集合）

  • 修改页面title信息

    • document.title = "我要把标题改成666";

  • 修改别的标签的内容，得用innerHTML或者innerText

    • innerHTML 可以识别标签

    • innerText 不能识别标签

  • 获取某个确切的元素,可以直接操作这个元素

    • document.getElementById("box").innerHTML = "吃惊！";

  • 获取的是一堆元素的集合，设置操作时要通过下标（索引、序号）拿到对应的某一个再用

    • document.getElementsByClassName("box")[0].innerHTML = "美女";

  • document.write()

    • 在文档流关闭之前，给body部分新增内容,在文档流关闭之后，修改整个HTML的内容

事件

  • 用户的操作 元素.事件 = 函数；

  • 鼠标事件

    • onclick 左键单击

    • ondblclick 左键双击

    • onmouseenter 鼠标移入

    • onmouseleave 鼠标移出

定义变量

  • 不能使用关键字或者保留字（js里面已经赋予它有意义的词，或者留着备用的词）

  • 只能包含 数字 字母 _ $ 并且不能以数字开头

  • 严格区分大小写

  • 尽量见名知意

  • var 变量时并不要求立马赋值

  • 用,号可以让一个var定义多个变量

​

`js`操作元素的标签属性

  • 规范的标签属性：

    • . 符号直接操作(可读可写)

  • 不规范（自定义）的标签属性：

    • 获取 getAttribute

    • 设置 setAttribute

    • 移除 removeAttribute

注意：所有的 路径/颜色 获取的结果不一定就是你写的内容

​ 通过ID获取的元素赋值给变量后，假设修改了ID，这个变量还是表示这个元素

​ 自定义标签属性的操作方式，同样可以操作符合规范的标签属性

控制元素的样式

  • 行内样式标签属性：大部分情况下，js都是通过操作行内样式达到修改样式的目的

    当我需要单个属性去修改的时候,我们一般都是直接 . 操作去修改元素的行内样式

  • 操作复合属性时，要注意用驼峰写法（去掉-号，-号后面的第一个单词大写）

数据类型

  • number数字

  • string字符串

  • boolean布尔值true false

  • function函数

  • underfined 未定义 一个变量声明之后没有赋值就是undefined

  • object在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单独一类数据类型null

算数运算符

  • + - * /

    当不是数字之间的运算的时候
    + 字符串拼接
    -/*%  尽量将字符串转换成数字（隐式类型转换）

 NaN :Not a Number   number类型
     一般在非法运算的时候才会 出现NaN
 isNaN(参数) 非常讨厌数字
    首先尽量把参数转换成数字，然后
        当参数是 数字，返回 false
        当参数不是数字，返回 true

赋值运算符

  • += -= *= /= %=

    ++ -- 两个都存在隐式类型转换，会全部转换为数字
++x x++

比较运算符

  • < > == <= >= != === !==

    == 和 ===的区别
== 只判断值是否一样
=== 不仅仅判断值，还判断类型是否一样

逻辑运算符

  针对布尔值
  &&  与 两边都为真，结果才为真，其他为假
  ||  或 两边都为假，结果才为假，其他都是真
  !   非 取反，真变假，假变真

  当逻辑运算符，两边不一定是布尔值的时候
  && 遇到假就停，但是不会进行类型转换
  || 遇到真就停，。。。
  ！ 隐式类型转换，将后面的数据先转换为布尔值再取反

if条件

当if的条件 运算完后不是布尔值的时候，会被强制性的转换为布尔值
哪些值，在转换为布尔值的时候为false
    false          boolean
    0              number
    ""             string
    null           object
    undefined      undefined
    NaN            number
    在if里面，能用布尔值做条件判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间
    在两个值比较的时候，能用三等判断的时候，就用三等判断