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" />
<!--可以直接在html页面中，在script标签中写相应的js的代码
<script type="text/javascript">
alert("hello world");
</script>-->
<!--可以引入外部文件，通过src来指定外部文件的位置，特别注意不能省略script的结束标记-->
<script type="text/javascript" src="hello.js"></script>
<!-- Date: 2013-01-09 -->
</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">
<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">
//对于js而言，是没有数据类型的，全部都是通过var来完成变量的创建
/*var a = 19;
alert(a);
a = "hello";
alert(a);
*/
//变量的作用域
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">
<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 d = new Date();
//对于js而言，月的下标是从0开始的
document.write(d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+"星期"+d.getDay());
</script>
</head>
-------字符串
<!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 str1 = new String("abc");
var str2 = "abc";
alert(str1==str2);
var s = str2.concat("hello","world");
alert(s);
//包含start不包含end
s = s.slice(2,4);
alert(s);
var str = "hello world";
//从2开始到5结束
alert(str.substring(2,5));
//从2开始取5个字符
alert(str.substr(2,5));
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">
<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">
//js的array就是java中的list和stack的集合
var as = new Array();
as.push(11);
as.push(22);
alert(as);
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">
<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 clickD(obj) {
alert(obj.innerHTML);
}
function mouseD(obj) {
//设置这个对象的颜色，在js中设置文本的样式均通过xx.style.样式名称
obj.style.color = "#f00";
//当使用代码来设置样式的时候，如果在css中通过-表示的，都是有驼峰标识，font-size-->fontSize
obj.style.fontSize = "18px";
}
function outD(obj) {
obj.style.color = "#000";
obj.style.fontSize = "16px";
}
</script>
</head>
<body>
<div onclick="clickD(this)" style="cursor: pointer">点击了试一下</div>
<div onmouseover="mouseD(this)" onmouseout="outD(this)">鼠标移动上来试试</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">
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">
<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">
with(document) {
//此时花括号中的所有代码都是基于document作为根对象，当使用write(xxx)就等于document.write(xxx);
write("aaa<br/>");
write("bbb<br/>");
write("ccc<br/>");
//使用alert也是允许
alert("abc");
}
</script>
</head>
<body>
</body>
</html>
-----timeOut函数
<!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 cd() {
//在3秒之后会执行bigger这个函数,setTimeout的意思就是间隔一段时间来执行某个函数
//setTimeout仅仅只会执行一次，如果希望重复执行，需要使用setInterval
setTimeout("bigger()",3000);
}
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">
<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 timeId;
function cd() {
//在3秒之后会执行bigger这个函数,setTimeout的意思就是间隔一段时间来执行某个函数
//setInterval表示每隔一段时间就调用一次函数
timeId = setInterval("bigger()",500);
}
function sd(){
clearInterval(timeId);
}
function bigger() {
//获取html中节点的id为txt的节点
var node = document.getElementById("txt");
var size = parseInt(node.style.fontSize);
if(size) {
size+=10;
} else {
size = "14";
}
node.style.fontSize = size+"px";
}
</script>
</head>
<body>
<div id="txt">开始</div>
<div onclick="cd()" style="cursor: pointer">点击开始操作</div>
<div onclick="sd()" style="cursor: pointer">停止操作</div>
</body>
</html>
//////////////////////////////浏览器对象模型////////////////////
--------------------history对象
<!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 loc() {
//获取文本框中的值
var href = document.getElementById("address").value;
//直接跳转到某个页面
window.location.href = href;
}
</script>
</head>
<body>
<a href="#" onclick="loc()">test01</a>
<input type="text" id="address"/>
</body>
</html>
-------------状态栏
<!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 loc() {
var txt = document.getElementById("address").value;
window.status = txt;
}
</script>
</head>
<body>
<a href="#" onclick="loc()">test01</a>
<input type="text" id="address"/>
</body>
</html>
----------获取其他页面属性
=======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知识--!
随机推荐
- SprimgMVC学习笔记（一）—— SpringMVC入门
一.什么是 SpringMVC ? 在介绍什么是 SpringMVC 之前,我们先看看 Spring 的基本架构.如下图: 我们可以看到,在 Spring 的基本架构中,红色圈起来的 Spring W ...
- Vscode 隐藏 工作区中的目录
{ "files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg&qu ...
- ssh-keygen生成公私钥免密码登录远程服务器
1.终端输入命令:ssh-keygen -t rsa ssh-keygen命令专门是用来生成密钥的.该命令有很多选项,这里列出了最基本的四个: -t 用来指定密钥类型(dsa | ecdsa | ed ...
- 毕业设计 python opencv实现车牌识别 界面
主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuow ...
- java向数据库插入数据时的错误： Duplicate entry '' for key 'PRIMARY' 问题解决
错误提示为:你插入的记录与数据表中原有记录的主键重复了(Duplicate).所以插入失败 mysql主键设置成auto_increment时,进行并发性能测试出现主键反复Duplicate entr ...
- Python 初识爬虫-**机场出港业务
# -*- coding:utf-8 -*- from lxml import etree import requests ##先进单页测试,然后在进行多页循环 没有解决的问题,动态解决最大页数,目前 ...
- Linux文件扩展名
在linux中,扩展名没什么实际意义.但是为了兼容winodows,同时便于我们大多数习惯了windows的用户区分文件的不同,所以我们还是习惯通过扩展名来表示不同的文件类型. ①系统文件 扩展名 说 ...
- SSL证书切换
SSL证书:SSL证书是数字证书的一种,类似于驾驶证.护照和营业执照的电子副本.因为配置在服务器上,也称为SSL服务器证书.SSL 证书就是遵守 SSL协议,由受信任的数字证书颁发机构CA,在验证服务 ...
- SpringMVC中的视图和视图解析器
对于控制器的目标方法,无论其返回值是String.View.ModelMap或是ModelAndView,SpringMVC都会在内部将它们封装为一个ModelAndView对象进行返回. Spri ...
- tomcat异常[0]--java.lang.ClassNotFoundException: org.apache.taglibs.standard.tlv.JstlCoreTLV
自己建了一个项目,启动项目的时候,发生了java.lang.ClassNotFoundException: org.apache.taglibs.standard.tlv.JstlCoreTLV异常. ...