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,返回事件的id
var id2 = setTimeout(function(){...},1000);
1000毫秒后仅执行一次function,返回事件的id
clearTimeout(id2); 移除事件
clearInterval(id1); 移除事件
以上只是对JavaScript的基础进行了一些简单总结,不足之处望指出。