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. AlgorithmsI PA2: Randomized Queues and Deques RandomizedQueue

    RandomizedQueue 有几个关键点: 1. 选择合适的数据结构,因为需要任意位置删除元素,Linked list 做不到,必须使用resizing arrays. 2. resizing 的 ...

  2. 「Poetize5」Vani和Cl2捉迷藏

    描述 Description 这片树林里有N座房子,M条有向道路,组成了一张有向无环图.树林里的树非常茂密,足以遮挡视线,但是沿着道路望去,却是视野开阔.如果从房子A沿着路走下去能够到达B,那么在A和 ...

  3. BZOJ1611: [Usaco2008 Feb]Meteor Shower流星雨

    1611: [Usaco2008 Feb]Meteor Shower流星雨 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 904  Solved: 393 ...

  4. LNMP搭建（CentOS 6.3+Nginx 1.2.0+PHP 5.3.15(fpm)+ MySQL 5.5.35）

    Nginx (“engine x”) 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 ...

  5. 【离线】【深搜】【树】Codeforces 707D Persistent Bookcase

    题目链接: http://codeforces.com/problemset/problem/707/D 题目大意: 一个N*M的书架,支持4种操作 1.把(x,y)变为有书. 2.把(x,y)变为没 ...

  6. QTP自传之描述性编程

    描述性编程,即采用描述性的语言定位对象,不需要事先将对象添加到对象库中.下面,就说说如何使用描述性编程,我们将继续使用对象库编程中的网页. 使用描述性编程的两种方法 直接描述 对象("属性名 ...

  7. CodeForces 588B

    题目链接 : http://codeforces.com/problemset/problem/588/B 题目大意: 这个题目的意思就是找出一个数中的因子,这个因子满足以下条件: 1.此数的因子没有 ...

  8. poj 1236强连通图缩点

    题目链接:http://poj.org/problem?id=1236 #include <cstdio> #include <cmath> #include <algo ...

  9. segment

    1.segmentedControlStyle 设置segment的显示样式. typedef NS_ENUM(NSInteger, UISegmentedControlStyle) { UISegm ...

  10. C++中一个函数隐藏的有趣例子

    函数隐藏是一个函数的定义或声明导致其他一些函数不可见. 函数A隐藏函数B的条件:      1. 两个函数具有相同的函数名称      2. 具有不同的作用域.所谓定义域函数定义或声明的位置,如全局作 ...