js01

/////////////////////////////////////////////////////////////js开端//////////////////////////////////////////////////////////////////////////////

------------htnl

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />


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

</head>
<body>

</body>

</html>

----------js

alert("hello world");

///////////////////////////////////////////////////变量、数据类型、作用域//////////////////////////////////////////////////////////////

--------------------主意几个数据类型操作函数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

//变量的作用域
function fn1() {
var c = 10;
alert(c);
}

function fn2() {
//当在函数内部没有使用var来声明变量的时候，这个变量就会作为全局变量声明
//b = 10;
//所以一定注意，在函数中定义变量一定要使用var
var b = 10;
alert(b);
// alert(c);
}

function fn3() {
alert(b);
}

//变量的类型,常用的类型有:Number,String,Array,Date
var a = 10.6;
// alert(typeof a);
a = "11";
//java进行强制类型转换是(Number)a,而js是通过Number(a)
// alert(Number(a)+1);
//如果强制转换一个非数字的值为Number会得到一个NaN的值
var b = "abc";
//alert(Number(b));
b = "12px";
//使用parseInt可以将字符串开头的几个数字转换为int，但是如果开头不是数字，那就得到NaN
//alert(parseInt(b));
var as = ["a","b",1,2,3];
//对于数组等对象而言，显示的结果就是object不会显示Array
//alert(typeof as);
//判断as是否是Array的实例，如果是返回true
//alert(as instanceof Array);

//布尔类型:true和false,在js中，非0就是true，特别注意:NaN是false
//当一个变量没有定义值的时候，是undefined类型，undefined类型是false
//特别注意：在js中除了NaN,undefined,0这三个数是false外其余皆是true
var size;
// alert(!!size);

for(var i=0;i<as.length;i++) {
alert(as[i]);
}
</script>
</head>
<body>
<input type="button" value="运行fn1" onclick="fn1()"/>
<input type="button" value="运行fn2" onclick="fn2()"/>
<input type="button" value="运行fn3" onclick="fn3()"/>
</body>
</html>

/////////////////////////////////////////////////////////简单流程控制语句。太简单在此略掉///////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////js面向对象/////////////////////////////////////////////////////////////////

---------------------------1：主意如何创建实例

---------------------------2：函数的堆栈模型以及区别 var k = fn(指向堆中的函数);var k=fn()(调用函数得到返回值);

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
// var x = function() {
// alert("x");
// }
// //此时x就是一个function函数
// x();
// function fn() {
// alert("fn");
// //对于函数而言，直接写return就等于有返回值
// return "100";
// }
// //此时是将y这个变量指向函数fn,可以通过y()来调用函数
// var y = fn;
// fn();
// //可以调用
// y();
// //将函数fn所执行的返回值传给z变量，所以z为100
// var z = fn();
// alert(z);
// alert(y);

//可以使用function来模拟java的类
function Person(name,age) {
//定义了一个Person的属性为name
this.name = name;
//定义了Person的属性为age
this.age = age;
this.address = "云南昭通";
//如果没有用this声明，这个变量就仅仅只是一个局部变量，不是类的属性
var x = 10;
//创建了一个行为
this.say = function() {
alert(this.name+","+this.age);
}
}
//创建了一个对象p1是Person的对象
var p1 = new Person("张三",12);
alert(p1.name+","+p1.address+","+p1.x);
p1.say();

var p2 = new Person("德华",22);
p2.address = "香港";
//可以通过对象["属性字符串"]完成对属性的调用
alert(p2["name"]+","+p2["address"]);

alert(typeof p1);
alert(p1 instanceof Person);
//在js中对于对象而言，可以通过for in来变量对象的属性
for(var a in p1) {
//可以获取对象中的所有显示声明的属性
alert(a+":"+p1[a]);
}
</script>
</head>
<body>
<input type="button" value="运行fn1" onclick="fn1()"/>
<input type="button" value="运行fn2" onclick="fn2()"/>
<input type="button" value="运行fn3" onclick="fn3()"/>
</body>
</html>

////////////////////////////////////////////////////////////////////js常用的对象///////////////////////////////////////////////////////////////////////////

--------日期时间

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

</script>
</head>

-------字符串

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

str = "abc.txt";
alert(str.substr(str.lastIndexOf(".")+1));
</script>
</head>
<body>
</body>
</html>

---------------数组对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

as = new Array(11,22,33,44,55,66,77,"111","222",23);
alert(as);
//一般使用以下方式定义数组
as = [11,12,1,2,3];
//转换为字符串通过---来完成连接
alert(as.join("---"));
//sort只会通过字符串来排序
alert(as.sort());
//颠倒顺序
alert(as.reverse());

as = [1,2,3,4];
//表示在索引为2的前面删除0个元素，并且增加两个元素31和32-->1,2,31,32,3,4
//as.splice(2,0,31,32);
//表示在索引为2的前面删除2个元素，并且增加两个元素31和32-->1,2,31,32
as.splice(2,2,31,32);
alert(as);
</script>
</head>
<body>
</body>
</html>

//////////////////////////////////事件处理/////////////////////////////////////

-------1.通过事件来操作document的属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

-------2.主要通过数字变大变小的例子来讲解的

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
var big = true;
function bigger(obj) {
var cs = parseInt(obj.style.fontSize);
if(cs) {
　　if(cs>=30) {
　　big = false;
　　obj.innerHTML = "点击变小";
}
if(cs<=12) {
　　big = true;
　　obj.innerHTML = "点击变大";
}
if(big) {
　　cs+=2;
} else {
　　cs-=2;
}
obj.style.fontSize = cs+"px";
} else {
obj.style.fontSize = "14px";
}
}
</script>
</head>
<body>
<div onclick="bigger(this)" style="cursor: pointer">点击变大</div>
</body>
</html>

-----------------wtch函数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

</script>
</head>
<body>
</body>
</html>

-----timeOut函数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

}

function bigger() {
//获取html中节点的id为txt的节点
var node = document.getElementById("txt");
node.style.fontSize = "200px";
}
</script>
</head>
<body>
<div id="txt" style="cursor: pointer">开始</div>
<div onclick="cd()">点击开始操作</div>
</body>
</html>

---------setInterval

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

}

function sd(){
clearInterval(timeId);
}

//////////////////////////////浏览器对象模型////////////////////

--------------------history对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

-------------状态栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

----------获取其他页面属性

=======1.主页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
// setTimeout("endWelcome()",5000);
// function endWelcome() {
// document.getElementById("welcome").style.display = "none";
// }
</script>
</head>
<body>
<div id="welcome">欢迎进行我们的网站</div>
<a href="#" onclick="window.open('test02.html','aaa','width=300,height=300,resizable=0')">test02</a>
<a href="#" onclick="window.open('test03.html','aaa','width=400,height=400,resizable=0')">test03</a>
<br/>
<a href="#" onclick="window.open('bless.html','aaa','width=600,height=300')">输入你祝福语</a>
<a href="#" onclick="window.open('bless.html','aaa','width=600,height=300')">选择性别</a>
<div id="bless"></div>
</body>
</html>

=======2.子页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
function bless() {
//获取输入的祝福语
var mb = document.getElementById("mb").value;
//获取父类窗口
var p = window.opener;
//获取父类窗口中的id为bless的div
var pd = p.document.getElementById("bless");
//设置pd的值
pd.innerHTML = mb;
//关闭当前窗口
window.close();
}
</script>
</head>
<body>
输入祝福语:<input type="text" size="40" id="mb"/><input type="button" onclick="bless()" value="输入" />
</body>
</html>

js01的更多相关文章

Vue.js-01：第一章 - 一些基础概念
一.前言 Vue.React.Angular,当今前端界的三驾马车,作为传统的后端程序员,前端再也不是我们想的那种切切图就可以了,第一次接触的话,先了解了解一些基础的概念. 学习系列目录地址:http ...
Vue.js01：跑马灯效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Web开发基础-Node.js-01
01-浏览器工作原理 1)人机交互部分(ui) 2)网络请求部分(socket) 3)javascript引擎 4)渲染引擎(解析html,css) 5)数据存储部分(cookie,本地存储等) -- ...
d3.js--01
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...
JS-01 书写规范
此部分内容整理自私教指导和自我体会:(持续更新...) 1.运算符左右两边留空格 (webstorm快捷键ctrl+alt+l): 2.判断值是否相等尽量用“===” 严格等于 : 3.编程中,可有可 ...
Ext js-01 -helloworld
一.下载ext: 登陆这个网址 https://www.sencha.com/products/evaluate/ 下载下来解压后如下:安装cmd程序二.开始helloworld 新建一个idea ...
Nuts.js01
1.简介 Vue ssr框架.支持vue2,vue-router,vuex,vue server render, vue meta 2.基本使用: vue init nuxt-community/ko ...
【JavaScript】js01
一,javascript 历史. netscape -> 浏览器. -> livescript 微软 -> jscript netscape -> ecma 组织 -> ...
js基础知识梳理（最简版）
基础的JavaScript知识,只放XMind截图.小白 JS01 JS02 JS03 最基础的js知识--!

随机推荐

P3613 睡觉困难综合征（码力）
Luogu3613 实现细节较多,详见代码 #include<cstdio> #include<iostream> #include<cstring> #inclu ...
Windows10上安装OpenStack
1. 启动Hyper-V 2. 在Hyper-V内安装Ubuntu 这两部可以参考http://www.cnblogs.com/jimmy-y/p/5328306.html(Ubuntu16类似) 3 ...
支付宝支付集成中：refund_fastpay_by_platform_nopwd接口服务器通知验签不通过
在做p2p配资平台,也就是公司的项目,遇到了一个问题:refund_fastpay_by_platform_nopwd接口服务器通知验签不通过下面是实录: 通知服务器的POST过来的数据: 1.si ...
OpenCV属性页配置问题~
详细的OpenCV属性页的安装流程,参考这个网站:http://m.bubuko.com/infodetail-793518.html 运行例子时候,如果遇到这个问题,可能配置环境时候出现问题了. 此 ...
vue.js vue-jsonp解决跨域问题
安装jsonp npm install vue-jsonp --save main.js中引入 import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 组 ...
hbase数据库操作
.实验内容与完成情况:(实验具体步骤和实验截图说明) (一)编程实现以下指定功能,并用 Hadoop 提供的 HBase Shell 命令完成相同任务: () 列出 HBase 所有的表的相关信息,例 ...
MySQL 0 学习
ubuntu 安装mysql 创建用户以及外部如何可视化连接的方法 https://www.linuxidc.com/Linux/2017-01/139502.htm 2.3 MyS ...
Redis Intro - Dict
https://segmentfault.com/a/1190000004850844
Java基本语法_循环练习系列（一）——模拟双色球
目前正在自学java中,学完循环这一块,简单写几个例子,使之更加熟练掌握循环语句和条件语句. 简述一下要这段代码要完成的任务: /*有33个红色球,16个蓝色球. 在33个里选6个 ,16个里选1个. ...
怎么为android控件边缘添加阴影
为控件设置一个有阴影感的背景图片即可,可以使用shape 在自定义shape中增加一层或多层,并错开,即可显示阴影效果.为增加立体感,按钮按下的时候,只设置一层.我们可以通过top, bottom, ...

js01

js01的更多相关文章

随机推荐

热门专题