JavaScript相关知识

最新推荐文章于 2022-10-28 19:40:59 发布

安静点DGC

最新推荐文章于 2022-10-28 19:40:59 发布

阅读量130

点赞数

分类专栏：前端文章标签： JavaScript BOM DOM

本文链接：https://blog.csdn.net/qq_26925297/article/details/79875390

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

(1)
<script type="text/javascript">
window.alert("未成年不要进入");//这会弹出一个窗口，显示出信息。
</script>

(2)js变量声明及类型判断
5种基本数据类型：undefined(未定义),null,boolean,number(int float,double,byte,short)和string
string 字符串，在js中单引号和双引号代表的都是字符串
number 数字类型，没有整数和小数之分
boolean 布尔类型
null 空，一般给引用赋值
undefined 未定义（声明变量，没有赋值）
typeof变量判断当前的变量属于什么类型

示例：
<script type="text/javascript">
var a=1;
var b=1.1;
var c=true;
var d="zbc";
var e;
alert(typeof(a));
alert(typeof(b));
alert(typeof(c));
alert(typeof(d));
alert(typeof(e));
</script>
结果：弹出的窗口中依次显示为：number,number,boolean,string,undefined.

(3)js运算符与语句
<script type="text/javascript">
var a="ac";
alert(a-1);
</script>
结果为NaN：表示非法类型
对于js中==只判断内容，===既判断内容又判断类型
三目运算符：alert(1<2?"true":"false");
示例：
<script type="text/javascript">
var h=12;
if(h>12)//如果写成if(1),则表明true，以为非0位true，0为false。也可以直接写true或者false
{
document.write("正确")

}else{

document.write("cuowu ");//这是输出在页面上的文本，不是弹出框上的信息
}

--------------------------------------------------
var i=0;
while(i<10)
{
document.write(i+"<br/>");//<br/>是换行
}

-------------------------------------------------
for(var i=0;i<10;i--)
{
document,write(i+"<br/>");
}

</script>

(4)js中的数组
示例1：
<script type="text/javascript">
var arr1=[1,2,3,"abc",true];//这是定义一个数组arr1，里面可以放各种类型的数据
alert(arr1);//结果是在弹出框中显示信息为：1,2,3,"abc",true

</script>

示例2：
<script type="text/javascript">
var arr2=new Array(3);//表示创建一个长度为3的数组，
arr2[0]=1;
arr2[1]=2;
arr2[2]=3;
arr2[3]=4;
alert(arr2);//结果是在弹出框中显示信息为：1,2,3,4。所以虽然规定长度为3，但是它的长度可变。
</script>

示例3：
var arry3=new Array(1,2,3,4);
for(var i=0;i<arry3.length;i++)
{
document.write(i);//输出结果：0123
}

(5)js中的方法
示例1：
<script type="text/javascript">

//定义有参数以及有返回值的方法
function getSum(i,j){
return i+j;

}
var h=getSum(1,2);
alert(h);//这是在弹出框上显示的信息，结果为：3
document.write(h);//直接在页面中显示
</script>

示例2：匿名方法
<script type="text/javascript">

//定义匿名方法
var run=function(){

alert("你好！");
};
//调用方法
run();//输出结果为：你好！

</script>

(6)js中的全局变量与局部变量
在<script>标签中定义的都是全局变量，在方法中定义的都是局部变量

(7)js对象
如下图：

例如:
<script type="text/javascript">
var str=new String("abc");
document.write(str.link("http:www.baidu.com"));//输出的abc能够链接到baidu。这是超链接。
</script>

示例：
<script type="text/javascript">
var date=new Date();
document.write(date.toLocaleDateString()+"---");//结果‎2018‎年‎4‎月‎9‎日
document.write(date.toLocaleTimeString()+"---");//‎23‎:‎28‎:‎59
document.write(date.toString()+"---");//Mon Apr 09 2018 23:28:59 GMT+0800 (中国标准时间)
document.write(date.toLocaleString()+"---");//‎2018‎年‎4‎月‎9‎日‎ ‎23‎:‎28‎:‎59

//Math对象
document.write(Math.ceil(78.3));//79

</script>

(8)BOM对象以及window对象
如下图的介绍：

示例：
<script type="text/javascript">

//确定取消框
var flag=window.confirm("请确定你已经达到条件了吗？");
if(flag)
{
document.write("点击链接，欢迎到达目标界面"+"<a href='http://www.baidu.com'>跳转</a>");

}else{
alert("感谢您的访问");//点击取消时弹出此框。
}

</script>
结果如下图：

示例：
<script type="text/javascript">

//输入框
var content=window.prompt("你最喜欢的电影？","没有");
alert(content);
</script>

结果如下图：

(9)window对象

如下示例：

<body>
<input type="button" value="百度一下" οnclick="baidu()" />

</body>
<script type="text/javascript">

function baidu(){

//跳转到某个界面打开某个窗口，第一个参数是URL地址，第二个是地址的描述信息，第三个是地址的详细信息
window.open("http://www.baidu.com","百度","width=300,height=300");

}

</script>

结果如图：

示例：定时器任务
<body>
<input type="button" value="炸弹" οnclick="bomb()" />每隔3秒一次

</body>
<script type="text/javascript">
var intervalID;
//定时器
function bomb(){
//第一个参数是回调方法，第二个参数是延迟时间，
intervalID=window.setInterval("show()",3000);//每3秒执行一次show（）方法

}
var count=2;
function show(){
//在这里设定为每3 秒一次，共2次
alert(count--);
if(count==0){
//取消定时器任务
window.clearInterval(intervalID);
window.alert("完成");
}

}

</script>
注意：window.setInterval("show()",3000);也可以写成window.setTimeout("show()",3000);但是这个方法只能执行一次。
结果如下图：

示例:
<body>
<input type="button" value="上一页" οnclick="pre()" />
<input type="button" value="下一页" οnclick="next()" />
<input type="button" value="跳转到某个页面" οnclick="go()" />
</body>
<script type="text/javascript">

function pre(){
window.history.back();
}
function next(){
window.history.forward();

}
function go(){
window.location.href="http://www.baidu.com";

}

</script>

(10)dom获取标签，表单验证
要说执行的先后顺序，onSubmit在先，先验证，验证返回false时，则无法到达action="url"地址。如果是返回true或者没有返回值，则通过action转向url地址。
也就是说onsubmit可以阻止action的提交
onSubmit="return check();" 这里的return是一定要写的。不可写成οnsubmit=check（）;

示例：
<body>

<form name="f1" id="f1" action="http://www.baidu.com" method="get" οnsubmit="return check()">

<table>
<tr>
<td>Login</td>
<td><input type="text" name="username" id="username" ></td>
</tr>

<tr>
<td>Password</td>
<td><input type="text" name="password" id="password" ></td>
</tr>

<tr>
<td colspan="2" ><input type="submit" ></td>
</tr>

</table>

</form>

</body>
<script type="text/javascript">

//提交之前进行检查，如果return false，则不允许提交
function check(){
//根据name获取标签数组
var elements=document.getElementsByName("username");
//获取数组中的第一个标签
var user_element=elements[0];
alert(user_element.value);
return false;
}

</script>
</html>

示例：第二种方法
<body>

<form name="f1" id="f1" action="http://www.baidu.com" method="get" οnsubmit="return check()">

<table>
<tr>
<td>Login</td>
<td><input type="text" name="username" id="username" ></td>
</tr>

<tr>
<td>Password</td>
<td><input type="text" name="password" id="password" ></td>
</tr>

<tr>
<td colspan="2" ><input type="submit" ></td>
</tr>

</table>

</form>

</body>
<script type="text/javascript">

//提交之前进行检查，如果return false，则不允许提交
function check(){
//根据ID获取标签，因为ID唯一，所以getElementById中element没有s
var user_element=document.getElementById("username");

alert(user_element.value);
return false;
}

</script>

如下图所示：

注意：在这里设置了return false，所以传不出去

示例3：根据标签名称获取标签数组

<body>

<form name="f1" id="f1" action="http://www.baidu.com" method="get" οnsubmit="return check()">

<table>
<tr>
<td>Login</td>
<td><input type="text" name="username" id="username" ></td>
</tr>

<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" ></td>
</tr>

<tr>
<td colspan="2" ><input type="submit" ></td>
</tr>

</table>

</form>

</body>
<script type="text/javascript">

//提交之前进行检查，如果return false，则不允许提交
function check(){
//获取标签类型是input的第二个标签，是password。
var password=document.getElementsByTagName("input")[1].value;

alert(password);
return false;
}

</script>