php之JavaScript
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的更多相关文章
- JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
- 探究javascript对象和数组的异同，及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 《Web 前端面试指南》1、JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
- JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
- JavaScript进阶之路（一）初学者的开始
一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- Object.assign方法复制或合并对象
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象 var obj = { a: 1 }; var copy = Object.assign({ ...
- ZooKeeper 笔记(5) ACL(Access Control List)访问控制列表
zk做为分布式架构中的重要中间件,通常会在上面以节点的方式存储一些关键信息,默认情况下,所有应用都可以读写任何节点,在复杂的应用中,这不太安全,ZK通过ACL机制来解决访问权限问题,详见官网文档:ht ...
- 物联网平台设计心得：你所不知道的CRC校验
在物联网平台设计过程中,我的中间件一方面需要处理来自于硬件端的包,另一方面需要处理来自于用户端的包,用户端包括web端和手机端等等.所以编写一个统一的CRC认证是非常必须要. 那么,在设计开始,CRC ...
- QString, string, int, char* 之间相互转换
这三种数据类型在实际运用中经常需要互相转换,那么这里小结下它们之间的转换方法: - Qstring & string Qt中封装的类十分强大,其成员函数数量之多比STD有过之而无不及,许多程序 ...
- 关于Linux与Windows的区别的文章
你从来只用过Windows,从来没接触过UNIX,只知道把一个文件拽来拽去,只知道硬盘就是C: D: E:却从来没有研究过分区表,也许 会用VC编个程序,很习惯它的集成环境.... 有一天,不管什么原 ...
- Activity数据传递
1.在启动界面里通过intent调用方法putExtra添加欲携带数据 2.在被启动界面里通过getIntent方法获取Intent对象 3.通过intent的getXxxExtra方法获取对应的数据
- 解决 Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in
转载 php 5个版本,5.2.5.3.5.4.5.5,怕跟不上时代,新的服务器直接上5.5,但是程序出现如下错误:Deprecated: mysql_connect(): The mysql ext ...
- 初识Jsoup之解析HTML
按照国际惯例,我首先应该介绍下Jsoup是个什么东西,然后在介绍下具体用法,然后在来个demo演示,其实我也是这么想的,小编今天花了一天的时间从学习—>解析页面,总算是成果圆满了吧,啊哈,但是, ...
- Win7上安装Linux双系统
今天帮同学在Win7上安装Linux,感觉一篇教程很不错,mark一下 原地址:Win7下U盘安装Ubuntu14.04双系统步骤详解 一.前期准备 1.大于2G的U盘一个(我的系统盘制作完成后大约占 ...
- linux下重启apache
基本的操作方法: 本文假设你的apahce安装目录为/usr/local/apache2,这些方法适合任何情况 apahce启动命令: 推荐/usr/local/apache2/bin/apachec ...