[JavaScript/基础入门一/每天一点点]

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

1:Js注意事项:

1. 严重区分大小写
2. 每段代码结束后需要添加分号(规范)
3. 构造函数首字母大写,再驼峰原则
4. 函数命名首字母小写,再驼峰原则

2:三种执行Js代码方法(个人推荐):

1. 内连写法，再标签上执行js代码(非常古老 不建议使用 且不好管理)
2. body > script
3. 通过script 上面的src属性来引用js脚本文件(页面上加载,通常这个多)

    <div class="box" onclick='alert(1);'>1111</div>

通常这个写法不建议使用,最好参照第三种写法

<script src="JavaScrip路径"></script>

3：获取节点元素：

document.getElementById("id名字"); #通过Id名字获取元素

document.getElementsByTagName("标签名");通过标签名获取元素

document.getElementByName("name属性名");通过name属性的值来获取元素 返回集合(表单较多) innerHTML属性(获取里面的内容)

document.getElementByName("name属性名");通过name属性的值来获取元素 返回集合(表单较多) 
innerHTML属性(获取里面的内容)
value(获取默认value值)

4：变量：

1. var 关键字 声明一个变量
2. 严格模式下,强烈建议加var(不加也可以 可以试一下)
3. 变量名定义:字母，数字，下划线，$，数字不能开头,keywor的关键字
4. 没有被赋值的变量默认初始化undefined

var a;
var b = 1;
var response = document.getElementByName('id')[0];
response.innerHTML = '123'; (此时里面的内容就变为123);

5：六大数据类型：

1. Number 数字
2. String 字符串
3. Boolean 布尔 true/false
4. function 函数
5. undefined 为定义
6. Object 对象 只有对象才能去.方法.属性

function 函数名() {   #函数
};

var obj = {
    name:'your name',   #object
    'age':3
};

6：注册事件(绑定事件,事件监听)：

onmouseenter / onmouseover 鼠标划入
onmouseleave / onmouseout 鼠标划出
onmousemove 鼠标移动
onclick 单击左键(使用较多)
ondblclick 双击左键
onkeydown 键盘按下某键
onkeyup 键盘抬起某键
onkeypress 按下键盘并抬起某件
onblur 失去焦点
onfocus 得到焦点

demo1

<div id="box" ></div>
var box  = document.getElementById("box");
box.onclick = function(){
    aler("点击之后弹出数据")
};

demo2

        #box1 {
            width: 100px;
            height: 100px;
            background: red;
        }

        #box2 {
            width: 100px;
            height: 100px; 
            background: pink;
        }

 <div id="box1"></div>
 <button id='sub'>提交</button>
  <script>
       var btn = document.getElementById('box1');
       var sub = document.getElementById('sub');
       sub.onclick = function(){
        if(btn.id == 'box1'){
            btn.id = 'box2'
        }else{
            btn.id = 'box1'
        }
       };
    </script>

demo3

更改样式
    #box1 {
            width: 100px;
            height: 100px;
            background: red;
        }

        #box2 {
            width: 100px;
            height: 100px; 
            background: skyblue;
        }
        var btn = document.getElementById('box1');
        btn.style.width = '300px; #更改宽
        btn.style.marginTop = '300px';
        btn.style['margin-top'] = '300px';