JavaScript学习随笔

xiaoxiao2021-02-28  111

JavaScript 

JavaScript是互联网上最流行的脚本语言,浏览器会在读取代码时,逐行执行脚本代码 编译。

JavaScript语句都写在<script></script>里面,里面的方法叫函数,不属于任何函数的js语句在页面一加载就执行了 例如: document.write("<h1>这是一个标题</h1>"); document.write("<p>这是一个段落</p>"); 只能在HTML中输出使用document.write(),如果在文档加载后使用,就会覆盖整个文档 function test(){ document.write("<h1>这是一个标题</h1>"); } <body> <h1>这是一个标题</h1> <input type="button" οnclick="test()"  value="点我呀" /> </body> alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便 下面是几个button <script type="text/javascript"> function testclick(){ alert("上课要认真哦"); } function testPrompt(){ prompt("请输入密码","123456"); }   function testConfirm(){ alert("确定删除吗,请谨慎选择哟!"); } function testTwice(){ alert("点击两次触发"); } </script>   <input type="button" οnclick="testclick()"  value="点我呀" /> <input type="button" οnclick="testPrompt()"  value="提示输入" /> <input type="button" οnclick="testConfirm()"  value="确定按钮" />

<input type="button" οndblclick="testTwice()"  value="连续点击我两次" />

下面是一种切换图片一种不切换 function testB() { var tp = document.getElementById("tp");//获取对象 alert(tp.id);// 弹出ID值 alert(tp.src);//弹出路径 tp.src="http://localhost/MyJsp/test.jsp/image/01.jpg"  //修改图片路径 alert(tp.src); } function testBB() { var tp = document.getElementById("tp1").src;//获取字符串 alert(tp1); tp="http://localhost/MyJsp/test.jsp/image/02.jpg";//这里并不会跳转,因为获取到的是字符串 alert(tp1); } <input type="button" οnclick="testB()"  value="切换"/> <img id="tp"  src="image/01.jpg" style="width: 30%"></img> <img src="image/02.jpg" style="width: 30%"></img> <br/> <input type="button" οnclick="testBB()"  value="切换2"/> <img id="tp1"  src="image/01.jpg" style="width: 30%"></img> <img src="image/02.jpg" style="width: 30%"></img> 点击图片来回切换 第一种写法: function changeImage(){ var a=document.getElementById("myimage"); if (a.src.match("image/02.jpg")){//match是匹配是否有这张图片   a.src="image/01.jpg"; }else{   a.src="image/02.jpg"; } } <img id="myimage" οnclick="changeImage()" src="image/01.jpg" width="100" height="180"> <p>点击图片切换</p> 第二种写法: function change(obj){ if (obj.src.match("image/02.jpg")){   obj.src="image/01.jpg"; }else{   obj.src="image/02.jpg"; } } <img id="myimage" οnclick="change(this)" src="image/01.jpg" width="100" height="180"> 在页面显示动态时间时间 两种方法:  第一种: function testB() { var d = new Date(); //d.getDate(); //d.getDay();//获取当前的星期几 //d.getTime();//返回从 1970 年 1 月 1 日至今的毫秒数。 //d.getHours();//获取当前浏览器的时 //d.getMinutes();//获取当前浏览器的分 //d.getSeconds();//获取当前浏览器的秒 //document.write(d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()); //document.write(d.getDate()); //document.write(d); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); m=checkTime(m); s=checkTime(s); document.getElementById('txt').innerHTML=h+":"+m+":"+s;//显示时间 t=setTimeout(function(){testB()},500); } function checkTime(i){ if (i<10){ i="0" + i; } return i; } 第二种: function myFunction(){ var d = new Date(); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); var y = d.getFullYear(); var mm = d.getMonth()+1;//月份是从0开始的,所以这里要+1 var dd = d.getDate(); document.getElementById('txt1').innerHTML=y+"年"+mm+"月"+dd+"日"+h+":"+m+":"+s; } setInterval("myFunction()",1000);//每隔1秒调用一次这个函数 body 里面的写法 <input οnclick="testB()" type="button" value="时间" /> <span id="txt"></span> <br> <input οnclick="myFunction()" type="button" value="时间2" /> <span id =txt1></span> 一些简单的操作介绍 function testA() { alert(isNaN(2)); //false alert(isNaN(3.2));//false alert(isNaN("2"));//false alert("弹出\。。。。。。。。。。。"); alert(2==2);//true alert(2===2);//true  判断值和类型是否都相等 var a =0; //定义并赋值 alert(a=2);//赋值   2 alert(a==2);//ture } function testB() { var x= document.getElementById("name");//替换显示的文字 x.innerHTML="<span>请输入。。。。<span>"; } function testC() { var dv = document.getElementById("dv");//通过获取对象 来更改对应属性的值 dv.align="center" dv.style.color="green"; dv.style.fontSize="90px"; } function testD(){ var x = document.getElementById("demo"); x.style.color="red";  // 改变文本字体颜色 } 变量 申明 赋值 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;//布尔型 } JavaScript 布尔 布尔(逻辑)只能有两个值:true 或 false。 ------------------------------------------------------------------------------------------------------------ JavaScript 数据类型 字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。 JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型: JavaScript 中数组创建 不用给长度 一维数组 : java中只能给同种数据类型  而js中可以给多种数据类型 function testA() { var car = new Array();//定义数组 var i ; car[0]="abc"; car[1]="zxc"; for (i=0;i<car.length;i++){ alert(car[i]); } } function testB() { //一些定义字符串的操作 var cat = { firstname: "tom", lastname : "cat", id       : 22 }; alert(cat.firstname); alert(cat.lastname); alert(cat.id); } function testC(){ var car; alert(car);//未赋值  输出 underfine var car= null; alert(car);//输出null } function testD(){ var txt= "hello world"; var sln = txt.length; alert(sln);//输出字符串的长度 var str = "How are you doing today?"//分割符 //document.write(str.split(" ") + "<br />") //document.write(str.split("") + "<br />") //document.write(str.split(" ",3)) alert(str.split("")); alert(str.split(" "));//以空格分割 //alert(str.split(" "),3);//弹出框没效果 } function testE(){ person = new Object(); person.firstname="小", person.lastname="明", person.age="18", person.sex="男" person.alertAll = function(){ alert("姓氏:"+person.firstname +" 名:"+person.lastname +" 年龄:"+person.age +" 性别:"+person.sex); } person.alertAll(); } function testF(x,y){ return x+y;  // 写一个函数 } function testFF(x,y){ alert(testF(x,y));//调用上面的函数 } function testG(){//进行一些运算符操作 var a =7; alert(--a);//6 alert(a);//6 alert(a--);//6 alert(a);//5 alert(++a);//6 alert(a);//6 alert(a++);//6 } function testH(){  // 输出当前day var dd = new Date(); var ddd = dd.getDay(); switch(ddd){ case 1: alert("今天是 星期一"); break; case 2: alert("今天是 星期二"); break; case 3: alert("今天是 星期三"); break; case 4: alert("今天是 星期四"); break; case 5: alert("今天是 星期五"); break; case 6: alert("今天是 星期六"); break; case 7: alert("今天是 星期日"); break; } } JavaScript变量生命周期从它们被声明的时间开始 局部变量会在函数运行以后被删除 全局变量会在页面关闭后被删除
转载请注明原文地址: https://www.6miu.com/read-44724.html

最新回复(0)