JS基础入门篇（一）

时间 2019-12-13

原文原文链接

1.JS存放在代码中的位置

1.JS写在行间html

<div style="background-color: red;" onclick="alert(1)" >hello world</div>

优势：直接，简单
缺点：不方便复用和维护,不符合结构行为分离规范

2.JS写在script ( 通常写在body结束标签以前 )
由于JS的执行顺序，须要将元素加载完成，才能获取到元素，故通常写在body结束标签以前。dom

<body>
        <div id="box">hello</div>
        <div id="box2">world</div>    
        <script>
            document.getElementById("box").onclick = function(){
                alert(1);
            };
            document.getElementById("box2").onclick = function(){
                alert(2);
            };
        </script>
</body>

优势：只要是在这个页面中就可使用这段 js。
缺点： 1. 不方便修改维护 2. 不符合规范函数

3.写在js文件中字体

1.建立一个js文件,写入js代码
2.让html文件和js文件产生关联,经过script标签的 src 属性连接到js文件。code

<body>
        <div id="box">miaov</div>
        <script src="index.js"></script>
</body>

优势：htm

1.结构 行为 彻底分离
2.方便修改维护
3.可复用性强

2.JS执行的顺序

针对js的存放位置，若是js放在script标签中，必须放到body结束标签以前。缘由是js会读取dom节点，必须等到dom节点都加载完成了，js代码才取获得对应节点。事件

若是JS代码非要放在全部节点以前呢？？？
能够将script代码写到head中，用window.onload把代码块包起来放到script中。图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                width:100px;
                height:100px;
                background-color:red;
            }
        </style>
        <script>
            window.onload = function(){
                document.getElementById("box").onclick = function(){
                    alert(1);
                }
            }
        </script>
    </head>
    <body>    
        <div id="box">miaov</div>
    </body>
</html>

以上方法不支持，由于window.onload是等到页面全部dom节点，图片资源加载完成才执行的。若是图片资源不少的话，那么用户对页面的操做就无效了。因此，通常放在body结束标签以前。ip

3.注释

分为单行注释和多行注释。资源

//单行注释
 //单行注释
 //单行注释

/*
 多行注释
 多行注释
 多行注释
 */

4.变量

变量：可变的量。
做用：复用数据，存储数据。
申明变量： var 变量名; 以分号结束。只申明一个变量不赋值的话，那这个变量中默认存储的是undefined
变量命名规范：能够是数字(1234567890) 字母(abcdefg...)下划线 ( _ )美圆符( $ )组成。
禁止：
```
1. 不容许数字开头     
 2. 不容许使用关键字
 3. 不容许使用保留字
```

推荐：
驼峰式命名法+语义化单词
驼峰式命名法:从第二个单词开始，每一个单词的首字母大写。

属性操做：

如下三种写法均可以。

box.style["background-color"] = "green";
box["style"]["background-color"] = valStr;
box.style.backgroundColor = "green";

若是[ ]中间没有用引号包起来,那么会把中间的内容当作变量处理。
当须要改变的属性值是一个变量的时候只能使用[ ],方括号中间若是是变量的话，不须要加引号。
当操做属性的时候属性名不符合变量命名规范的时候可使用[ ]。
若是必定要使用点( . )的话，须要改变成驼峰式命名法。

5.函数

（一）简介

函数的做用：代码块的复用
函数的分类：
1.有名函数
2.匿名函数

（二）使用

1-有名函数
                声明:
                    function 函数名(){ 
                        代码块 
                    }
                调用:
                    函数名();


2-匿名函数
                声明: 
                    直接声明一个匿名函数 会报错
                调用:
                    能够直接经过事件调用

eg：
案例一：有名函数的声明和调用
 案例二：匿名函数直接声明会报错，能够经过事件调用
 案例三：有名函数的错误调用，btn.onclick = fn();这样调用是错误的，只会使函数马上执行，传给点击事件的是个null。没有点击click按钮，直接打开就发生变化了。
案例三：有名函数的正确调用，btn.onclick = fn;这样调用是正确的。点击click按钮，红色方块才发生变化

6.innerHTML 和 src

innerHTML:修改双标签里面的内容。
innerHTML举例：如下代码的做用是，点击页面任何位置，修改红色方块的内容。
src：须要注意的是，在js中，img.src获取到的是绝对路径，不多进行比较。

7.基础篇练习

看完以上的小伙伴，能够看两个例子的效果，试着作一下。
练习一：点击按钮，设置方块大小
 练习二：点击按钮，增长或减少字体大小

JS基础入门篇（ 一 ）