插入Javascript脚本的三种方式
1.行间事件方式 以及 按钮的onclink和alert
<body>
<input type="button" value="hello" onclick="window.alert('hello word!!!!!!!')"></input>
</body>
使用上述代码即可实现点击按钮弹出窗口的效果
2.代码块的方式
<script type="text/javascript">
window.alert("hello")
</script>
执行上述代码，打开网页就会显示弹窗
3.外部文件的方式
创建js文件夹并在其中创建hello.js
在内部写入代码
window.alert("hello kitty");
然后在html中调用
<body>
<script type="text/javascript" src="js/hello.js"></script>
</body>
运行后结果为
4.函数
编写如图所示代码
<body>
<input type="button" onclick="sayhello('wwwww')" />
<script type="text/javascript">
function hanshu(a,b){
window.alert(a+"？"+b);
}
hanshu("abc",true);
hanshu();
hanshu(1);
hanshu(1,2);
hanshu(1,2,3);
// 第二种声明方式
mysum=function(a,b){
return a+b;
}
var res=mysum(10,20);
window.alert(res);
function sayhello(a){
window.alert("hello!!!"+a);
}
</script>
</body>
执行结果为：
全局变量与局部变量相较于java不同的地方
<script type="text/javascript">
function sayhello(){
p="asdadasd";
}
sayhello();
window.alert(p);
</script>
调用结果为
在JavaScript中不使用var关键字进行声明的变量，都为全局变量
js中的函数是不能重载的
函数若重名 后声明的会覆盖前面的
数据类型
number
NaN
在js脚本运行数学运算时，若结果不是数字，则会返回nan
例如
<body>
<script type="text/javascript">
var res = 199/"http";
window.alert(res);
</script>
</body>
infinity
无穷大 在js中计算 100/0时变量中的值将为infinity
isNaN函数
isNaN会判断传入参数是否为数字
如果不是数字 返回true
是数字，返回flase
特殊的bool型的数据使用isNaN也会被判定为数字
number函数
number函数会将传入的参数
<body>
<script>
var i=Number("123456");
window.alert(typeof(i));
</script>
</body>
结果为：
parseInt函数
使用parseInt可以将其他数据类型暴力取整
<body>
<script>
var i=Number("123456.999");
window.alert(parseInt(i));
</script>
</body>
或
<body>
<script>
var i=Number("123456qwe");
window.alert(parseInt(i));
</script>
</body>
运行结果都是：
Math.ceil函数
此函数作用与parseInt类似 与之不同的是，此函数是向上取整
特殊
js中10/3不是3 而是3.3333333
Boolean类型
boolean只有ture和false两个值
Boolean函数
此函数会将任意类型的数据转换为Boolean类型
Boolean在js中会被隐式调用
下面两种方式是等价的
if(Boolean("asd")){
}
if("abc"){
}
string类型
常用属性和方法
<body>
<script type="text/javascript">
console.log("abcdef".length);//6
console.log("qwerty".charAt(3))//r
console.log("qwe".concat("rty"))//qwerty
console.log("a=b&b=c".indexOf("="))//1
console.log("a=b&b=c".lastIndexOf("="))//5
console.log("1-1-501".replace("-",","))//1,1-501(只能替换第一个)
var arr = "1-1-501".split("-");//拆分字符串 //不需要使用var[]
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
console.log("abcdefg".substr(2))//cdefg
console.log("abcdefg".substring(2))//cdefg
//在参数为两个时
//substr为（start，len）
//substring为（start，end）（不包括end）
console.log("abcdefg".substr(2,3))//cde
console.log("abcdefg".substring(2,3))//c
console.log("Abc".toLowerCase())//abc
console.log("Abc".toUpperCase())//ABC
</script>
</body>
Object
与java相同，可以把Ovject类型看成是所有类的基类
Object对象其中最重要的是它的prototype属性
它可以动态的给类扩展方法和属性
例如
<script type="text/javascript">
var obj = new Object();
Object.prototype.mytest = function(){
console.log("test success");
}
obj.mytest();
Object.prototype.username="zhangsan";
console.log(obj.username)
</script>
上述代码结果为
类
<script type="text/javascript">
/*js中定义类
第一种方法：
function 类名（形式参数列表）{
this.属性名 = 参数
this.属性名 = 参数
this.方法名 = function(){
}
}
第二种方法：
类名 = function(形式参数列表){
this.属性名 = 参数
this.属性名 = 参数
this.方法名 = function(){
}
}*/
//sayHello既是函数，也是类，取决于如何调用
function sayHello(){
}
//这样调用是当作函数调用，不会在堆中new对象
sayHello();
//new 来调用 就是当作类来调用，会在浏览器的堆中开辟新对象
var obj= new sayHello();
</script>
示例（员工类）：
function Emp(empno,ename,sal){
//属性
this.empno=empno;
this.ename=ename;
this.sal = sal;
//方法
this.work=function(){
console.log(ename+"working.....");
}
}
//创建对象
var v1=new Emp();
v1.work();
var v2=new Emp(1);
v2.work();
var v3=new Emp(1,"zhangsan");
v3.work();
var v4=new Emp(1,"zhangsan",900);
v4.work();
console.log("第一种方式"+v4.sal);
//另一种引用方式
console.log("第二种方式"+v4["sal"])
//给emp动态添加方法
Emp.prototype.getSal=function(){
return this.sal;
}
console.log(v4.getSal());
运行结果：
= =和= = =
===相当于java里的equals,即比较数据是否相等，又比较数据类型是否一致
==则只比较值是否相等
var v1=true;
var v2=1;
console.log(v1==v2);//true
console.log(v1===v2);//flase
null NaN 和undefined区别
null == undefined 但数据类型不同
NaN与任何都不能等同
javaScript 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
load事件(在页面加载完毕之后触发)
<body onload="console.log('加载完毕')">
焦点事件：<input type="text" onblur="console.log('失去焦点')" onfocus="console.log('获得焦点')">
<br>
单击事件：<input type="button" onclick="console.log('单击')" value="单击">
<br>
双击事件：<input type="button" ondblclick="console.log('双击')" value="双击">
<br>
按键事件：<input type="text" onkeydown="console.log('按键按下')" onkeyup="console.log('按键抬起')">
<br>
鼠标相关事件
<div style="border: 1px solid black; width: 300px; height: 300px;"onmouseover="console.log('鼠标经过了')"
onmousemove="console.log('鼠标在div内移动了')"
onmouseout="console.log('鼠标离开了')"
onmouseup="console.log('鼠标弹起了')"
onmousedown="console.log('鼠标按下了')"
></div>
<br>
表单事件
<form onsubmit="alert('表单提交了')" onreset="console.log('表单重置了')">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<br>
选中文本事件和修改事件
<input type="text" onselect="console.log('文本被选中了')" onchange="console.log('文本被修改')"></textarea>
<br>
<select onchange="console.log('选项被修改')">
<option value="">请选择您的学历</option>
<option value="bk">本科</option>
<option value="zk">专科</option>
</select>
</body>
</html>
ECMAScript DOM BOM
ECMAScript是javaScript的语法核心
DOM是组件如按钮，表格等，在js中 document是表示DOM组件
BOM是所有浏览器操作 如弹窗等 在js中使用window表示
事件注册
事件注册有两种方式
第一种就是直接在元素中通过onclick声明
第二种
<body>
<input type="button" id="mybutton1" value="button1"/>
<input type="button" id="mybutton2" value="button2"/>
<script type="text/javascript">
function t1(){
console.log("1111");
window.alert("t1被调用了");
}
var b1=document.getElementById("mybutton1");
b1.onclick=t1;
console.log(b1);
var b2=document.getElementById("mybutton2");
b2.onclick = function (){
console.log("2222");
window.alert("匿名函数被调用了")
}
console.log(b2);
</script>
</body>
代码的执行顺序
在使用DOM获取元素时要注意脚本要写在元素声明之后
<body>
<script type="text/javascript">
var bt = document.getElementById("bt");
bt.onclick = function(){
alert("匿名函数");
}
</script>
<input type="button" id="bt" value="BUTTON"/>
</body>
像上面这样的代码，因为先执行的脚本，导致bt对象为null，此时修改顺序即可解决问题
或者也可以将代码改为下面这种写法
<body onload="load()">
<script type="text/javascript">
function load (){
var bt = document.getElementById("bt");
bt.onclick = function(){
alert("匿名函数");
}
}
</script>
<input type="button" id="bt" value="BUTTON"/>
</body>
或者
<body>
<script type="text/javascript">
window.onload=function(){
var bt = document.getElementById("bt");
bt.onclick = function(){
alert("匿名函数");
}
}
</script>
<input type="button" id="bt" value="BUTTON"/>
</body>
键盘监听
上面提到了一系列键盘监听事件，我们可以通过以下代码获取得到的按键
<body>
<input type="text" id="username"/>
<script type="text/javascript">
function DL (a){
if(a.keyCode==13){
console.log("点击了enter");
}
}
window.onload=function(){
var username = document.getElementById("username");
username.onkeypress=DL;
}
</script>
</body>
或
<body>
<input type="text" id="username"/>
<script type="text/javascript">
window.onload=function(){
var username = document.getElementById("username");
username.onkeypress=function(a){
if(a.keyCode==13){
console.log("点击了enter")
}
}
}
</script>
</body>
练习 移动方块
<body id="body">
<div id="person" style="width: 10px; height: 10px; position: absolute; left: 50px; top: 50px; background-color: #2F2D2E;"></div>
<script type="text/javascript">
window.onload=function(){
person = document.getElementById("person");
body = document.getElementById("body");
speed = 1.0;
last_key='q';
window.onkeydown=function(data){
var y=parseInt(person.style.top);
var x=parseInt(person.style.left);
if (last_key==data.key){
speed=speed+0.5;
}
else {
speed=1;
}
last_key = data.key;
if(data.key=='w'&&y>30){
y=y-speed;
person.style.top=y+'px';
}
if(data.key=='s'&&y<window.innerHeight-30){
y=y+speed;
person.style.top=y+'px';
}
if(data.key=='a'&&x>30){
x=x-speed;
person.style.left=x+'px';
}
if(data.key=='d'&&x<window.innerWidth-30){
x=x+speed;
person.style.left=x+'px';
}
}
}
</script>
</body>
void运算符
void运算符的用法是 void(表达式)
那么表达式返回的将返回空值
假如我们想有一个超链接样式的文本，单击后执行js代码，并且在执行完js代码后不跳转页面。
我们就可以这样写
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="javascript:void(0)" onclick="alert('link')" >
dlaks;lkalskdl;akdl;ak;l
</a>
</body>
如果写成href=""那么单击相当于访问当前页 ，不符合要求
array 数组
<body>
<script type="text/javascript">
var a=[];
a.push(5);
a.push(6);
a.push(7);
console.log(a.length);// 3
console.log("pop"+a.pop());//pop7
console.log(a.length);//2
/****push和pop符合栈的特点*****/
var b = new Array(2001,1,1);
var str = b.join("_");
console.log(str); //2001_1_1
var c=[9,8,7,true,false];
c.reverse();
for(var i in c){
console.log(c[i]); //false true 7 8 9
}
</script>
</body>
date对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var time=new Date();
console.log(time);//Sun Dec 05 2021 14:57:56 GMT+0800 (中国标准时间)
year = time.getFullYear();
month = time.getMonth();
//day = time.getDay(); 这样获取到的是星期几
day = time.getDate();
console.log(year+"年"+month+"月"+day+"日");//2021年11月5日
var strDate = time.toLocaleDateString();
var strtime = time.toLocaleTimeString();
var strDateTime = time.toLocaleString();
console.log(strDate); //2021/12/5
console.log(strtime); //下午3:05:30
console.log(strDateTime); //2021/12/5 下午3:05:30
//获取1970-1-1 0：0：0到现在的总毫秒数
var now = new Date();
var timeMilis = now.getTime();//1638688162376
console.log(timeMilis);
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
