[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';