HTML，css和JavaScript的基础学习—JavaScript篇
HTML，css和JavaScript的基础学习—JavaScript篇
JavaScript是做什么的？
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能
关于弱类型：强类型和弱类型主要是站在变量类型处理的角度进行分类的。强类型是指不允许隐式变量类型转换，弱类型则允许隐式类型转换。
1.使用方式
HTML 的 <script>标签用于把 JavaScript代码 插入 HTML 中；script标签可以出现在html的head或body位置，一般常放在head中；
也可以引入外部的js文件 <script src=“myScript.js”></script>
2.变量及数据类型
- 变量
js是弱类型语言，所以在定义变量时不需要指定类型，直接用var关键字定义即可。 var = a
字符串，数字，布尔，数组，object对象，日期对象，特殊类型。
数字类型不区分整数类型和浮点类型，特殊类型包括：NaN，undefined，null
3.Math对象
Math 对象用于执行数学任务。
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。
- Math对象属性
E 返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2 返回 2 的自然对数（约等于0.693）。
LN10 返回 10 的自然对数（约等于2.302）。
LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。
PI 返回圆周率（约等于3.14159）。
SQRT1_2 返回 2 的平方根的倒数（约等于 0.707）。
SQRT2 返回 2 的平方根（约等于 1.414）。 - Math对象方法
abs(x) 返回 x 的绝对值。
acos(x) 返回 x 的反余弦值。
asin(x) 返回 x 的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 Ex 的指数。
floor(x) 对 x 进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y,z,…,n) 返回 x,y,z,…,n 中的最高值。
min(x,y,z,…,n) 返回 x,y,z,…,n中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
4.运算符
- 算术运算符（+ - * / % ++ --）
- 比较运算符（> >= < <= == != === !==）
- 逻辑运算符（&& || !）
- 赋值运算符（= += -= *= /= %= ）
- 字符串连接运算符 +
- 三元运算符（? :）
5.流程控制
- 条件语句
if(条件判断){要执行的代码块}
if(){} else if(){} else{}
if(){} else{}
switch…case语句 - 循环语句
for语句
while语句
do…while语句 - break和continue
break语句是中断语句，用于终止循环语句或开关语句。
continue语句是连续语句，用于重新开始while、do while和for语句。
6.函数
- 正常函数
function 方法名(参数1,参数2){ ... return ... } - 匿名函数
var fn = function(a,b){ //定义匿名函数，并赋值给一个变量 alert(a+" -- "+b) } fn(18,"yml")
7.事件（重要）
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。
使用
- 事件注册
定义函数myClick , 并在标签的事件中调用方法：οnclick=“myClick()” - 可用事件
onclick 鼠标点击时触发
ondblclick 鼠标双击时触发
onfocus 元素获得焦点时触发
onblur 元素失去焦点时触发
onchange 用户改变域的内容
onmouseover 鼠标被移动到某个元素上（触发一次）
onmousemove 鼠标在元素内部移动时，不断触发
onmouseout 鼠标从元素移开
onkeydown 键盘某个键被按下
onkeypress 键盘的键被按下或按住
onkeyup 键盘的键被松开
onload 用于body标签，页面加载完毕时触发一次 - 事件冒泡
一个标签触发事件后，事件会向上传递给自己的父标签，然后父标签的父标签…
e.stopPropagation() //阻断事件向上传递
e.代表当前标签对象
技巧
- 为超链接注册事件
function myClick() { console.log('go go go') } <a href="javascript:void(0)" onclick="myClick()">go</a> - form表单
form表单提交前，如果需要处理其他逻辑先将提交按钮改为普通按钮，然后在按钮事件中手动提交表单。即可实现灵活的表单控制！
在需要提交的时候再提交 document.forms[0].submit();//手动获取form，并提交 - this关键字
传入当前标签对象function myClick(a) // a=this，当前触发事件的元素 { console.log(a) } <input type="button" name="" value="提交" onclick="myClick(this)"> - 另外的事件注册方式
var btn = document.getElementById('btn') //获得标签 btn.onclick = function() //注册事件 { console.log('注册成功') } - onload
load事件的handler，整个的页面加载完毕后执行<body onload="onload9();"> <!--注册onload事件-->function onload9(){ }
8.DOM对象
HTML DOM （文档对象模型）：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
查找HTML元素
通过 id 找到 HTML 元素 document.getElementById()
通过标签名找到 HTML 元素 document.getElementsByTagName()
通过类名找到 HTML 元素 document.getElementsByClassName()
通过name属性值找到 HTML 元素 document.getElementsByName()
children 获得所有子标签
parentNode 获得父标签
previousElementSibling 获得上一个兄弟标签
nextElementSibling 获得下一个兄弟标签
修改HTML
修改标签内容
修改标签基本属性
修改样式属性
基本格式都是：element.XXX = xxx（element：本元素）
删除和新增标签
- 删除标签
removeChild(child) 删除指定的子标签
remove() 删除自身 - 新增标签
document.createElement(标签名) 创建新标签
document.createTextNode(内容) 创建标签内容
ele.appendChild(标签) 追加子标签
ele.insertBefore(标签) 插入指定标签到ele标签中
9.BOM对象
BOM 是 Browser Object Model，浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
- window对象
window.alert(“警告”) 警告框
window.confirm(“xxx”) 确认框，根据用户的选择，返回bool值 - history对象
window.history.forward() 在浏览历史里前进一步
window.history.back() 在浏览历史里后退一步 - screen对象
window.screen.width 屏幕宽度
window.screen.height 屏幕高度 - navigator对象
window.navigator.appVersion 浏览器版本 - location对象
window.location.href 载入页面–当前载入页面的完整UR - document对象
document.getElement…(…) 选择标签
document.forms[0] 选择文档中的form
document.write(“hello”) == 向文档中写入内容，会覆盖所有之前的
10.补充：计时器
var id1 = setInterval(function(){...},1000) ;
每1000毫秒执行一次function，返回事件的idvar id2 = setTimeout(function(){...},1000);
1000毫秒后仅执行一次function，返回事件的id
clearTimeout(id2); 移除事件
clearInterval(id1); 移除事件
以上只是对JavaScript的基础进行了一些简单总结，不足之处望指出。