javaScript基础学习（一）

来源：互联网发布：淘宝背景图片素材编辑：程序博客网时间：2024/05/21 10:59

/**
 * Created by yuchuanxing on 2017/6/17.
 */
var x = 2;
var y = 3;
var z = x + y;
/*大小写敏感*/
/*您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
 */
/*Value = undefined
 在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
 在执行过以下语句后，变量 carname 的值将是 undefined：
 */
/*重新声明 JavaScript 变量
 如果重新声明 JavaScript 变量，该变量的值不会丢失：
 在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
 */


/*-----------------------------------------------------------------------------*/


/*数据类型*/
/*JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
 */
var  x ; var x = 6; var x = "Bill"

//javaScript 函数
/*向未声明的 JavaScript 变量来分配值
 如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
 */


//javaScript错误-Throw、Try和catch
/*try 语句测试代码块的错误。
 catch 语句处理错误。
 throw 语句创建自定义错误。
 */
try
{
    //在这里运行代码
}
catch(err)
{
    //在这里处理错误
}

/*javaScript HTML DOM
* 1.改变HTML输入流
* 2.改变HTML内容
* 3.改变HTML的属性
* */


/*改变CSS
* 1.改变HTML样式
* document.getElementById(id).style.property=new style
*
 * */

/*
* DOM事件
*HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
*
 * */

/*
* onload and onunload
* onload 和 onunload 事件会在用户进入或离开页面时被触发。
* onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
* onload 和 onunload 事件可用于处理 cookie。
 * */

/*
* onchange
* onchange 事件常结合对输入字段的验证来使用。
 * */

/*
* onmouseover onmouseout
* onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
 * */

/*
* dom 元素
* */

例子1：DOM 事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function changetext(id) {
            id.innerHTML='谢谢啦啦啦啦';
        }
    </script>
</head>
<body>
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>

例子2：onchange事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function myFunction() {
            var x  = document.getElementById('fname')
            x.value=x.value.toUpperCase();
        }
    </script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当输入离开时，变大写</p>
</body>
</html>

例子3：onmouseover onmouseOut 事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div onmouseover="mOver(this)"
     onmouseout="mOut(this)"
     style="background-color: green;
     width:120px;height: 20px;
     padding: 40px;
     color: #ffffff">
    把鼠标移到上面
</div>
<script>
    function mOver(obj) {
        obj.innerHTML = 'thanks'
    }
    function mOut(obj) {
        obj.innerHTML = '把鼠标移到上面'
    }
</script>
</body>
</html>

例子4：响应按钮事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>我的第一段JavaScript</h1>
<p>javaScript 能够对事件作出反应。比如对按钮的点击：</p>
<button type="button" onclick="alert('fuck，你点击了按钮')">点击这里试试</button>
</body>
</html>

例子5：改变html内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function myFunction() {
        x=document.getElementById("demo");
        x.innerHTML="点击了按钮之后";
    }
</script>
<h1 id="demo">点击按钮之前</h1>
<p>JavaScript 能改变 HTML 元素的内容。：</p>
<button type="button" onclick="myFunction()">点击这里改变内容</button>
</body>
</html>
<!--您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。
DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。
-->

例子6：改变HTML图像

<!DOCTYPE html>
<html>
<header>
    <title>改变图像</title>
    <meta charset="UTF-8">
</header>
<body>
<script>
    function changeImage()
    {
        element=document.getElementById('myimage')
        if (element.src.match("bulbon"))
        {
            element.src="http://www.w3school.com.cn/i/eg_bulboff.gif";
        }
        else
        {
            element.src="http://www.w3school.com.cn/i/eg_bulbon.gif";
        }
    }
</script>

<img id="myimage" onclick="changeImage()" src="http://www.w3school.com.cn/i/eg_bulboff.gif">

<p>点击灯泡来点亮或熄灭这盏灯</p>

</body>
</html>

例子7：改变html样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>我的第一段JavaScript</h1>
<script>
    function myFunction(){
        alert("fuck");
        x=document.getElementById('demo');
        x.style.color="#ff0000";
    }
</script>
<p id="demo">改变样式</p>
<button type="button" onclick="myFunction()">点击这里试试</button>
</body>
</html>

例子8：验证输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证输入</title>
</head>
<body>
<h1>验证输入</h1>
<p>请输入数字。不是的话，提示</p>
<input id="demo" type="text">
<script>
    function myFunction() {
        var x=document.getElementById("demo").value;
        if(x==""||isNaN(x)){
            alert("不是数字")
        }
    }
</script>
<button type="button" onclick="myFunction()">试试</button>

</body>
</html>

阅读全文

0 0