JavaScript

Posted wust_ouyangli

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript相关的知识，希望对你有一定的参考价值。

函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyGod</title>
    <script>
        function disp()  //函数，一般写在head中
        {
            alert("Hello World!"); //消息提示
        }
    </script>
</head>
<body>
   <script type="text/javascript">
          document.write("<h1> Hello World!</h1>"); //在页面上输出内容
   </script>
   <input type="button" value="OK" onclick="disp()"> //点击按钮
</body>
</html>
View Code

变量定义

//JavaScript变量是弱类型,对大小写敏感
//可用数据类型有: 整型、浮点型、布尔型、转义字符、字符串、空值(null)等
var x=5;  
var flag=true;
var carname="Benz"

函数示例1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyGod</title>
    <script>
       function show()  {  
           alert(document.getElementById("username").value); //得到id对应的对象，输出其值 
        }
    </script>

</head>
<body>
   <form>
         <input type="text" id="username">
         <input type="button" onclick="show()" value="提交">
   </form>
</body>
</html>
View Code

函数示例2

<html>
<head>
<script>
    function add(a,b)  //参数不指定类型
    {  return a+b;  }  //有返回值也不能指定类型
</script>
</head>
<body>
6+5=<script>document.write(add(6,5))</script>
</body>
</html>

confirm函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyGod</title>
    <script>
       function exit_confirm()
       {
             var r=confirm("确认退出?");
             if(r==true) { window.close(); }
             else return;
       }
    </script>

</head>
<body>
    <input type="button" onclick="exit_confirm()" value="退出">
</body>
</html>
View Code

onblur(失去焦点事件)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyGod</title>
    <script>
       function upperCase()
       {
             var x=document.getElementById("username");
             x.value=x.value.toUpperCase();
       }
    </script>

</head>
<body>
    
    用户名: <input type="text" id="username" onblur="upperCase()"> <br>
年龄: <input type="text" id="age" onblur="alert(this.value)">

</body>
</html>
View Code

onchange(内容修改并失去焦点)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyGod</title>
    <script>
       function upperCase()
       {
             var x=document.getElementById("username");
             x.value=x.value.toUpperCase();
       }
    </script>

</head>
<body>
    <form> 
      <select name="here"      
         onchange="window.location=this.options[this.selectedIndex].value"> 
           <option  value= ""> 请选择 </option> 
        <option  value= "http://www.163.com"> 网易 </option> 
        <option value="http://www.baidu.com"> 百度 </option>
        <option  value= "http://www.sina.com">新浪 </option> 
        <option  value= "http://www.sohu.com">搜狐 </option> 
      </select>
    </form > 

</body>
</html>
View Code

onmouseover(鼠标经过)和onmouseout(鼠标离开)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyGod</title>
</head>
<body>
    <h1 align="center" onmouseover="this.style.color=\'red\'" onmouseout="this.style.color=\'green\'" onclick="this.style.color=\'blue\'">字体变色</h1>
</body>
</html>
View Code

onfocus(获得焦点)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyGod</title>
    <script type="text/javascript">
    function setStyle(x)
    {
       x.style.background="yellow" ;
       x.value="";
    }
    function clsStyle(x)
    {
       x.style.background="white" ;
    }
    </script>
</head>
<body>
    <input type="text" value="请输入用户名"
     onfocus="setStyle(this)" onblur="clsStyle(this)">
</body>
</html>
View Code

 

以上是关于JavaScript的主要内容，如果未能解决你的问题，请参考以下文章

30秒就能看懂的JavaScript 代码片段

常用Javascript代码片段集锦

48个值得掌握的JavaScript代码片段（上）

如何将此 JavaScript 代码片段翻译成 Parenscript？

javascript 代码片段

javascript JS-常用代码片段