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 $ ...

随机推荐

通过urllib2抓取网页内容（1）
一.urllib2发送请求 import urllib2 url = 'http://www.baidu.com' req = urllib2.Request(url) response = urll ...
c# POST和GET方式通过server地址提交数据
1:POST方式提交: <strong><span style="font-size:14px;">private static string HttpPo ...
ListView的基本使用技巧
ListView的基本使用技巧 1.headerView和footerView 2.ViewHolder 3.OnScrollListener 4.单行刷新 5.其它细节 ListView提供head ...
ZendFramework2学习笔记表单过滤、表单验证
ZF2有非常多内建的Filter和Validator组件,能够方便地对表单数据进行处理. Filter的作用是过滤表单数据.比如,去除一些空格,替换一些敏感词等. Validator的作用是检验表单数 ...
Ural 1353 Milliard Vasya's Function（DP）
题目地址:Ural 1353 定义dp[i][j].表示当前位数为i位时,各位数和为j的个数. 对于第i位数来说.总能够看成在前i-1位后面加上一个0~9.所以状态转移方程就非常easy出来了: dp ...
xpath元素查找提示is not clickable
1.用xpath可以在chrome找到 $x("//mandatory-config-dialog[@is-show='isShowMandatoryConfig']/div/div[2]/ ...
Extjs显示图片
1.首先做一个容器 xtype : 'container', // 第2行 anchor : '100%', layout : 'column', items : [{ columnWidth : 0 ...
SPOJ GSS 系列
来怒做GSS系列了: GSS1:https://www.luogu.org/problemnew/show/SP1043 这题就是维护一个 sum , mx , lmx , rmx,转移时用结构体就好 ...
两个向量的outer product
#include <functional> template <class T1, class T2, class T3>void outer_product(std::vec ...
python 46 边界圆角、a_img_list标签、伪类选择器
一:边界圆角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

html第六节课

补充：

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

随机推荐

热门专题