Javascript基础

最新推荐文章于 2023-04-20 00:14:24 发布
最新推荐文章于 2023-04-20 00:14:24 发布
阅读量238 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 基础

1. 写入 HTML 输出

document.write("<p>This is aparagraph</p>");

只能在 HTML 输出中使用 document.write。如果在文档加载后使用该方法，会覆盖整个文档，整个文档只显示后面加载的内容。演示覆盖代码如下：

       <!DOCTYPEhtml>

<html>

</body>

</html>

<scriptlanguage="javascript">

   document.write("1.这是在body前的输出")

    

   function after(){

       document.write("点击按钮后，我的输出（这时文档加载完毕，会覆盖整个文档） ")

    }

</script>

</head>

<body>

    我的内容

   <input type="button" value="点点看"οnclick="after()">

   <br />

   <script language="javascript">

       document.write("....这是在body里输出  ")

   </script>

</body>

<scriptlanguage="javascript">

   document.write("body后js输出的内容")

</script>

</html>

2. 对事件作出反应

<button type="button"οnclick="alert('欢迎学习JS')">请点击</button>

（alert() 函数在JavaScript 中并不常用，但它对于代码测试非常方便。）

3. 改变 HTML 内容

x.document.getElementById(“demo”)//查找元素

x.innerHTMLE=”欢迎学习使用JavaScript”;//更改查找元素的内容

 （document.getElementById(“some id”)是HTML DOM中定义的）

实例Demo：通过点击事件，来更改文本内容

<!DOCTYPE html>

<html>

<body>

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

<p id="demo">

JavaScript 能改变 HTML 元素的内容。

</p>

<script>

function myFunction()

{

x=document.getElementById("demo");  // 找到元素

x.innerHTML="HelloJavaScript!";    // 改变内容

}

</script>

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

</body>

</html>

4.改变HTML图像，动态地改变 HTML <image> 的来源 (src)：

点击，灯泡的打开和关闭Demo如下：

<!DOCTYPE html>

<html>

<body>

<script>

 function changeImage()

  {

    x=document.getElementById('myimage')

    if(x.src.match("bulbon")){

       x.src="/i/eg_bulboff.gif";}

    else

     { x.src="/i/eg_bulbon.gif";}

  }

</script>

<img id="myimage"οnclick="changeImage()" src="/i/eg_bulboff.gif">

</body>

</html>

5.更改HTML样式

改变文字颜色Demo

<!DOCTYPE html>

<html>

<body>

<p id="changeColor">通过点击，改变文字的颜色</>

<script>

  function changeFunction()

   {

    e=document.getElementById('changeColor');

    e.style.color="#ff0000";

   }

</script>

<button type="button"οnclick="changeFunction()">改变颜色</button>

 </body>

</html>

6. 验证输入

验证用户输入的是否是数字Demo：

<!DOCTYPE html>

<html>

<body>

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

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>

<input id="demo"type="text">

<script>

 function myFunction()

{

  x=document.getElementById("demo").value;

  if(x==""||isNaN(x))

     alert("这不是合法数字");

}

</script>

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

</body>

</html>

7．外部文件中引用script

<scriptsrc="/js/myScript.js"></script>，

也可以使用<script type=”text/javascript src=”myScript.js”></script>

8.声明数组

三种方式：

1.      var cars = new Array();

cars[0] = "Audi";

cars[1] ="BMW";

cars[2] = "Volvo";

2. var cars=new Array("Audi","BMW","Volvo");

3. var cars=["Audi","BMW","Volvo"];

9. JavaScript 对象

声明对象：varperson={firstname:"Bill", lastname:"Gates", id:5566};

对象属性的1. name=person.lastname;

寻址方式：2.name=person["lastname"];

10. For/In 语句循环遍历对象的属性：

var x;  var txt="";

varperson={fname:"Bill",lname:"Gates",age:56};

for (x in person){txt=txt + person[x];}

11. JavaScript 标签

break labelname;

continue labelname;

1.continue 语句（带有或不带标签引用）只能用在循环中。

2.break 语句（不带标签引用），只能用在循环或 switch 中。

3.通过标签引用，break 语句可用于跳出任何JavaScript 代码块

和Java中标签的作用相似。

var temp=0; 

start: 

for(var i=0; i<5; i++) { 

   for(var m=0; m<5; m++) { 

       if(m==1) { 

           break start; 

       } 

       temp++; 

   } 

} 

alert(temp);

最后temp的值是1.  在m=1后，跳出整个for大循环。

12. JavaScript 错误 - Throw、Try 和 Catch

<!DOCTYPE html>

<html>

<head>

<script>

var txt="";

function message()

{

try

  {

 adddlert("Welcome guest!");//弹出窗口有错误，该方法为定义

  }

catch(err)

  {

 txt="本页有一个错误。\n\n";

 txt+="错误描述：" + err.message + "\n\n";

 txt+="点击确定继续。\n\n";

 alert(txt);

  }

}

</script>

</head>

<body>

<input type="button"value="查看消息"οnclick="message()" />

</body>

</html>

13. 表单验证

用户是否已填写表单中的必填项目？

用户输入的邮件地址是否合法？

用户是否已输入合法的日期？

用户是否在数据域(numeric field) 中输入了文本？

伦博
关注
专栏目录
script中的language="javascript"和type="text/javascript"的区别
lcw081307114的博客
05-06 1990
在制作网页的时候，往往需要在页面中使用客户端能够运行的JS代码，因此，都需要添加引用。 　　一般情况下，引用方式为： 　　第①种 　　&lt;script language="javascript"&gt;&lt;/script&gt; 　　第②种 　　&lt;script type="text/javascript"&gt;&lt;/script&gt; 　　那么，这两种引用的区别在哪里呢？ ...
JavaScript基础
weixin_45260174的博客
10-25 120
JavaScript基础 JavaScript： * 概念： 一门客户端脚本语言 * 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 * 脚本语言：不需要编译，直接就可以被浏览器解析执行了 * 功能： * 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 * JavaScript发展史： 1. 1992年，...
JavaScript
app19830306的专栏
01-10 406
JavaScript       一种可以同HTML混合使用的脚本语言，它是一种解释型语言，区分大小写 1、  引入JavaScript                      document.write("通过JavaScript输出！");        2、  变量 a)        JavaScript定义变量只有一个关键字var，语法 var usern
第三章：JavaScript 脚本语言（一）
最新发布
m0_61598337的博客
04-20 1153
JavaScript是web页面中的一种脚本语言，由客户端浏览器解释执行。不需要编译，主要作用是将静态页面转换成用户交互的动态页面。JavaScript主要有三大部分：ECMAScript (核心)，DOM（文档对象模型），BOM（浏览器对象模型）。ECMAScript主要包含了JavaScript的基础语法知识。JavaScript主要依赖浏览器与操作系统无关变量的命名规则：与其他语言一样。变量的声明：可用var声明变量注意：如果只是声明了变量，未进行赋值，则默认值为undefined。
JavaScript详解
m0_52896041的博客
01-08 1111
JavaScript超详解
JavaScript实例
iteye_12544的博客
09-06 210
JavaScript就这么回事1：基础知识 1 创建脚本块 1: &lt;script language=”JavaScript”&gt;2: JavaScript code goes here3: &lt;/script&gt;   2 隐藏脚本代码 1: &lt;script language=”JavaScript”&gt;2: &lt;!--3: document.write(“Hel...
JavaScript 基础
liangaoyun的博客
12-05 433
1、引入方式： 1、内部形式：通过 script 标签包裹 JavaScript 代码 <script> alert('努力 奋斗') </script> 2、外部形式：将 JavaScript 代码写在独立的以 .js 文件中，然后通过 script 标签的 src 属性引入 <script src="./my.js"></script> 如果 script 标签使用 src 属性引入了.js 文件，那么 标签的代码会被忽略.
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
script language
04-05
script language document.getElementById("num0").className = "numDiv2"; document.getElementById("num1").className = "numDiv2";
JS基础
11-21 503
基础知识   注意细节:函数中的变量覆盖全部变量时加 var 改变值只在函数内有效,不加则全部变量被改变.1 创建脚本块  1:   2: JavaScript code goes here  3:    2 隐藏脚本代码  1:   2: 3: document.write(“Hello”);  4: // -->  5:    在不支持JavaScript的浏览器中将不执行相关代码  3 
JavaScript脚本语言的使用
sbcxylyt的博客
01-03 8822
JavaScript脚本语言 一、了解JavaScript 1、什么是JavaScript:一种基于对象和事件驱动并具有安全性能的解释型脚本语言，在Web应用开发中非常广泛的应用。它不需要编译，直接嵌入在HTTP页面中，把静态页面转变为支持用户交互并响应应用事件的动态页面。在Java Web程序中，经常应用到JavaScript进行数据验证、控制浏览器以及生成时钟、日历和时间截文档。 2
区别script中的type=”text/javascript”和language=”Javascript”
weixin_30268921的博客
03-03 799
区别script中的type=”text/javascript”和language=”Javascript” 内容提要 在制作网页的时候，往往需要在页面中使用客户端能够运行的JS代码，因此，都需要添加引用。JS引用一般有type="text/javascript"和language="Javascript"两种写法，但language这个属性...
<script language="JavaScript">
AriesSurfer的专栏
04-26 1723
如题： language="javascript" 就是指定编释语言为javascript language="vbscript" 就是指定编释语言为vbscript
javascript中defer的作用
mashuaimamaphp的专栏
07-13 751
很多人都已经把 Javascript的用的炉火纯青了，但见到defer未必就知道他是做什么用的；很多人也都遇到过这样的问题，需要直接执行别且操作DOM对象的js 总是报找不到对象的错误，原因大家也都知道就是页面还有没有加载完毕，js的操作对象还在下载中。但很多人都不知道，添加defer标签就能轻而易举的解决这个问题。中的defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题---有点问题testtest
JavaScript基础入门教程
"这是一份JavaScript基础教程，适合初学者，提供初级知识，不涉及动态网页相关高级技术，如动态定位、动画等。教程结构设计为参考教程风格，分为5章，涵盖基础知识和进阶对象知识，以及框架和Cookie的使用。教程要求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值