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. Linux企业级开发技术（4）——epoll企业级开发之epoll例程

    为了使大家更加深入了解epoll模型在企业应用中的使用,下面给出一段基于epoll的服务器代码,并在代码中添加了详细注释: #include <deque> #include <ma ...

  2. javascript 基础学习整理 二 之 html对象总结，参考W3C

    Anchor 对象 更改一个链接的文本.URL 以及 target 使用 focus() 和 blur() 向超链接添加快捷键 Document 对象 使用 document.write() 向输出流 ...

  3. Java---计算机贷款支付额计算(用对话框实现)

    本例演示如何编写程序来计算贷款支付问题. 下面是编写程序的步骤: 1.提示用户输入年利率.年数和贷款总额 2.利用年利率算出月利率 3.通过前面的公式计算月支付额. 4.计算总支付额,它是月支付额乘以 ...

  4. flex与C# Socket通信

    原文地址:http://blog.csdn.net/LX10752p/archive/2011/04/27/6366526.aspx Socket 通信没什么好说,一个服务端,多个客户端,很容易搭建环 ...

  5. ActionFilterAttribute OnActionExecuting 获取参数

    public class AuthFilterAttribute : ActionFilterAttribute { /// <summary> /// Action执行前处理 /// & ...

  6. SRM 400(1-250pt, 1-500pt)

    DIV1 250pt 题意:给定一个正整数n(n <= 10^18),如果n = p^q,其中p为质数,q > 1,则返回vector<int> ans = {p, q},否则 ...

  7. 吉哥系列故事--完美队形 - HDU 4513 （Manacher）

    分析:刚开始的想法是匹配出来每个点的最大回文串,然后用每个点的最大不下降序找一个最小值,不过不明白为什么不对....很无奈,再匹配的时候加一些判断就可以过,或许还有什么没想到的地方吧.....   代 ...

  8. git如何clone所有的远程分支

    问题: 文/赖忠标 周末在家里改了下代码,新建了个angular版本的分支,然后push到coding.net上面了. 今天,到公司却不知道怎么拉取这个angular分支到公司的电脑上面.如下图(1) ...

  9. media screen 响应式布局(知识点)

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  10. border、margin、padding属性的区别

    可以先看下这个视频教程:http://my.tv.sohu.com/us/97014746/64226777.shtml 本文参考:http://www.cnblogs.com/chinhr/arch ...