javascript学习基础学习

最新推荐文章于 2020-03-21 20:13:20 发布

原创最新推荐文章于 2020-03-21 20:13:20 发布 · 458 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍JavaScript的基础知识，包括语言特性、常用功能如输出与弹窗、变量定义、数组与对象的创建及使用，还有如何通过事件触发执行函数。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

javascript中有很多功能语句，

比如输出语句：

document.write("<h1>This is a heading</h1>");

这就是标准的输出语句，但是该语句会覆盖整个页面

而alert有三种用法

其中警告框在页面中一般不会被使用，警告框被大量使用在测试当中

想要调用三种alert属性就要触发相应的事件，这里是用鼠标的单击属性触发

在Html5中有许多的鼠标事件比如：

onclick 当单击鼠标时运行脚本
ondblclick 当双击鼠标时运行脚本
ondrag 当拖动元素时运行脚本
ondragend 当拖动操作结束时运行脚本
ondragenter 当元素被拖动至有效的拖放目标时运行脚本
ondragleave 当元素离开有效拖放目标时运行脚本
ondragover 当元素被拖动至有效拖放目标上方时运行脚本
ondragstart 当拖动操作开始时运行脚本
ondrop 当被拖动元素正在被拖放时运行脚本
onmousedown 当按下鼠标按钮时运行脚本
onmousemove 当鼠标指针移动时运行脚本
onmouseout 当鼠标指针移出元素时运行脚本
onmouseover 当鼠标指针移至元素之上时运行脚本
onmouseup 当松开鼠标按钮时运行脚本
onmousewheel 当转动鼠标滚轮时运行脚本
onscroll 当滚动元素滚动元素的滚动条时运行脚本

函数isNaN是判断非数字，在测试其中的值的时候就用到了alert函数

其中一个=表示赋值，两个=表示值相等，三个=表示值数据类型完全相等

function testA() {
alert(isNaN(2));//判断非数字，是返回·false不是返回true
alert(isNaN(3.2));
alert(isNaN("2"));
alert(isNaN("不是数字"));
alert("弹出\。。。。。。。。。。。");
alert(2==2);
alert(2===2);
var a =0;
alert(a=2);
alert(a==2);
}

切换p标签中的值，代码如下所示

其中var x= document.getElementById("name");表示获取P标签ID

x.innerHTML="<span>请输入。。。。<span>";标售赋值

function testB() {
var x= document.getElementById("name");
x.innerHTML="<span>请输入。。。。<span>";
}

当然切换的并不只有P标签中的值很多标签的值都能够切换

获取属性

function testC() {
var dv = document.getElementById("dv");
dv.align="center"
dv.style.color="green";
dv.style.fontSize="90px";
}

<div id="dv" onclick="testC()" align="left" style="color: red;font-family: '宋体';font-size:20px;">
跟着我一起嗨！
</div>

上面函数获取了div标签的属性并且赋值在触发相应函数后便会更改div的属性

下面便是JavaScript中比较重要的变量了，JavaScript的变量并不需要刻意定义属性

定义数组

function array(){
var car = new Array();

car=["数组1","shuzu2","数组3","44444"];
for(var i=0;i<4;i++){
alert(car[i]);
}
}

这是一种较为常用的定义数组的方法

在JavaScript还可以定义JavaScript的对象及其属性

function teste(){

var stu = new Object();
stu.stuid=25;
stu.stuname="狗子";
stu.stusex=1;
stu.stuage=18;

stu.studd = function(){

alert("ID:"+stu.stuid+"姓名:"+stu.stuname+"性别:"+stu.stusex+"年龄："+stu.stuage);
}
stu.studd();
}

在这当中我们用到了alert测试stu中属性的值

在JavaScript中会经常调用系统时间，以下代码便是用来调用系统时间

function starTime(){
var time = new Date(); //定义时间
var h = time.getHours();//时
var m = time.getMinutes();//分
var s = time.getSeconds();//秒
m=chagetime(m);
h=chagetime(h);
s=chagetime(s);//判断是否小于10，是在前面添加一个0
document.getElementById("time").innerHTML=h+":"+m+":"+s;//输出时间
setTimeout("starTime()",500);//每隔500毫秒调用函数
}

在JavaScript中我们经常用到if() else结构，但是很多时候if() else 结构很难表达出想要表达的东西这时候我们需要switch来表达

以下便是用switch来判断并输出今天是星期几

function today(){
var day = new Date().getDay();//定义并获取系统时间中的星期
var x=document.getElementById("timeAA");
switch(day){
case 1:
x.innerHTML="今天是星期一";
break;
case 2:
x.innerHTML="今天是星期二";
break;
case 3:
x.innerHTML="今天是星期三";
break;
case 4:
x.innerHTML="今天是星期四";
break;
case 5:
x.innerHTML="今天是星期五";
break;
case 6:
x.innerHTML="今天是星期六";
break;
case 7:
x.innerHTML="今天是星期七";
break;
default:
break;
}
}

JavaScript的学习尽情期待下篇吧