首页手记闲来无事之JavaScript练习整理

闲来无事之JavaScript练习整理

标签：

JavaScript

初步整理JavaScript如下，主要侧重于记录几个方法的使用。并附上练习代码。
1、JavaScript代码必须写在<script></script>标签之间，可以直接写相关代码也可以因为文件。可以在页面的任何位置添加，一般放在head和body中，从上到下开始加载。
2、JavaScript中用var ，定义声明一个变量，变量可以理解为存放值的容器，规范做法是先声明再使用。
3、函数是实现特定功能的语句块，用function定义函数，
function 函数名{
函数内容
}
调用函数可以避免一段代码重复出现，提高复用率。
4、方法说明整理：
document.write();//页面直接输出
alert();//弹出提示框，点击确定后才可以继续操作
confirm();//弹出“确定”，“取消”，对话框，返回Boolean值
prompt(str1,str2);//弹出“确定”，“取消”，“输入框”。str1是输入框上边的内容，类似于输入框的标题。str2是写在输入框中的提示文字，提示要输入什么样的内容。返回的是输入框中用户输入的内容。
window.open([URL], [打开窗口状态], [参数字符串]);
新打开的窗口状态有以下几种：_blank：在新窗口显示网页; _self：在当前窗口显示网页; _top：在上部窗口中显示网页。
window.close();关闭当前窗口。
document.getElementById("ID")；通过ID获取对象。
document.getElementById("ID").style.color=“red”;获取对象的样式属性，配置相应的样式。
document.getElementById("ID").style.displaynone不展示，block展示。
document.getElementById("ID").innerHTML="content"；设置对象展示
在浏览器上的内容。
document.getElementById("ID").className="className";给对象赋一个css样式值。

热气腾腾的新鲜代码来一份：

<!DOCTYPE HTML>
<html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
  <title> javascript  </title>  
   <style> 
     body{ font-size:16px;}
    .con{
        border:2px solid #eee;
        width:200px;
        height:50px;
        background:#ccc; 
    }

    </style>
  <script type="text/javascript">  
   function test(){
       var urlName;
       urlName= prompt("URL:","请输入要打开网址的URL"); 
       if(urlName=="www.baidu.com"){
           window.open("http://"+urlName,"_blank");
       }else { 
           var _want ;
           _want = confirm("想看度娘不？");
           if(_want){ 
               window.open('http://www.baidu.com','_blank','width=600,height=600,menubar=no,toolbar=no, status=no,scrollbars=yes') 
           }else{
               document.write("不看那就在慕课网学习吧。");
           }
       }
   } 

  </script> 
 </head> 
 <body> 
      <input type="button" value="点我呀" onclick="test()" /> 
       <p id="con">狂拽酷炫 </p>
        <p id="con2">看不见我吧 </p>
       <script type="text/javascript"> 
           var t = document.getElementById("con");
           t.innerHTML="我本谦逊";  
           document.write("为赋样式前con的样式是："+t.className+"</br>");
           t.className="con";
           document.write("赋值后con的样式名称是："+t.className);
           t.style.color = "green";

          var t2=document.getElementById("con2");
          t2.style.display="none";

       </script>
</body>
</html>

点击查看更多内容