JavaScript 初级知识

最新推荐文章于 2024-05-21 14:15:14 发布

abao7781

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量101

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/nonameG/p/4771267.html

版权

最初由Netscape公司发明

JavaScript 是属于网络的脚本语言（弱类型，解释型）。

JavaScript可以在HTML网页中放入动态文本。

JavaScript响应用户在网页时产生的事件。

JavaScript可以校验用户输入的数据。

JavaScript可以对HTML网页中的元素进行：增、删、改、查！

JavaScript可以用于创建cookliessd。

1JavaScript：写入 HTML 输出
实例

<!DOCTYPE html>
<html>
<body>

<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>

<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

</body>
</html>

您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

2JavaScript：对事件作出反应
实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>

<button type="button" οnclick="alert('Welcome!')">点击这里</button>

</body>
</html>

alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。
onclick 事件只是您即将在本教程中学到的众多事件之一。
alert()必须用‘’号，不然没法起作用

3JavaScript：改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
实例

html>
<body>

<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>

<script>
function myFunction()
{
x=document.getElementById("demo");  // 找到元素
x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>

<button type="button" οnclick="myFunction()">点击这里</button>

</body>
</html>

document.getElementByID("some id")这个方法是 HTML DOM 中定义的，意为：通过某个ID获得元素
innerHTML 访问特定的元素并改变其内容。
注：单词一定要拼写正确！如document.getElementById("")

4JavaScript：改变 HTML 图像
本例会动态地改变 HTML <image> 的来源 (src)：

<html>
<body>        
<script>
    function changeImage()
    {
        a=document.getElementById('myimage');
        if (a.src.match("a1"))
        {
            a.src="./b1.jpg";
        }
        else
        {
            a.src="./a1.jpg"
        }
    }
</script>

<img id="myimage" οnclick="changeImage()" src="./a1.jpg">

<p>点击图片来变换</p>
</body>
</html>

注：document.getElementById()前面一定要加变量a !;
　　src.match("")意思是图片匹配图片的意思；
　　JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

JavaScript：改变 HTML 样式
改变 HTML 元素的样式，属于改变 HTML 属性的变种。

实例

<html>
    <body>
    <script type="text/javascript">
    function g(){
        j=document.getElementById("jianding");
        j.style.color="red";
        j.style.fontSize="20px";
    }
    </script>
    <P id="jianding">我是一定不会改变的！</P>
      <input type="button" οnclick="g()" value="请试一试"/>
    </body>
    </html>

注：请注意fontSize的驼峰写法如果不大写不会出现效果！
样式的写法“定义.style.想要改变的属性”

JavaScript：验证输入
JavaScript 常用于验证用户的输入。
实例

<html>
<body>
<script type="text/javascript">
    function dot(){
        var x=document.getElementById("test").value;
        if(x=="" || isNaN(x)){
            alert("not a number");
        }
        else{
            alert("success");
        }
    }
</script>
<p>请查看如下</p>
<input type="text" id="test"/>
<input type="button" οnclick="dot()" value="请点击"/>
</body>
</html>

注：　这个例子里面id=test后面必须要跟.value才能正确传入输入的值从而进行判断！
   　　 isNaN(x)意为：(x)不是一个数字；
  　　  ""意为：空
    　　输入框和确认栏之间的间隙可以用两个办法消除1.请在包裹这两个标签的框的样式中加入"fontsize=0",但请小心在这两个框样式里面加入字体大小。2.把这两个标签写在同一行！

警告
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：
实例

<html>
<head>
    <script>
        function a(){
            document.write("完蛋了吧！");
        }
    </script>
</head>
<body>

<input type="button" οnclick="a()" value="千万不要点"/>
<h1>第一次</h1>
<P>第二次</P>
</body>
</html>

注：根据目前测试，无论button标签或者脚本放到何处，都会触发覆盖效果！

JavaScript 语句

JavaScript 代码（或者只有 JavaScript）是 JavaScript 语句的序列。
浏览器会按照编写顺序来执行每条语句。
本例将操作两个 HTML 元素：

<html>
<head>
    <script>
        function way1(){
            document.getElementById("h2").innerHTML="不是题目"
        }
        function way2(){
            document.getElementById("p1").innerHTML="不是段落"
        }
    </script>
</head>
<body>
<h1 id="h2">题目</h1>
<p id="p1">段落</p>
<input type="button" οnclick="way2()" value="先点这里"/>
<input type="button" οnclick="way1()" value="后点这里"/>
</body>
</html>

声明（创建） JavaScript 变量
在 JavaScript 中创建变量通常称为“声明”变量。
实例：

<html>
<head>
    <script>
        function test(){
            var a=document.getElementById("p1").innerHTML="是不可能的！";
            var b= 1,c=2  ;
            alert(b+c)

        }
    </script>
</head>
<body>
    <p>下面是一个例子</p>
    <input type="button" οnclick="test()" value="试试看"/>
    <p id="p1">没有改变</p>
</body>
</html>

注：可以在一条语句中声明多个变量，该语句以 var 开头，并使用逗号分隔。
变量b+c如果在alert里面用""包裹则变成一个文本显示b+c!

JavaScript 算数
实例：

<html>
<head>
    <script>
        function sum(){
            var a=1;
            var b=a+1;
            var c=document.getElementById("p1");
            c.innerHTML="b="+b;
        }
    </script>
</head>
<body>
<p>请注意看这里</p>
<p id="p1"></p>
<input type="button" οnclick="sum()" value="点击试试"/>
</body>
</html>

注经过测试"b="+b中的+号不能少，不然会报错！

JavaScript 数据类型

原始数据类型：Undefine、Null、Boolean、Number、String

判断语句：tpyof

实例

<html>
<body>
<script>
    var a=1;
    var b;
    var c="henry";
    document.write(typeof a+"<br/>");
    document.write(typeof b+"<br/>");
    document.write(typeof c+"<br/>");
　　document.write(b==undeifned);
　　document.write(null== undefined);
</script>
</body>
</html>

注：var x==数据类型，可以拿来测试数据类型，其返回值是True or False.

　　判断语句只能用于已经定义了的变量，不然会引起错误！

声明变量类型
当您声明新变量时，可以使用关键词 "new" 来声明其类型：

实例

<html>
<body>
<script>

var carname=new String;
var carname="volvo";
var x=      new Number;
var x=123;
var y=      new Boolean;
var y=true;
var cars=   new Array;
var cars=new Array(1,"good",3);
    document.write(carname+"<br/>");
    document.write(x+"<br/>");
    document.write(y+"<br/>");
    document.write(cars+"<br/>");
</script>
</body>
</html>

转载于:https://www.cnblogs.com/nonameG/p/4771267.html

abao7781

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 初级知识

最初由Netscape公司发明JavaScript 是属于网络的脚本语言（弱类型，解释型）。JavaScript可以在HTML网页中放入动态文本。JavaScript响应用户在网页时产生的事件。JavaScript可以校验用户输入的数据。JavaScript可以对HTML网页中的元素进行：增、删、改、查！JavaScript可以用于创建cookliessd。1...
复制链接

扫一扫