一.概述
1.JavaScript一种直译式脚本语言
2.历史
1 JavaScript由Netscape公司开发命名为Livescript,Netscape公司与SUN公司合作将其改名为JavaScript
2 JavaScript也是面向对象的,同时不需要编译,由浏览器解释运行
3.作用
1.响应客户端鼠标和键盘事件
2.客户端页面表单数据验证
3.使用JavaScript动态的改变页面标签的样式
4.关系
网页由HTML结构,CSS样式和JavaScript行为构成。
二.基本语法
脚本应写在哪里? javaScript脚本写在一组<script>标签中,此标签可以放在head中或body中,一般习惯放在 head中,还可以将脚本写在外部的.js文件中,在html页面中导入外部的.js文件。
例如:
<html>
<head>
<script type="text/javascript">
alert(“hello javaScript”);
</script>
</head>
<body>
</body>
</html>
2.变量
声明变量用var 关键字 var a;
同时也可为其赋值: var a = "asd";
3.数据类型
JavaScript支持5种数据类型:number,boolean,String,undefined,Object。
4.运算符
1.算数运算符
有+ - * / % ++ --,其中+有两种含义:加法运算和连接符;其余的运算符在运用时对String类型进行隐式数据类型转换,然后再根据情况进行运算。
2.赋值运算符
+= -= *= /= %= =
3.比较运算符
== === >= <= != > < 其中==比较数值,===比较数值与类型
4.逻辑运算符
&& || !
5.条件运算符
例如:var a = (条件表达式)?结果1:结果2
5.控制语句
1.选择结构
if if/else swtich
2.循环结构
for while do/while break/contiune
三.函数
1.定义
function hello(){alert("heihei");}可没有参数可没有返回值
2.调用
function hello(){alert("heihei");}
hello();函数名调用
function hello(){hello();}在其他函数中调用
3.全局函数
parseInt(arg) 把括号内的内容转换成整数之后的值;
parseFloat(arg) 把括号内的字符串转换成浮点数之后的值;
typeof (arg)返回arg值的数据类型;
eval(arg) 可运算某个字符串。
四.内置对象
1.String字符串
属性 :length 用法:返回该字符串的长度
方法 :1.charAt(n):返回该字符串位于第
n
位的单个字符
.
2. indexOf(char):返回指定char
首次出现的位置
.
3.lastIndexOf(char) :跟 indexOf()
相似,不过是从后边开始找
.
4.substring(start,end) :返回原字符串的子字符串,该字符串是原字符串从
start
位
置到end位置的前一位置的一段
.
5.substr(start,length) :返回原字符串的子字符串,该字符串是原字符串从start
位
置开始,长度为length
的一段
.
6.split(分隔符字符
)
:返回一个数组,该数组是从字符串对象中分离开来的,
<
分隔
符字符>
决定了分离的地方,它本身不会包含在所返回的数组中。
2.Array数组
定义:var <
数组名> = new Array();<
数组名
>[
下标
] =
值
;
var <
数组名
> = new Array(<
元素
1>, <
元素
2>, <
元素
3>...);
var <数组名> = [<元素1>, <元素2>, <元素3>...];
属性:length :数组的长度,即数组里有多少个元素。
方法:
join(<分隔符
>)
:返回一个字符串,该字符串把数组中的各个元素串起来,用
<
分隔
符>
置于元素与元素之间。
reverse() 使数组中的元素顺序反过来。如果对数组
[1, 2, 3]
使用这个方法,它将使数
组变成:[3, 2, 1]
。
sort() :使数组中的元素按照一定的顺序排列。如果不指定
<
方法函数
>
,则按字母顺
序排列。
3.Date
获取日期:
new Date() 返回当日的日期和时间
getFullYear() 返回四位数字年份
getDate() 返回一个月中的某一天 (1 ~ 31)
getMonth() 返回月份 (0 ~ 11)
getDay() 返回一周中的某一天 (0 ~ 6)
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59))
4.Math
Math 对象,提供对数据的数学计算
属性 :PI 返回
π
(3.1415926535...)
方法
Math.abs(x) 绝对值计算;
Math.pow(x,y) 数的幂;x的y次幂
Math.sqrt(x) 计算平方根;
Math.ceil(x) 对一个数进行上舍入
Math.floor(x)
对一个数进行下舍入。
Math.round(x)
把一个数四舍五入为最接近的整数
Math.random()
返回
0 ~ 1
之间的随机数
Math.max(x,y)
返回
x
和
y
中的最大值
Math.min(x,y)
返回
x
和
y
中的最小值
五.事件
一些常用的事件:
onclick()鼠标点击时;
onblur()标签失去焦点
;
onfocus()标签获得焦点
;
onmouseover()鼠标被移到某标签之上
;
onmouseout鼠标从某标签移开
;
onload()是在网页加载完毕后触发相应的的事件处理程序
;
onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
六.Html DOM
DOM是Document Object Model文档对象(网页中的标签)模型的缩写.
通过html dom,可用javaScript操作html文档的所有标签
1.查找 元素
有四种方法:
通过 id 找到 HTML 标签 document.getElementById(“id");
通过标签名找到 HTML 标签 document.getElementsByTagName("p");
通过类名找到 HTML 标签 document.getElementsByClassName("p");
通过name找到 HTML 标签 document.getElementsByName(“name");
2.改变 HTML
改变 HTML 标签的属性:
document.getElementById(“username").value=“new value";
document.getElementById("image").src=“new.jpg";
最简单的方法是使用 innerHTML 属性:
document.getElementById(“div”
).innerHTML=
new HTML
3.改变 CSS
语法:document.getElementById("id").style.property=new style;