JavaScript 初级知识

最初由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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="way2()" value="先点这里"/>
<input type="button" onclick="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" onclick="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" onclick="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>
时间: 2024-10-14 09:37:59

JavaScript 初级知识的相关文章

JavaScript初级知识

在此之前,JS几乎没有怎么去搞,现在从零开始!! JavaScript 是网景( Netscape)公司开发的一种基于客户端浏览器. 面向对象(不是基于对象,是面向对象).事件驱动式的网页脚本语言. JavaScript的作用: • 交互式操作: • 表单验证: • 网页特效: • Web游戏 • 服务器脚本开发等. Java是一门编译性的语言,程序要先编译成字节码才能去执行,JavaScript 是一门解释性的语言,不需要编译,浏览器直接加载js文件,一行一行的开始执行.Java采用强类型变量

[转载]JavaScript基础知识细节

作者:张子秋 出处:http://www.cnblogs.com/zhangziqiu/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 一.摘要 本文是jQuery系列教程的剧场版, 即和jQuery这条主线无关, 主要介绍大家平时会忽略的一些javascript细节.  适合希望巩固javascript理论知识和基础知识的开发人员阅读. 二.前言 最 近面试过一些人, 发现即使经验丰富的开发人员, 对于一些

Javascript基础知识5

不要把相等运算符(==)与赋值运算符(=)搞混. 以&&运算符隔开的两个条件中的前者为错,则不会检测第二个条件的真假.利用这一点,可以提高脚本的速度. 使用带switch的多个条件 if(button=="next") window.location = "next.html"; else if(button=="previous") window.location = "pre.html"; else if(

javascript 基础知识

javascript 基础知识编程规范注释 //驼峰对象化编程 数据类型字符串.数字.布尔.数组.对象.Null.Undefined定义 var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object; 字符串 var word = "Hello World!"; 数字 var x1 = 34.00; //使用小数点来写 var x2 =

JavaScript基础知识梳理--数组

JavaScript基础知识梳理--数组 1.创建方法 空数组:var obj=new Array(); 指定长度数组: var obj=new Array( size ); 指定元素数组 :  var obj=new Array( 元素1,元素2,....): 单位数组:var obj=new Array[ 元素1,元素2,元素3,...,元素N]; 多维数组:var a=new Array( [数组1],[数组2],[数组3],...,[数组N] ); 2.基本操作 存取数组元素: 单维数组

(1)JavaScript基础知识

Javascript基础知识 1.如何使用JavaScript (1).通过<script></script>中直接编写 (2).通过<script src='目标文档的URL'></script>链接外部的Js文件 ① <script  src="URL" type="text/javascript" charset="utf-8"></script> (3).作为某个元素

Javascript基础知识4

字符串大小写转换 toUpperCase()将所有的字符串转换成大写 toLowerCase()将所有的字符串转换成小写 substring(x,y)返回字符串的一部分,从x开始到y结束 charAt(x)获取第x个字符 indexOf("",x)查找字符串, 第一个内容是字符串,第二个是从第x开始 得到的值为这个字符串是从第几个字符开始的 同样lastindexOf()从最后开始查找 split("")分离字符串,内容为以什么分离, 得到的是一个数组 同理,将一个

JavaScript基础知识梳理----正则表达式

JavaScript基础知识梳理----正则表达式 1.创建 方式:---字面量:var 变量名=/表达式/模式修饰符 ---构造函数:var 变量名=new RegExp(“表达式”,“模式修饰符”) 说明: 表达式 单个字符和数字 . 匹配除换行符之外的任意字符 [a-z0-9] 匹配方括号中的任意字符 [^a-z0-9] 匹配不在方括号中的任意字符 \d 匹配数字 \D 匹配非数字 \w 匹配字母 \W 匹配非字母 空白字符 \0 匹配null字符 \b 匹配空格符 \f 匹配进纸符 \n

javascript 基础知识1 数据类型

首先javascript是一种具有面向对象能力的,解释型程序设计语言. js对大小写敏感,一定要采取一致的字符大小写形式,在js中的结束分号(:)是可选的,为了避免JS语句错误,我们还是要注意添加,养成良好的编写习惯. 下面看看数据类型和值. JS有7种数据类型:字符串.数字.布尔.数组.对象.Null.Undefined 字符串类型:由Unicode字符,数字,标点符号组成的序列,可以为多个字符,也可以为0个字符. 1 <script> 2 // var用于声明一个变量 3 var stri