JS对于大小写敏感

作用：增加跟html页面的交互性。

应用：验证表单、创建cookies（可插入html页面的编程代码）js插入页面后可由所有现代的浏览器执行。应用于<body></body>或者<head></head>之间。 使用JS 引入标签<script></script>

/*

实例测试教程

JS可以写入输出流

JS可以对事件作出反应onclick（“ '' ”）;

<html>

<head>

<style type="text/css">

h1{  color:red;  margin:2cm 2cm 3cm 2cm;  font-size:20px; }

hr{  color:#ff000;}

p{  color:green; }

body{

background-color:yellow;  background-image:url(""); }

</style>

</head>

<body>

<h1 id="demo"> JS可以对事件作出反应 </h1>

<button type="button" onclick="alert('fresh time')">click here</button>

<hr >

<p>bandeng </p>

<p>qianpai weiguan </p>

<script> function myFunction()

{

x=document.getElementById("demo");

x.innerHTML="更新页面内部内容"

}

</script>

<button type="button" onclick="myFunction()">second click</button>

<hr>

</body>

</html>

eg:controll the light

<script>

function changeImage()

{

element=document.getElementById('myimage')

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

{   element.src="/i/eg_bulboff.gif";   }

else  {   element.src="/i/eg_bulbon.gif";   }

}

</script>

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

简单的表单验证

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

<script >

function myFunction()

{

var x=document.getElementById("");

if (x=="")

{

alert("no words input");

}

}

</script>

<button type="button" onclick="myFunction()">click</button>

<head></head>中的应用

<head>

<script>

function myFunction()

{

x=document.getElementById("demo")  ;

x.innerHTML="My First JavaScript Function";

} </script>

</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>

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

</body>

<body></body>中应用  JS放在<p></p>之后确保p元素创建之后再执行脚本

<body>

<h1>My First Web Page</h1>

<p id="demo">A Paragraph.</p>

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

<script> function myFunction()

{

x=document.getElementById("demo") ;

x.innerHTML="My First JavaScript Function";

}

</script>

</body>

*/

JS可以把把脚本保存在外部文件中 外部文件包含多个网页使用的代码

<!DOCTYPE html>

<html>

<body>

<script src="jack.js"></script>

</body>

</html>

如果文档完成加载后 执行document.write时，整个html页面将被覆盖

例题锻炼

<body>

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

<p id="demo"></p>

<script>

function myFunction()

{

var carname="Volvo"; document.getElementById("demo").innerHTML=carname;

}

</script>

</body>

<script>

var cars= new Array();

cars[0]="Auto";

cars[1]="BMW";

cars[2]="SX";

cars[3]="jack";

a=cars.length;

for(i=0;i<cars.length;i++)

{

document.write(cars[i]+ "<br >")

}

document.write(a);

</script>

<body>

<script>

var person={

firstname : "Bill",

lastname  : "Gates",

id        :  5566

};

document.write(person.lastname + "<br />");

document.write(person["lastname"] + "<br />");

</script>

<script>
person=new Object();
person.name="Bill";
person.age="25";
person.hobby="swimming";
document.write(person.name+ " is "+person.age +" years old "+" and he likes  "+ person.hobby);
</script>

<!DOCTYPE html>
<html>
<body>
<p id="demo" >如果晚于9点，则提示迟到</p>
<button onclick="myFunction()">click here</button>
<script>
 function myFunction()
 {
   var x="";
   var time=new Date().getHours();
   if(time>9)
   {
   x="you are late"
   }
   document.getElementById("demo").innerHTML=x;
 }
</script>
</body>
</html>

<!DOCTYPE html> <html> <body>

<p id="demo">点击这个按钮，获得基于时间的问候。</p>

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

<script>

function myFunction()

{ var x="";

var time=new Date().getHours();

if (time<10)

{

x="Good morning";

}

else if (time<20)

{

x="Good day";

}

else

{

x="Good evening";

}

document.getElementById("demo").innerHTML=x; }

</script>

</body>

</html>

//mess program

<hr>

<html>

<body>

<p id="p1">hello world</p>

<img id="demo" src="frank.jpg">

<script>

document.getElementById("p1").innerHTML="Next text";

document.getElementById("demo").src="jack.jpg";

</script>

</body>

</html>

<h1 id="header">Old Header</h1>

<script>

var element=document.getElementById("header");

element.innerHTML="New Header";

</script>

</body>

</html>

<hr>

move the mouse on the image it can get new act.

<hr>

use this as eg:

exam of what  you learn

a simple hidden problem

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="xxx.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("p").click(function(){

$(this).hide();});});

</script>

</head>

<body>

<p> this the first one</p>

<p>this the second one </p>

<p> this the third one</p>

</body>

</html>

hiden element

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

<script type="text/javascript" src="/jquery/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#demo1").click(function(){

$("p").hide();});

$("demo2").click(function(){

$("p").show();});

});

//switch:$("button").click(function(){$("p").toggle();});

</script>

<body>

<p >aaaaa</p>

<p>bbbbb</p>

<button type="button" id="demo1">hide</button>

<button type="button" id="demo2">show</button>

</body>

</html>

script+style implement the slide

AJAX是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

php之JavaScript的更多相关文章

  1. JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  2. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  3. Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收

    执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...

  4. 探究javascript对象和数组的异同，及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  5. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  6. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  7. JavaScript权威指南 - 函数

    函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...

  8. JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...

  9. JavaScript进阶之路（一）初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. 嵌入式Linux驱动学习之路(十三)按键驱动-异步通知

    之前的按键方式: 查询: 极度占用CPU资源 中断: 在读的时候产生休眠,在没有信号的时候永远不会返回. poll机制: 在中断的基础上加上超时时间. 异步通知就是通过信号来传送. 首先在应用程序中有 ...

  2. CXF 动态创建客户端调用稳定版本号为2.7.18

    今天用动态创建客户端的方式调用webservice,报了这样一个错: 2017-01-05 20:51:46,029 DEBUG main org.apache.cxf.common.logging. ...

  3. HiKariCP的数据源配置

    <!-- Hikari Datasource --> <bean id="dataSourceHikari" class="com.zaxxer.hik ...

  4. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  5. RapidJSON 代码剖析（一）：混合任意类型的堆栈

    大家好,这个专栏会分析 RapidJSON (中文使用手册)中一些有趣的 C++ 代码,希望对读者有所裨益. C++ 语法解说 我们先来看一行代码(document.h): bool StartArr ...

  6. 匿名内部类与equals之学习要扎实

    匿名内部类是胡哥给我上的第一节课,他一直在不断强调着“逻辑与思维”的重要性, 遇到问题不能用“不知道和没学过”去逃避它,所有的不知道和没教过都源自于没见过,一定要学会去看源代码,不要人云亦云..... ...

  7. 【平面设计AFTER】读到的设计海报分层法

    来源参考:http://www.uisdc.com/graphic-designer-self-improvement 分层法的三层:“背景层”,“图形层”,“信息层” 1,背景层,一般为纯色,场景, ...

  8. 10 行 Python 代码写的模糊查询

    导语: 模糊匹配可以算是现代编辑器(在选择要打开的文件时)的一个必备特性了,它所做的就是根据用户输入的部分内容,猜测用户想要的文件名,并提供一个推荐列表供用户选择. 样例如下: Vim (Ctrl-P ...

  9. 使用antd UI组件有感

    公司使用的的react.js的版本提14.7的,JS版本使用的是ES6语法,因此在使用antd过程中,有些许不愉快的记录,分享给大家,一起学习: 如果是react 14.7版本时,使用getField ...

  10. 线段树 HDU 3397

    5种操作 具体看代码 #include<iostream> #include<stdio.h> #include<string.h> #include<alg ...