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内核》 UNIX的一些故事

    Unix文件的类型1.普通文件2.目录3.符号链接4.面向块的设备文件5.面向字符的设备文件6.管道和命名管道7.套接字 点评:不明觉厉 打开文件进程只能访问“打开的”文件.为了打开一个文件,进程调用 ...

  2. HDOJ 2055 An easy problem

    Problem Description we define f(A) = 1, f(a) = -1, f(B) = 2, f(b) = -2, - f(Z) = 26, f(z) = -26; Giv ...

  3. python编译环境发掘——从IDLE到sublime到pycharm到Anaconda

    一个好的编译器对于我们处理日常的科研很关键,好的编译器无论是从界面,字体风格,提示,调试等各方面都能从用户角度出发,提供最好的使用体验.Python本身自带的IDLE或者在CMD里进行操作和调试,对于 ...

  4. SRM 405(1-250pt, 1-500pt)

    DIV1 250pt 题意:以linux系统中文件系统的路径表示方法为背景,告诉你某文件的绝对路径和当前位置,求相对路径.具体看样例. 解法:模拟题,不多说.每次碰到STL的题自己的代码都会显得很sb ...

  5. Azkaban2官方配置文档

    最近工作实在是太忙了,我把之前翻译的官方的文档先放上来吧,希望对大家有所帮助~ 介绍 Azkaban2新功能: 1.Web UI 2.简单工作流上传 3.更容易设置job的依赖关系 4.调度工作流 5 ...

  6. centos安装GO

    1,下载 go1.5.1.linux-amd64.tar.gz 2,将go解压到/opt,个人喜好罢了[root@localhost ~]# tar -C /opt -xzf ./go1.5.1.li ...

  7. nginx 请求负载 转发规则设置

    (1)轮询(默认) weight=5;         #本机上的Squid开启3128端口,不是必须要squid         server 192.168.8.2x:80    weight=1 ...

  8. 宇宙【全7季】【合集】【蓝光1080P】【历史频道】

    http://www.bilibili.com/video/av4343074/ 挺好看的 还有一部<宇宙时空之旅>也是挺好看的.

  9. Windows的应用管理工具 PortableApps，Chocolatey和Ninite

    以前为了让我的firefox变成portable的,我使用了PortableApps,它不只是做软件的绿色版,而且也是一个软件的管理平台,可以通过它来管理软件的更新,挺方便的. 前段时间试用Scrip ...

  10. 提升ReSharper和Visual Studio的性能

    转载 作者:赵青青        出处:http://www.cnblogs.com/zhaoqingqing/ 文章目录[点击展开](?)[+]   提升性能 我们不断地确保ReSharper的正常 ...