JavaScript
概述
JavaScript: 动态操作网页中标签和css样式的脚本语言
一种直译式的脚本语言,用来为网页添加各种各样的动态效果
历史:
JavaScript 原名 LiveScript 由sun公司与网景公司合作改名为JavaScript
与java的异同
相同点:
面向对象的语言
不同点:
JavaScript属于脚本语言,运行在网页浏览器中,不需要编译,由某种解释器解释执行
Java是高级语言,需要经过整体编译后再执行
作用:
- 相应网页中产生的事件
- 进行表单客户端验证
- 动态改变标签样式
一个完整的网页由三部分组成
HTML:构成网页的基本内容和结构
CSS:为网页的内容添加各种样式
JavaScript: 动态操作标签与css样式
基本语法
位置
位置:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
//从外部链接
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
//写在head或body中
<script type="text/javascript">
//window网页中最大的对象--窗口
//window.alert("hello JavaScript");
alert("hello JavaScript");
</script>
</body>
</html>
js文件(JavaScript公认的缩写
alert("网页外部消息");
注释
- // 单行注释
- /**/ 多行注释
变量
// 声明变量 使用关键字var js是弱类型语言
var a=10;
var b="10";
var c=10.5;
//console.log(a);//10
//相当于java中的System.out.print()
//console控制台对象,
数据类型(5种)
- 数值型
//数值型
var d=10;//整型
var e=10.5;//浮点型
- 布尔型
//布尔型
var f=true;
var g=false;
//console.log(f==g);
- 字符串型
/* 字符串
'' "" 都表示字符串
*/
var str1="string1";
var str2='string2';
//alert(typeof(str2));//typeof(变量名) 获取变量类型
//console.log(str1+str2);
- undefined型(未声明型)
/* undefined类型 */
var h;
//console.log(h);//undefined
- Object型
/* Object类型 对象 */
var date = new Date();
date.getMinutes();
//alert(date.getFullYear());//2021
运算符
算数运算符
/* 算数运算符 + - * / % ++ -- */
// + 1参与算数运算 2连接字符串
console.log(a+b);//20
console.log(a+c);//20.5
// - * / % -= -- 都会隐式转换
console.log(a-b);//0
console.log(a*c);//105
console.log(--b);//9
赋值运算符
/* 赋值运算符
= += -= *= /= %=
除+=外都会隐式转换
*/
console.log(a*b);//90
比较运算符
/* 比较运算符
== 比较值相等
===(全等,比较值与类型是否相等)
> < >= <= !=
都会进行隐式转换
*/
console.log(a==10);//true
console.log(a==="10");//false
逻辑运算符
/* 逻辑运算符
&& 逻辑短路与 || 逻辑短路或 ! 逻辑非运算
*/
console.log(a==b&&a==c);//false
条件运算符
/* 条件运算符 */
var res = "9"===b?true:false;
console.log(res);//false 在之前的运算中,b已经隐式转换为整形
函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/* 声明函数 关键字function
语法: function 函数名([arguments]){函数体;return 返回值}
*/
function test(){
console.log("test函数");
}
//test();//test函数
function test1(a,b,c){
console.log(a);
console.log(b);
console.log(c);
}
//test1("test1",100,true);//test1,100,true
function test2(a,b,c){
return a+b*c;
}
//console.log(test2(10,"1",10));//20 乘法时字符串会隐式转换
/* 全局函数
parseInt() 转为整形 字符开头的字符串会NaN 数字开头的字符串会将开头数字转为整形
parseFloat() 转为浮点型 字符开头的字符串会NaN 数字开头的字符串会将开头数字转为浮动形
typeof() 返回变量的数据类型
eval() 可运算某个字符串
*/
//parseInt()
console.log(parseInt("10")+10);//20
console.log(parseInt("10a10")+10);//20
console.log(parseInt("a100")+10);//NaN
// parseFloat()
console.log(parseFloat("10.5")+10.5);//21
console.log(parseFloat("10.5A1")+10.5);//21
console.log(parseFloat("A10.5")+10.5);//NaN
// typeof()
console.log(typeof("typeof()"));//string
console.log(typeof(10.5));//number
console.log(typeof(true));//boolean
// eval()
eval("console.log(15+10)");//30
var res ="alert(10+10)";
eval(res);
</script>
</body>
</html>
内置对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/* 内置对象
String Array Date Math
*/
//字符串对象
var str = "hello javascript";
//根据索引查看元素
console.log(str.charAt(15));//t
//查找指定元素的索引(从第一个开始)
console.log(str.indexOf("l"));//2
//查找指定元素的索引(从最后一个开始)
console.log(str.lastIndexOf("l"));//3
//substring(start,end)返回子串,从start到end(不包括)
console.log(str.substring(1,15));//ello javascrip
//substr(start,length)返回子串,start开始位置,length返回的长度
console.log(str.substr(1,15));//ello javascript
//以字符串中的指定字符分割,返回数组
console.log(str.split(" "));//'hello', 'javascript'
/* Array */
//数组声明方式
//var arr = new Array();
//var arr = new Array(1,2.5,"3",true);
//var arr = [1,2.5,"3",true];
var arr = [1,2,3];
var arr1 = [4,5];
var arr2 = [6];
// concat() 连接多个数组
console.log(arr.concat(arr1,arr2));//[1, 2, 3, 4, 5, 6]
//pop() 删除并返回数组最后一个元素
console.log(arr.pop());//3
//push() 向数组末尾添加n个元素,返回新长度
console.log(arr.push(3,4,5,6));//6
//shift() 删除并返回第一个元素
console.log(arr.shift());//1
console.log(arr);// [2, 3, 4, 5, 6]
//slice(start,end)start开始位置,end前一位置
//返回数组中指定索引范围的元素,不修改原数组
console.log(arr.slice(0,4));//[2, 3, 4, 5]
//splice(开始位置,操作数量,item1,item2..)
//数组中添加/删除元素,返回被删除的元素,且会改变原数组
console.log(arr.splice(2,5,4,5,6,7,8));//[4, 5, 6]
console.log(arr);//[2, 3, 4, 5, 6, 7, 8]
//join(arg) 返回一个字符串,每个元素用指定字符连接起来
console.log(arr.join("-"));// 2-3-4-5-6-7-8
//reverse() 逆序
console.log(arr.reverse());//[8, 7, 6, 5, 4, 3, 2]
/* 数组排序 sort()
字符排序:直接使用
数字排序:需要指定排序的函数
*/
var str = ["b","d","c","a"];
var int = [5,2,11,4,33];
console.log(arr.sort());// ['a', 'b', 'c', 'd']
function numberSort(a,b){
return a-b;
}
console.log(int.sort(numberSort));
</script>
</body>
</html>
事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- onload 网页加载完触发事件(用在body中) -->
<body onload="loadTest()">
<script type="text/javascript">
function loadTest(){
alert("网页加载完毕");
}
function test(){
console.log("test函数被调用");
}
function focusTest(){
console.log("聚焦");
}
function blurTest(){
console.log("失焦");
}
function overTest(){
console.log("移入");
}
function outTest(){
console.log("移出");
}
function changeTest(){
console.log("文本框内容已改变");
}
function downTest(){
console.log("键盘按下");
}
function upTest(){
console.log("键盘抬起");
}
</script>
<!-- onclick 单击事件 -->
<input type="button" name="" id="" value="单击" onclick="test()"/>
<!-- ondbclick 双击事件 -->
<input type="button" name="" id="" value="双击" ondblclick="test()"/>
<!-- onblur 标签失去焦点事件 -->
<!-- onfocus 标签获得焦点事件 -->
<input type="text" name="" id="" value="" onblur="blurTest()" onfocus="focusTest()"/>
<!-- onmouseover 鼠标移入(悬浮事件) -->
<!-- onmouseout 鼠标移出事件 -->
<div style="width: 100px; height: 100px; background-color: blanchedalmond;" onmouseover="overTest()" onmouseout="outTest()" >
</div>
<!-- onchange 失去焦点,内容改变 触发事件(输入框) -->
<input type="text" name="" id="" value="失焦,内容改变" onchange="changeTest()"/>
<!-- onkeydown 键盘按下 -->
<!-- onkeyup 键盘抬起 -->
<input type="text" name="" id="" value="" onkeydown="downTest()" onkeyup="upTest()" />
</body>
</html>
