您的位置:首页 > Web前端 > JavaScript

javascript学习基础学习

2017-07-11 23:58 351 查看


JavaScript 是脚本语言


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


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


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


JavaScript 很容易学习。

javascript中有很多功能语句,
比如输出语句:
document.write("<h1>This is a heading</h1>");


这就是标准的输出语句,但是该语句会覆盖整个页面
而alert有三种用法
function testclick(){
alert("这是警告框");//警告框
}
function testPrompt(){
prompt("请输入密码","123456");//输入框
}
  function testConfirm(){
alert(confirm("确定删除吗,请谨慎选择哟!"));//提示框

其中警告框在页面中一般不会被使用,警告框被大量使用在测试当中
<input type="button" onclick="testclick()" value="点我呀">
<input type="button" onclick="testPrompt()" value="提示输入"> 

  <input type="button" onclick="testConfirm()" value="确定按钮"> 
想要调用三种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 id ="name" onclick="testB()" >切换</p>

 当然切换的并不只有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 testE() {
//声明 a再赋值1
var a;
a=1;
//声明b并赋值2
var b=2;
var c=a+b;
alert(a);
alert(b);
alert(c);
}
function  testF(){
var a,b,c;//先声明所有变量 ,在一一进行赋值
a=1;
b=2;
c=a+b;
alert(a);
alert(b);
alert(c);
}
function  testG(){
var a=1,b=2,c=a+b;
alert(a);
alert(b);
alert(c);
alert("2"+2);//输出22
alert(parseInt("2")+2);//输出4
var d;
alert(d);//underfine
var e = true;//布尔型
}

定义数组
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的学习尽情期待下篇吧
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: