JavaScript

甜甜学编程

已于 2024-11-06 16:30:09 修改

阅读量198

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端 java

于 2024-11-06 16:29:43 首次发布

本文链接：https://blog.csdn.net/Messsgo/article/details/143373074

一，什么是JavaScriot

1.1js引入方式

<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/demo.js">
		// alert("hello");
		</script>
	</head>

1.2js基本语法

--区分大小写，

--结尾最好带分号，比较规范

注释ctrl+/或者//单行注释

大括号表示代码块

输出语句

变量

数据类型

通过typeof可以获取数据类型

//	alert(typeof 3);number
		//alert(typeof "q");String
		//alert(typeof null);Object

运算符

 alert(parseInt("12A45"));12
		alert(parseInt("a"));Nan

函数

function add(a,b){
			return a+b;
		}
		
		alert(add(2,3));

对象

Array

String

var str="Hello Workd";
alert(str)
console.log(str.indexOf("lo"));
console.log(str.trim());

console.log(str.charAt(3));
console.log(str.substring(0,5));//含头不含尾

JSON

自定义对象格式S

var user={
	name:"haung",
age :10,
eat :function (){
	alert("用餐")
}

}
alert(user.name);
user.eat();

json格式

var jsoner='{"name":"huang", "age":13      }';
alert(jsoner.name);//jsoner是字符串，无法通过对象获取
//json-->js
alert(JSON.parse(jsoner).name);//转换为js对象
alert(JSON.stringify(JSON.parse(jsoner).name))//转换为JSON

Bom

DOM

1.3，时间监听

事件绑定

常见事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onload="onload()">
    <form action="" style="text-align: center;" onsubmit="subfn()" >
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()"  >
<input  id="b1" type="submit" value="提交">
<input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>
    <br>
    <br>
    <br>
<table width="800px"  border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
    <tr>
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>评语</th>
    </tr>
<tr align="center">
<td>001</td>
<td>张三</td>
<td>90</td>
<td>很优秀</td>
</tr>

<tr align="center">
<td>002</td>
<td>李四</td>
<td>90</td>
<td>优秀</td>
</tr>
</table>

</body>
<script>
//onload:页面完成后触发0
function onload(){
    console.log("页面加载完成");
}
//onclick:鼠标点击事件
function fn1(){
     console.log("我被点击了")
}
//onabort:获得焦点事件
function ffn(){
     console.log("获得焦点");
}
   //onabort:失去焦点事件
function bfn(){
     console.log("失去焦点");
     
}
   //onkeydown：键盘被按下事件
   function kfn(){
   console.log("键盘被按下了")
   }
//onmouseover:鼠标移动到元素之上
function over(){
    console.log("鼠标移动到了");
    
}
//onmouseout:鼠标移出元素
function out(){
    console.log("鼠标移出");
    
}
//onsubmit：提交表单事件
function subfn(){
   alert("事件提交");
    
}

</script>


</html>