js之前有看过,只不过是在C++代码中通过UI引擎调用js进行画图,当时就为语法问题痛苦了半天,结果现在java web了,更是处处是js,再次陷入痛苦中.

js实际例子:

<!DOCTYPE html>

<html>

<head>

<script>

     




    function displayDate()




   {




      document.getElementById("demo").innerHTML=Date();




   }


</script>

</head>

<body>

 

<h1>我的第一个 JavaScript 程序</h1>

<p id="demo">这是一个段落</p>

 

<button type="button" onclick="displayDate()">显示日期</button>

 

</body>

</html>

 

为什么学习 JavaScript?

JavaScript web 开发人员必须学习的 3 门语言中的一门：

  1. HTML 定义了网页的内容
  2. CSS 描述了网页的布局
  3. JavaScript 网页的行为

 

JS中一个简单输出的代码:

<!DOCTYPE html>

<html>

<body>

 

<p>

JavaScript 能够直接写入 HTML 输出流中：

</p>

 

<script>

document.write("<h1>这是一个标题</h1>");

document.write("<p>这是一个段落。</p>");

</script>

 

<p>

您只能在 HTML 输出流中使用 <strong>document.write</strong>。

如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

</p>

 

</body>

</html>

效果截图:

 

JS事件:

<!DOCTYPE html>

<html>

<body>

 

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

 

<p>

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

</p>

 

<button type="button" onclick="alert('欢迎!')">点我!</button>

 

</body>

</html>

 

JavaScript:改变Html内容:

<!DOCTYPE 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>

 

改变图像:

<!DOCTYPE html>

<html>

<body>

<script>

function changeImage()

{

element=document.getElementById('myimage')

if (element.src.match("bulbon"))

  {

  element.src="/images/pic_bulboff.gif";

  }

else

  {

  element.src="/images/pic_bulbon.gif";

  }

}

</script>

 

<img id="myimage" onclick="changeImage()"

src="/images/pic_bulboff.gif" width="100" height="180">

 

<p>点击灯泡就可以打开或关闭这盏灯</p>

 

</body>

</html>

JavaScript：改变 HTML 样式

<!DOCTYPE html>

<html>

<body>

 

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

 

<p id="demo">

JavaScript 能改变 HTML 元素的样式。

</p>

 

<script>

function myFunction()

{

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

x.style.color="#ff0000";          // 改变样式

}

</script>

 

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

 

</body>

</html>

疯狂学习java web3(javaScript)的更多相关文章

  1. 疯狂学习java web

    因工作需要,疯狂学习java web,只是这么多年一直从事C++开发,突然之间要接手同事的那么一大堆代码,真有无从下手的感觉,首先是要学习html,然后是js, 然后是jsp,当然还有各种框架,想想就 ...

  2. 疯狂学习java web5(SSI框架)

    其实前面的所有只是铺垫,目的只是为了了解现有工程是怎样的.之前直接上来就看,看了很久依然是云里雾里,所以不得已学习点基础知识,前面的基础只是蜻蜓点水一带而过,希望能起部分作用了. 发现struct2有 ...

  3. 疯狂学习java web4(jsp)

    JSP与PHP.ASP.ASP.NET等语言类似,运行在服务端的语言. JSP(全称Java Server Pages)是由Sun Microsystems公司倡导和许多公司参与共同创建的一种使软件开 ...

  4. 疯狂学习java web2(css)

    CSS应该是样式描述的意思,定义如下: 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 ...

  5. 《疯狂Java讲义》（一） ---- 关于学习Java的反思

    "听到Spring很火,就立马买来一本Spring的书来读,最后结果往往是失败,因为这种学习没有积累,没有根基,学习过程中困难重重,每天都被一些相同.类似的问题所困扰,起初热情十足,经常上论 ...

  6. 30个深度学习库：按Python、C++、Java、JavaScript、R等10种语言分类

    30个深度学习库:按Python.C++.Java.JavaScript.R等10种语言分类 包括 Python.C++.Java.JavaScript.R.Haskell等在内的一系列编程语言的深度 ...

  7. 从Java和JavaScript来学习Haskell和Groovy

    直击现场 记得刚接触计算机的时候,我就受到了两个非常巨大的错误观念的影响,这个观念最初是来自于老师的传授还是学长的教诲已经记不清了,但是直到我工作几年以后,才慢慢有了实际的体会: 学习和使用什么编程语 ...

  8. Json学习总结（1）——Java和JavaScript中使用Json方法大全

    摘要:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语 ...

  9. 零基础如何系统学习Java Web

    零基础如何系统学习Java Web?   我来给你说一说 你要下决心,我要转行做开发,这样你才能学成. 你要会打字,我公司原来有一个程序员,打字都是两个手一指禅,身为程序员你一指禅怎么写出的代码,半个 ...

随机推荐

  1. 树状数组(二维)：COGS 1532 [IOI2001]移动电话

    1532. [IOI2001]移动电话 ★☆   输入文件:mobilephones.in   输出文件:mobilephones.out   简单对比 时间限制:5 s   内存限制:256 MB ...

  2. 【最短路】Vijos P1022Victoria的舞会2

    题目链接: https://vijos.org/p/1022 题目大意: 给一张N个点的有向图,求有几块强连通分量.(N<=200) 题目思路: [动态规划] n比较小,可以用floyd暴力把每 ...

  3. 如何在COM的IDL文件中include头文件？

    可以使用import语句,如import "x.h"; 则在自动生成的xxx_i.h中将会有include "x.h", 于是x.h就被include到工程中了 ...

  4. 第k大值01背包问题

    http://acm.hdu.edu.cn/showproblem.php?pid=2639 /* 第一行输入t 代表t组测试数据 第二行 输入物品个数 背包容量 要求的第k大值 物品的价值 物品的重 ...

  5. poj 4618 暴力

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4618 #include <cstdio> #include <cmath> # ...

  6. C#读写共享文件夹

    该试验分以下步骤: 1.在服务器设置一个共享文件夹,在这里我的服务器ip地址是10.80.88.180,共享文件夹名字是test,test里面有两个文件:good.txt和bad.txt,访问权限,用 ...

  7. nvl，空时的推断和取值

    nvl NVL的概念 Oracle/PLSQL中的一个函数. 格式为: NVL( string1, replace_with) 功能:假设string1为NULL,则NVL函数返回replace_wi ...

  8. TextView的ems和MaxLength

    <EditText android:id="@+id/et_code" android:layout_width="wrap_content" andro ...

  9. [AngularJS] 5 simple ways to speed up your AngularJS application

    Nowdays, Single page apps are becoming increasingly popular among the fornt-end developers. It is th ...

  10. Qt 学习之路 :自定义只读模型

    model/view 模型将数据与视图分割开来,也就是说,我们可以为不同的视图,QListView.QTableView和QTreeView提供一个数据模型,这样我们可以从不同角度来展示数据的方方面面 ...