最近打算重新学习JavaScript，以前学习的过程中没有留下笔记，所以这次重新学习，也在读红宝书，也就是JavaScript高级程序设计（第3版），顺便把笔记相应的记一下。
认识一门语言，首先需要知道这门语言是来干什么的，它能做什么，不能做什么心中要大体有个数。JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。JavaScript通常用来操作HTML页面，响应用户操作，验证传输数据等。这样简单两句话基本将JavaScript的性质和作用说清楚了，当然，现在JavaScript的作用可能还远不止这些，把它放到服务端，它摇身一变就成了node。可以说，JavaScript是一个草根的逆袭。至于过多的历史，还是请自行百度，这些说起来也没有太大的意思。
下面来认识一下有关JavaScript基本的知识点。
一、JavaScript代码写在哪？
- 内嵌js，在html当中，写在script标签内部，注意script是闭合标签
- 外链js文件里面，利用src属性引入
- 标签属性里面（不推荐）
注意：
- script标签中的一些属性type="text/javascript"或language=”javascript”，HTML5新规则下可以什么都不用加，但是写就一定要写对。
- script标签可以放置于html的任何位置（style标签内除外），不同的位置要注意加载顺序，通常放在head内部或body结束之前。
- script内部书写的是js代码，其他代码会不予解释或报错。
- 在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。
二、写JavaScript代码需要注意什么？
- 严格区分大小写。
- 语句字符都是英文半角字符{} [ ] () ! - + / ., : "" '' ~ ``（字符串里面可以使任意字符）。
- 某些完整语句后面要写分号(;)，虽然有的情况可以不用写，但是有时候会出错且在完整语句后面加上分号是良好的编程习惯。
- 单行注释 用// 代码块用 /* */。
- 代码要缩进，缩进要对齐。
三、JavaScript里的系统弹窗代码
- alert('内容');
- confirm('确定？');
- prompt('请输入您的姓名：');
因为这些弹窗是浏览器自带的，比较丑且无法修改，所以在调试代码的时候更多的还是用console.log()。
四、变量命名规范
很多时候，当我们重复使用某个元素或者某个数据时，内容可能太长或者数据要进行改变，这时就需要定义变量来代替它们。
语法：通过var声明，var+变量名，当然在es6里新增了let和const，先不进行讨论。
可以使用$，_，字母，数字，不能以数字开头，字母严格区分大小写，没赋值的时候，会默认赋undefined，不能未定义直接赋值，因为造成window环境污染。
var abc; //声明不赋值
var obj = 123;//声明立即赋值
一个var可以声明多个变量，变量不一定要马上赋值
var a,b,c,d;//一次声明多个变量
var a = 1,b = 2, c = 3,d = 4;//一次声明多个，声明即赋值的变量
- 不能使用中文，即便支持
- 第一个字符可以用字母、_、$、不能是数字，border-width也不行，因为
-在JavaScript里是减号的意思 - 其他字符可以使用下划线、字母、数字和$
- 不能使用关键字和保留字
- 见名知意
- 小驼峰命名法
五、获取和修改元素HTML
通过id找到文档当中元素的方法：document.getElementById("id值")获取元素，通过 .语法 注册事件。对象.事件属性 = function(){要做的事件！}
document.getElementById('box').ondblclick = function(){
alert('你太帅了');
}
元素HTML内容：
ele.innerHTML获取元素HTML
ele.innerHTML = '字符串'; （修改元素HTML）
元素文本内容 ：
- 标准
ele.textContent获取元素文本
ele.textContent = '字符串'; （修改元素文本） - 非标准(ie低版本)
ele.innerText获取元素文本
ele.innerText = '字符串'; （修改元素文本）
innerHTML 与innerText 都获取标签的内容或操作文本的样式，但是innerHTML会解析标签代码，innerText不会解析标签代码。
改变样式：ele.style.attr = 'value' 改变元素的属性。如果说有复合写法，要使用驼峰命名法：fontSize、lineHeight、backgroundColor
document.getElementById('btn').style.width = '200px';
document.getElementById('btn').style.height = '200px';
document.getElementById('btn').style.fontSize = '40px';
document.getElementById('btn').style.backgroundColor='#ff0'
网友评论