JavaScript: basis
ref: http://www.imooc.com/code/387
1. html里直接嵌入js：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030">
<title>插入js代码</title>
<script type="text/javascript">
document.write("开启JS之旅!");
</script>
</head>
<body>
</body>
</html>
2. src引入js
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>引用JS文件</title> <script src="script.js"></script> </head> <body> </body> </html>
3. alert用法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>alert</title>
<script type="text/javascript">
function rec(){
var mychar="I love JavaScript";
alert(mychar);
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，弹出对话框" />
</body>
</html>
4. confirm用法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>confirm</title>
<script type="text/javascript">
function rec(){
var mymessage=confirm("你是女士吗？"); ;
if(mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />
</body>
</html>
5. prompt用法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prompt</title>
<script type="text/javascript">
function rec(){
var score; //score变量，用来存储用户输入的成绩值。
score = prompt("请输入你的成绩:");
if(score>=90)
{
document.write("你很棒!");
}
else if(score>=75)
{
document.write("不错吆!");
}
else if(score>=60)
{
document.write("要加油!");
}
else
{
document.write("要努力了!");
}
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，对成绩做评价!" />
</body>
</html>
6. window.open用法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
function Wopen(){
window.open('http://www.imooc.com', '_blank','width=600,height=400,menubar=yes,toolbar=yes,status=yes,scollbars=yes,top=100,left=0');
}
</script>
</head>
<body>
<input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / >
</body>
</html>
window.open(<URL>, <窗口名称>, <参数字符串>)
参数说明:
URL：打开窗口的网址或路径。 窗口名称：被打开窗口的名称。可以是"_top"、"_blank"、"_selft"等。 参数字符串：设置窗口参数，各参数用逗号隔开。
7. window.close()用法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>close()</title>
<script type="text/javascript">
var mywin=window.open("http://www.imooc.com");
mywin.close();
</script>
</head>
<body>
</body>
</html>
8. document.getElementById用法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("结果:"+mychar); //输出获取的P标签。
</script>
</body>
</html>
9. innerHTML用法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML = "Hello world!"
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>
10. 改变HTML样式
语法:
Object.style.property=new style;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="#CCC";
mychar.style.width="300px";
</script>
</body>
</html>
11. 显示和隐藏
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display="none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display="block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
</body>
</html>
12. removeAttribute("style")用法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
height:400px;
width:600px;
border:#333 solid 1px;
padding:5px;}
p{
line-height:18px;
text-indent:2em;}
</style>
</head>
<body>
<h2 id="con">JavaScript课程</H2>
<div id="txt">
<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
<p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
<p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
<p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
<form>
<!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
<input type="button" value="改变颜色" onclick="changeColor()">
<input type="button" value="改变宽高" onclick="changeWidthAndHeight()">
<input type="button" value="隐藏内容" onclick="hiddenContent()">
<input type="button" value="显示内容" onclick="showContent()">
<input type="button" value="取消设置" onclick="cancelSet()">
</form>
<script type="text/javascript">
//定义"改变颜色"的函数
function changeColor() {
var my = document.getElementById("txt");
my.style.color = "red";
my.style.backgroundColor = "blue";
}
//定义"改变宽高"的函数
function changeWidthAndHeight() {
var my = document.getElementById("txt");
my.style.width = "500px";
my.style.height = "500px";
}
//定义"隐藏内容"的函数
function hiddenContent() {
var my = document.getElementById("txt");
my.style.display = "none";
}
//定义"显示内容"的函数
function showContent() {
var my = document.getElementById("txt");
my.style.display = "block";
}
//定义"取消设置"的函数
function cancelSet() {
var mes = confirm("确定要取消设置吗？");
if (mes == true) {
var my = document.getElementById("txt");
my.removeAttribute("style");
}
}
</script>
</body>
</html>
事件：
1. onclick
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单击事件 </title>
<script type="text/javascript">
function openwin(){
window.open('http://www.imooc.com','_blank','height=600,width=400,top=100,toolbar=no,left=0,menubar=no,scrollbars=no,status=no');}
</script>
</head>
<body>
<form>
<input name="点击我" type="button" value="点击我 "onclick="openwin()"/>
</form>
</body>
</html>
2. onmouseover
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
function message(){
confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>
</html>
3. onmouseout
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移开事件 </title>
<script type="text/javascript">
function message(){
alert("不要移开，点击后进行慕课网!"); }
</script>
</head>
<body>
<form>
<a href="http://www.imooc.com" onmouseout="message()">点击我 </a>
</form>
</body>
</html>
4. onfocus
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
<script type="text/javascript">
function message(){
alert("请选择，您现在的职业！");
}
</script>
</head>
<body>
请选择您的职业：<br>
<form>
<select name="career" onfocus="message()">
<option>学生</option>
<option>教师</option>
<option>工程师</option>
<option>演员</option>
<option>会计</option>
</select>
</form>
</body>
</html>
5. onblur
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
function message(){
alert("请确定已输入密码后，在移开!"); }
</script>
</head>
<body>
<form>
用户:<input name="username" type="text" value="请输入用户名！" >
密码:<input name="password" type="text" value="请输入密码！" onblur="message()">
</form>
</body>
</html>
6. onselect
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
function message(){
alert("您触发了选中事件！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>
7. onchange
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
function message(){
alert("您改变了文本内容！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>
8. onload
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
function message(){
alert("加载中，请稍等…"); }
</script>
</head>
<body onload="message()">
欢迎学习JavaScript。
</body>
</html>
9. parseInt和getElementById("").value
<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
//获取第一个输入框的值
//获取第二个输入框的值
//获取选择框的值
//获取通过下拉框来选择的值来改变加减乘除的运算法则
//设置结果输入框的值
var num1 = parseInt(document.getElementById("txt1").value);
var num2 = parseInt(document.getElementById("txt2").value);
var select = document.getElementById("select").value;
//document.write(num1);
//document.write(num2);
//document.write(select);
var num3;
switch (select) {
case '+':
num3=num1+num2;
break;
case "-":
num3=num1-num2;
break;
case "*":
num3=num1*num2;
break;
case "/":
num3=num1/num2;
break;
default:
break;
}
//document.write(num3);
document.getElementById("fruit").value=num3;
}
</script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onclick="count()"/> <!--通过 = 按钮来调用创建的函数，得到结果-->
<input type='text' id='fruit' />
</body>
</html>
类
1. Date
2. string
toUpperCase(); toLowerCase();
stringObject.charAt(index);
stringObject.indexOf(substring, startpos);
stringObject.split(separator, limit);
stringObject.substring(startPos, stopPos);
stringObject.substr(startPos, length);
3. Array
4. windows
5. 计时器
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
var attime;
var int=setInterval(clock, 1000);
function clock(){
var time=new Date();
attime= time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
document.getElementById("clock").value = attime;
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var int=setInterval("clock()", 100);
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(int)" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
var num=0;
function startCount() {
document.getElementById('count').value=num;
num=num+1;
setTimeout("startCount()",1000);
}
window.onload=startCount;
</script>
</head>
<body>
<form>
<input type="text" id="count" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
var num=0;
var i;
function startCount(){
document.getElementById('count').value=num;
num=num+1;
i=setTimeout("startCount()",1000);
}
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="count" />
<input type="button" value="Start" onClick="startCount()"/>
<input type="button" value="Stop" onClick="stopCount()"/>
</form>
</body>
</html>
6. history
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function GoBack() {
//window.history.go(-1);
window.history.back();
}
</script>
</head>
<body>
点击下面的锚点链接，添加历史列表项:
<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮，实现返回前一个页面:
<form>
<input type="button" value="返回前一个页面" onclick="GoBack();" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function GoForward() {
window.history.go(1);
//window.history.forward();
}
</script>
</head>
<body>
点击下面的锚点链接，添加历史列表项:
<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮，实现返回下一个页面:
<form>
<input type="button" value="返回下一个页面" onclick="GoForward()" />
</form>
</body>
</html>
7. location
8. navigator
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>navigator</title>
<script type="text/javascript">
function validB(){
var u_agent = navigator.userAgent;
var B_name="不是想用的主流浏览器!";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
document.write("浏览器:"+B_name+"<br>");
document.write("u_agent:"+u_agent+"<br>");
}
</script>
</head>
<body>
<form>
<input type="button" value="查看浏览器" onClick="validB()" >
</form>
</body>
</html>
9.screen
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>屏幕分辨率的高和宽</title> </head> <body> <script type="text/javascript"> document.write( "屏幕宽度：" + screen.width+"px<br>"); document.write( "屏幕高度：" + screen.height + "px"); </script> </body> </html>
5秒返回效果
<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>
<!--先编写好网页布局-->
<H4>操作成功</H4>
<p>
<b id="seconds">5</b>秒后回到主页 <a href="window.history.back();">返回</a>
</p>
<script type="text/javascript">
//获取显示秒数的元素，通过定时器来更改秒数。
var num = 5;
function fun(){
document.getElementById("seconds").innerHTML = num;
num -=1;
if(num==0){
clearInterval(i)
window.location.assign("http://www.imooc.com")
}
}
var i=setInterval(fun, 1000);
//通过window的location和history对象来控制网页的跳转。
</script>
</body>
</html>
JavaScript: basis的更多相关文章
- WEB 技术分类 Javascript DOM(Element Node) BOM
Web technology for developers Web 技术文档 备注:本文介绍web technology的分类,各自职责,因为之前一直就没有搞明白各种技术.各种名词究竟是属于哪个范 ...
- javascript 闭包理解例子
function Jquery(){ this.name = 'ysr'; this.sex = 'man'; return { x: this, age : 26 } } var b = new J ...
- 分享12款 JavaScript 表格控件（DataGrid）
JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...
- Java & PHP & Javascript 通用 RSA 加密 解密 (长字符串)
系统与系统的数据交互中,有些敏感数据是不能直接明文传输的,所以在发送数据之前要进行加密,在接收到数据时进行解密处理:然而由于系统与系统之间的开发语言不同. 本次需求是生成二维码是通过java生成,由p ...
- Attacking JavaScript Engines: A case study of JavaScriptCore and CVE-2016-4622（转）
转:http://phrack.org/papers/attacking_javascript_engines.html Title : Attacking JavaScript Engines: A ...
- Javascript: hash tables in javascript
/** * Copyright 2010 Tim Down. * * Licensed under the Apache License, Version 2.0 (the "License ...
- jQuery JavaScript Library v3.2.1
/*! * jQuery JavaScript Library v3.2.1 * https://jquery.com/ * * Includes Sizzle.js * https://sizzle ...
- JavaScript技巧手冊
js小技巧 每一项都是js中的小技巧,但十分的有用! 1.document.write(""); 输出语句 2.JS中的凝视为// 3.传统的HTML文档顺序是:documen ...
- 【JavaScript框架封装】使用原生js封装的类似于JQuery的框架及核心源码分享（多文件版本）
这个版本的JQuery是对上一个版本的JQuery,使用了require.js进行了二次封装,基本上把前面的每一个框架封装成为一个单独的模块,最终的目录结构如下: 由于代码量和目录比较多,这个封装好的 ...
随机推荐
- JAVA Exchanger
//Exchanger工具类的使用案例 //本文给出一个简单的例子,实现两个线程之间交换数据,用Exchanger来做非常简单. import java.util.concurrent.Exchang ...
- Sql Server建立链接服务器访问Access的MDB数据库
EXEC master.dbo.sp_addlinkedserver @server = N'test', @srvproduct=N'OLE DB Provider for Jet', @provi ...
- php--group by
1. GROUP BY 是分组查询, 一般 GROUP BY 是和聚合函数配合使用 group by 有一个原则,就是 select 后面的所有列中,没有使用聚合函数的列,必须出现在 group by ...
- Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式
原文:Arcgis for Javascript API下类似于百度搜索A.B.C.D marker的实现方式 多说无益,首先贴两张图让大家看看具体的效果: 图1.百度地图搜索结果 图2.Arcgis ...
- POJ1326问题描述
Description Mileage program of ACM (Airline of Charming Merlion) is really nice for the travelers fl ...
- 微信公众平台开发（68）苹果IMEI查询
微信公众平台开发 苹果IMEI查询 苹果序列号查询 iPhone/iPad/iPod/Mac 作者:方倍工作室 地址:http://www.cnblogs.com/txw1958/p/weixin69 ...
- Android 一个漂亮的Android日期和时间选择器：DateTimePicker
DateTimePicker这个类库包含了漂亮的 DatePicker 和 TimePicker ,类似于在新 Google Agenda App中看到的. 项目主页:http://www.open- ...
- .net泛型理解
泛型简介: 泛型(Generic Type)是.NET Framework2.0最强大的功能之一.泛型的主要思想是将算法与数据结构完全分离开,使得一次定义的算法能作用于多种数据结构,从而实现高度可重用 ...
- 简单的apk Ionic
index.html <html> <head> <meta charset="utf-8"> <meta name="view ...
- ApplicationContext.xml文件详解
想必用过Spring的程序员们都有这样的感觉,Spring把逻辑层封装的太完美了(个人感觉View层封装的不是很好).以至于有的初学者都不知道Spring配置文件的意思,就拿来用了.所以今天我给大家详 ...