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进行了二次封装,基本上把前面的每一个框架封装成为一个单独的模块,最终的目录结构如下: 由于代码量和目录比较多,这个封装好的 ...
随机推荐
- base64coder调用
base64coder 可以查看官网: http://www.source-code.biz/base64coder/java/ 我所涉及到的 base64coder调用: 某天,因需要修改Pr ...
- CC2540的使用入门
目录 1. 介绍 2. 开发环境 3. SDCC 1. 介绍 CC2540是一款2.4GHz Bluetooth® low energy SOC,基于8051 MCU 首先,你需要硬件设备 笔者的开发 ...
- 兼容的获得event
function getEvent(e) { var e=window.event || event; return e.srcElement || e.target; }
- Excel Sheet Column Number || leetcode
很简单的26进制问题 int titleToNumber(char* s) { int sum=0,temp; char *p=s; while(*p!='\0'){ sum=sum*26+(*p-' ...
- [LeetCode]题解（python）：079 Word Search
题目来源 https://leetcode.com/problems/word-search/ Given a 2D board and a word, find if the word exists ...
- LightOj1007 - Mathematically Hard（欧拉函数）
题目链接:http://lightoj.com/volume_showproblem.php?problem=1007 题意:给你两个数a和b,求他们之间所有数的欧拉值得平方和; a and b (2 ...
- HTML5样式和列表、CSS链接的四种状态
一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...
- JS全局函数parseInt和parseFloat
1.parsetInt parseInt(string ,radix)解析一个字符串,并返回一个十进制的整数:该方法是将字符串转成十进制整数 console.log(parseInt("01 ...
- sqlserver 中server 函数GETDATE(),DEFAULT用法
alter table Persons add datenow date DEFAULT GETDATE() null, datetimenow datetime DEFAULT GETDATE()n ...
- The identity used to sign the executable is no longer valid.
昨天运行还好好的,今天Xcode突然报这个错误. 在网上搜索了一番,也没有找到合适的解决办法. 那怎么办呢? 于是我就登陆了Appstore的开发者账号,发现里面的证书都是invalid状态,我想应该 ...