html第六节课

JavaScript

一、JavaScript简介

1.JavaScript是个什么东西？

　　它是个脚本语言，需要有宿主文件，它的宿主文件是HTML文件。

2.它与Java什么关系？

　　没有什么直接的联系，Java是Sun公司（已被Oracle收购了），JavaScript是netspace（网景公司，已被美国在线收购了），JScript是微软的，90%像JavaScript，一些功能只能在IE上使用。

3.它的用法：

　　在HTML中位置有三块：

　　（1）head里面

　　（2）body里面

　　（3）</html>之后

　　为了保险起见，一般写在</html>之后。

4.三个常用对话框：

　　alert("")警告对话框，作用是弹出一个警告对话框。

　　confirm("")确定对话框，作用是弹出一个可供选择的确定对话框，点击确定之后，它返回ture，点击取消返回false，可以用变量来接收。

　　prompt("要显示的提示文字"),作用是弹出一个可以输入内容的对话框。

二、JavaScript语法

1.基本数据类型：

　　字符串、小数、整数、日期时间、布尔型等。

2.变量：

　　都是通用类型var，可以随便存储其它类型的值，可以直接使用，不用定义。但习惯上定义。

定义变量： var a; //所有变量定义都用var定义，var是通用的可变类型。

var s = "3.14"; var n = parseFloat(s); ; s += 5;
var d = parseInt(s);

3.数组：

　　数组的定义：new Array(); //它的长度是动态变化的，里面可以放任意类型的元素。

　　数组元素的赋值：a[0]=123; a[1]="hello"; //元素中的索引从0开始。

　　数组的取值：a[i];

　　数组属性：a.length; //数组元素的个数，长度。

　　方法：a.sort();//数组排序，按照每一个元素的第一个字符进行排序。a.reverse(); //翻转数组。

4.函数：

　　函数的四要素：名称、输入、返回值、加工。

　　定义函数：function add(形参){函数体} //函数名为add，输入为参数的形式，返回值可以是var类型，也可以return一个返回值。

　　函数必须经过调用才能执行。函数的调用：add（实参）。

*放在头部也可以读取（最先读取头部）

表单提交时会自动刷新网页，最好关掉

写法：

1、输出

document.write("hello world");

</script>

2、按钮运用

3、定义变量并输出

　　　 var bianliang;

bianliang="123";

document.write(bianliang);

4、改变元素的属性

<p id="hello">hello</p>

function hello()

{

x=document.getElementById("hello")

x.style.color = "#ff0000";

}

</script>

5、item索引，指示第n个出现的元素，与getElementsByName同时使用

定义一组变量

var student =

{

name:"张三",

sex:"男"

};

student.name="张三";

document.write(student.name);

（*打印“张三”）

外部调用JS

1.类型转换：

　　分为自动转换和强制转换，一般用强制转换。

　　其他类型转换为整数：parseint（）；

　　其他类型转换为小数：parsefloat（）；

　　判断是否是一个合法的数字类型：isNaN（）；

　　是数字的话返回false，不是数字的话返回ture。

示例：

需要将prompt放进isNaN方法内

2.运算符：

　　数学运算符：+ - * / % ++ --；

　　关系运算符：== != >= <= > <；

　　逻辑运算符：&& || ！；

　　其他运算符：+= -= *= /= %= ？:；

3.语句：

　　一般分为顺序、分支和循环语句。

（1）分支语句if：

if（判断条件）

{

　　满足条件要执行的语句

}

else

{

　　不满足条件时执行的语句

}

（2）循环for语句：

for（初始条件；循环条件；状态改变）

{

　　循环体

}

（3）问题类型：穷举、迭代。

（4）两个关键词：break 和 continue。

（5）如果要输出某一参数的值：输出的值是"+a+"和"+b"

$("id1")就相当于document.getElementById("id1")

1、DOM的基本概念

DOM是文档对象模型，这种模型为树模型；文档是指标签文档；对象是指文档中每个元素；模型是指抽象化的东西。

2、Window对象操作

一、属性和方法：

属性（值或者子对象）：

opener:打开当前窗口的源窗口，如果当前窗口是首次启动浏览器打开的，则opener是null。

dialogArgument：对话框返回值。

子对象：history,location,document,status,menubar,toolbar等。

方法（函数）：事件（事先设置好的程序，被触发）。

二、Window.open（"第一部分"，"第二部分"，"第三部分"，"第四部分"）

Window.open的特征参数：

第一部分：写页面地址。

第二部分：_blank 打开的方式，在新窗口还是自身的窗口。

第三部分：控制打开的窗口格式，可以写多个，用空格隔开如下：

toolbar=no新打开的窗口无工具条；

menubar=no无菜单栏 status=no无状态栏；

width=100 height=100 宽度高度；

left=100 打开的窗口距离左边多少距离；

resizable=no窗口大小不可调；

scrollbars=yes 出现滚动条；

location=yes 有地址栏；

Window.open也有返回值，它的返回值是：新打开的窗口对象。

例如：

最简单的打开窗口：window.open("Untitled-6.html");

打开一个窗口并保存在变量中：var w= window.open()；

可以将打开的多个窗口保存在数组w里：

function openW()

{

w[i++]=window.open();

}

三、window.close()：关闭当前窗口；

w.close()：关闭保存在变量w中的那个窗口；

关闭多个子窗口：先将打开的窗口存入数组内，利用循环将其挨个关闭；

关闭打开当前窗口的源窗口： window.opener.close()；

四、间隔与延迟

间隔执行一段代码（函数）：window.setInterval("要执行的代码"，间隔的毫秒数)

清除间隔执行：window.clearInterval(间隔的id); 循环一次之后用来清除隔执行的代码

延迟一段时间执行某一段代码（函数）：window.setTimeout("要执行的代码"，延迟的毫秒数)

清除延迟：window.clearTimeout(延迟的id)；清除setTimeout

五、调整页面

window.navigate("url") 跳转至目标页面，在谷歌浏览器下有bug；

window.moveTo(x,y) 移动页面至某一位置，位置由x和y决定；

window.resizeTo(宽，高) 调整页面的宽度和高度；

window.scrollTo（x,y）滚动页面至哪里，y代表纵向滚动。

六、模态对话框和非模态对话框

模态对话框（Modal Dialogue Box），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭，它和非模态对话框都是永远置顶的，它们的区别在于当对话框打开时，是否允许用户进行其他对象的操作。

打开模态对话框：window.showModalDialog("url"，"向目标对话框传的值"，"窗口特征参数")；

特征参数：用分号隔开，像素大小用px。dialogHeight,dialogWidth,center,等

打开非模态对话框：window.showModelessDialog("url"，"向目标对话框传的值"，"窗口特征参数")

var a = window.dialogArgument；可以用一个参数来获取模态或非模态对话框传递的值。

3、Window.history对象

window.history.back();页面进行后退；

window.history.forward();页面前进；

window.history.go(n); n如果是正数则代表前进n个页面，n如果是负数则代表后退n个页面，一般常用这一种。

4、Window.location对象

location地址栏

var s = window.location.href;获取当前页面的地址

window.location.href="http://www.baidu.com";修改页面地址，会跳转页面

window.location.hostname: 主机名，域名，网站名，可用变量接收

window.location.pathname: 路径名，可用变量接收

5、Window.status对象

status状态栏，可以给状态栏添加要显示的文字

window.status="要在状态栏显示的内容"；设置状态栏文字

例如：

function s(){ window.status = "向前走就这么走";}

补充：

回车符/r和换行符/n的区别：/r 相当于enter，是段落与段落之间的区别，

　　　　　　　　　　　　　/n 相当于shift+enter，是行与行之间距离，比较小

几种window操作方法：

1、获取当前窗口大小并打印：

var height=window.innerHeight;var width = window.innerWidth;document.write("<br/>"+"height"+height+",width"+width);

2、打开窗口、关闭当前窗口

window.open("http://baidu.com");window.close();

3、移动当前窗口到某一位置（x，y）

window.moveTo(200,200);

4、改变当前窗口的尺寸（width，height）

window.resizeTo(1100,1100);

5、获取当前页地址

document.write(location.href);

6、【历史记录】网页的前进（前进到之前的历史，相当于“→”）、后退（后退到之前历史，相当于“←”）

<input type="button" onClick="a()"value ="点我前进"/>

function a() { window.history.forward();/*前进到之前的历史*/ }

*navigator访问者浏览器的信息

alert:警告框 confirm:确认框 prompt:提示框

一、基本语法：数据类型（字符串，小数，整数，布尔，时间） var，
var s = "3.14"; var n = parseFloat(s); ; s += 5;
var d = parseInt(s);
isNaN(字符串)：判断是否是数字模样的字符串；是-false；不是-true

运算符：四大类
表达式：
语句：三大类（顺序，分支，循环）
分支：if(){}; if...else...;if...else if...else if ......else;if嵌套
循环：穷举，迭代；四要素（初始条件，循环条件，循环体，状态改变）：
数组；var a = new Array()
函数：四要素(名称，输入，返回，加工)
function Show()
{
}

二、DOM操作：树
window对象——浏览器窗口

window.location：地址栏
window.history：访问历史
window.status：状态栏
window.document：重点！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="Untitled-2.js"></script>
</head>

<body><p id="hello">123</p>
<input value="请点击" type="button" onclick="hello()" />
</body>
</html>
<script type="text/javascript" language="javascript">
var a = 1;
var b ="3.14";
var c = true;
var d =3.14;
document.write("hello world!")
function hello()
{
var x = document.getElementById("hello");
x.style.color="red";
document.write(123456);
}
</script>

<body>
<script>
var a =prompt("请输入一个数字","只能是数字");
var b = isNaN(a);
var height=window.innerHeight;
var width = window.innerWidth;
document.write("<br/>"+"height"+height+",width"+width);
</script>

</body>
</html>

html第六节课的更多相关文章

centos shell脚本编程2 if 判断 case判断 shell脚本中的循环 for while shell中的函数 break continue test 命令第三十六节课
centos shell脚本编程2 if 判断 case判断 shell脚本中的循环 for while shell中的函数 break continue test 命令 ...
centos linux系统日常管理3 服务管理ntsysv,chkconfig,系统日志rsyslog,last ,lastb ,exec,xargs,dmesg,screen,nohup,curl,ping ,telnet,traceroute ,dig ,nc,nmap,host,nethogs 第十六节课
centos linux系统日常管理3 服务管理ntsysv,chkconfig,系统日志rsyslog,last ,lastb ,exec,xargs,dmesg,screen,nohup,cur ...
风炫安全web安全学习第三十六节课-15种上传漏洞讲解(一)
风炫安全web安全学习第三十六节课 15种上传漏洞讲解(一) 文件上传漏洞 0x01 漏洞描述和原理文件上传漏洞可以说是日常渗透测试用得最多的一个漏洞,因为用它获得服务器权限最快最直接.但是想真正把 ...
风炫安全WEB安全学习第二十六节课 XSS常见绕过防御技巧
风炫安全WEB安全学习第二十六节课 XSS常见绕过防御技巧 XSS绕过-过滤-编码核心思想后台过滤了特殊字符,比如说
风炫安全Web安全学习第十六节课高权限sql注入getshell
风炫安全Web安全学习第十六节课高权限sql注入getshell sql高权限getshell 前提条件: 需要知道目标网站绝对路径目录具有写的权限需要当前数据库用户开启了secure_file ...
《linux就该这么学》第十六节课：第16,17章，Squid服务和iscsi网络存储
第十六章 squid总结: 正向代理:yum 安装后清空防火墙即可正常使用,客户端设置浏览器透明正向代理:vim /etc/squid/squid.conf 59行:http_port 312 ...
Linux第六节课学习笔记
if条件测试语句可以让脚本根据实际情况自动执行相应的命令,可以分为单分支.双分支与多分支. /dev/null为无回收功能的垃圾箱. read是用来读取用户输入信息的命令,-p用来显示提示信息. fo ...
php第二十六节课
会话购物车 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
php第十六节课
分页 <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 private $ ...

随机推荐

【Linux】Ubuntu 开机默认亮度改动方法
换了ubuntu 之后.发现开机屏幕都是"最大亮度",每次都要到设置中手动调节,非常麻烦.于是想到去改动这个设置.Google一通,别人可行的办法到我这就没用了.郁闷.最后是在st ...
oracle Plsql 运行update或者delete时卡死问题解决的方法
oracle Plsql 运行update或者delete时遇到过Plsql卡死问题或者导致代码运行sql的时候就卡死. 在开发中遇到此问题的时候,本来把sql复制出来,在plsql中运行,Sql本 ...
Kids Store - OpenCart 自适应主题模板 ABC-0022
KIDS STORE - OPENCART 自适应主题模板 ABC-0022 FEATURES Get FREE Lifetime Updates Get FREE On-Going Support ...
一条SQL语句求前面记录的平均值
有算法要求如下: For (i=1,i<=10,i++) { ta[i] = (t[1] + t[2] + ... + t[i]) / i; } 用一条SQL语句实现它: 分别用表变量 @ta ...
用sp_executesql执行动态SQL语句及获得返回值
过去我执行拼凑出来的动态SQL语句,都直接使用EXEC @sql 的方式.有好几次,都看到有资料说,应该尽量使用 sp_executesql. 究其原因,是因为仅仅参数不同的情况下,sp_execut ...
HTTP服务端JSON服务端
HTTP服务端JSON服务端最后更新日期: 2014-5-18 Author: Kagula 阅读前提: CMake工具的基本使用内容简介: CPPCMS是个开源Web开发框架,通过它可以很容易 ...
js getyear和getfullyear
getyear()函数如果今年是2015年会得到115,getfullyear()会得到完整的年份.
Docker容器的使用和连接
在上一篇文章<Docker从安装部署到Hello World>介绍了如何在CentOS7上安装Docker.这篇文章主要介绍一下Docker容器的使用和连接. vDocker 容器使用 1 ...
【题解】【CodeForces712C】Memory and De-Evolution
[题目描述] 给定一个边长为xx的正三角形,现在每秒钟你可以改变其中一条边的长度(修改量整数),在改变过程中,每秒钟都需要保证改变后的三角形是合法的,且变成均为正整数. 现在需要最终把三角形改变成边长 ...
Tour UVA - 1347
John Doe, a skilled pilot, enjoys traveling. While on vacation, he rents a small plane and starts vi ...

html第六节课

补充：

html第六节课的更多相关文章

随机推荐

热门专题