|
javaScript
1.javaScript概述
2. 基本语法
3. 函数与事件
4. 内置对象
5. html DOM对象
6. 浏览器对象
1.javaScript概述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/out.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
alert("hello javascript")
</script>
</head>
<body>
<!--
javascript
1、动态操作网页中的标签和css
livescript是美国网景公司的一种脚本语言
javascript与Java的区别：
同：都是面向对象
异：javascript属于脚本语言，运行在浏览器中
java是高级语言，需要整体编译，然后运行
2、概述
javascript是一种直译式的脚本语言，添加动态效果，通常嵌入在html中运行
（1）、作用：响应网页中产生的事件、客户端进行表单验证、动态改变标签样式
html是基本结构内容
css是修饰样子
javascript是行为
alert("内容");
导入外部的js脚本文件
<scrip src="">
-->
</body>
</html>
基本语法1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var a = 10;
var b = 10.5;
var c = true;
var d = false;
var e="e";
var f='f';
var g;
var data = new Date();
data.getFullYear();
alert(data.getFullYear());
</script>
</head>
<body>
</body>
</html>
基本语法2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var a="a";
var b="b";
var c=100;
var d=10.5;
var e="10";
console.log(a+b);
console.log(a+c);
console.log(c+d);
console.log(c+e);
console.log(c-e);
console.log(b-c);
</script>
</head>
<body>
</body>
</html>
基本语法3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var a = "10";
var b = 10;
var c = 5;
console.log(a==b);
console.log(a===b);
console.log(a>b);
var e = "2";
switch(e){
case "2": console.log("aaaaaa");
}
</script>
</head>
<body>
</body>
</html>
事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
console.log("调用了test");
}
</script>
</head>
<body>
<!-- 事件 -->
<!-- 标签可以产生事件，事件会触发函数
鼠标左键单击事件onclick事件
鼠标左键双击事件ondblckick双击事件
输入框获得鼠标焦点时触发 onnfocus聚焦事件
输入框失去鼠标焦点时 onblur失焦事件
鼠标移入到标签上触发 onmouseover移入事件
鼠标移出标签触发 onmouseout移出事件
键盘按下时触发 onkeydown
键盘抬起时触发 onkeyup
当网页加载后自动触发 onload
当输入框失去鼠标焦点 且 内容发生改变时触发 onchange
-->
<input type="button" value="单击" onclick="test()" />
<div onclick="test()">div</div><!-- div标签也可以触发事件 -->
<input type="button" value="双击" ondblclick="test()" /><br>
<input type="text" onfocus="test()" /><br><!-- onfocus聚焦事件 -->
<input type="text" onblur="test()" /><br><!-- onblur失焦事件 -->
<!-- onmouseover触发移入事件 onmouseout触发移出事件 -->
<div style="background-color: aquamarine;width: 200px;height: 200px;" onmouseover="test()" onmouseout="test()"></div>
<input type="text" value="键盘按下事件" onkeydown="test()"/><br><!-- 键盘按下时触发onkeydown -->
<input type="text" value="键盘抬起事件" onkeyup="test()" /><br><!-- 键盘抬起时触发onkeyup -->
<input type="text" value="输入框失去鼠标焦点且内容发生改变" onchange="test()" /><!-- 输入框失去鼠标焦点且内容发生改变时触发onchange -->
</body>
</html>
内置对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var array = [1,2,3,4,5];
var a = [6,7,8];
var b = [9,10];
console.log(array.splice(1,3,0,0,0,0));
console.log(array);
</script>
</head>
<body>
</body>
</html>
|