JS在页面中的位置
我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分。
放在
部分最常用的方式是在页面中head部分放置
函数
函数是完成某个特定功能的一组语句。如没有函数,完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省重复输入大量代码的麻烦。语法:
function 函数名()
{
函数代码;
}
说明:
1. function定义函数的关键字。
2. "函数名"你为函数取的名字。
3. "函数代码"替换为完成特定功能的代码。
我们来编写一个实现两数相加的简单
函数,并给函数起个有意义的名字:“add2”,代码如下:
function add2(){
var sum = 3 + 2;
alert(sum);
函数调用:
函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写函数就ok了。
输出内容(document.write)
document.write() 可用于直接向HTML 输出流写内容。简单的说就是直接在
网页中输出内容。
第一种:输出内容用""括起,直接输出""号
内的内容。
document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出。
第二种:通过变量,输出内容
var mystr="hello world!";
document.write(mystr); //直接写变
量名,输出变量存储的内容。
第三种:输出多项内容,内容之间用+号连接
var mystr="hello";
document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
第四种:输出HTML标签,并起作用,标签使用""括起来
var mystr="hello";
document.write(mystr+"
");//输出hello后,输出一个换行符
document.write("JavaScript");
*输出空格
1. 使用输出html标签 来解决document.write(" "+"1"+"&n bsp; "+"23");
结果: 1 23
2. 使用CSS样式来解决
document.write(" ='white-space:pre;'>"+" 1 2 3 "+"
结果: 1 2 3
(在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留")
警告(alert消息对话框)
我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任
何操作,这个小窗口就是使用alert实现的。语法
alert(字符串或变量);
看下面的代码:
var mynum = 30;
alert("hello!");
alert(mynum);
注:alert弹出消息对话框(包含一个确定按钮)。结果:按顺序弹出消息框。
注意:
1. 在点击对话框"确定"按钮前,不能
进行任何其它操作。
2. 消息对话框通常可以用于调试程序。
3. alert输出内容,可以是字符串或变量,与document.write 相似。
确认(confirm消息对话框)
confirm 消息对话框通常用于允许用
户做选择的动作,如:“你对吗?”等。弹
出对话框(包括一个确定按钮和一个取消按钮)。
语法:
confirm(str);
参数说明:
str:在消息对话框中要显示的文本
返回值: Boolean值
返回值
当用户点击"确定"按钮时,返回true
当用户点击"取消"按钮时,返回false
注: 通过返回值可以判断用户点击了什么
按钮。
代码:
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true)
{ document.write("很好,加
油!"); }
else { document.write("JS功能强大,要学习噢!"); }
注: 消息对话框是排它的,即用户在点击对话框按钮前,不能进行任何其它操作。
提问(prompt消息对话框)
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。
语法:
prompt(str1, str2);
参数说明:
str1: 要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改
返回值:
1. 点击确定按钮,文本框中的内容将作为函数返回值
2. 点击取消按钮,将返回null
代码:
var myname=prompt("请输入你的姓名:"); if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend."); }
注:在用户点击对话框的按钮前,不能进行任何其它操作。
打开窗口(window.open)
open() 方法可以查找一个已经存在或者新建的浏览器窗口。
语法:
window.open([URL], [窗口名称], [参数字符串])
参数说明:
URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。窗口名称:可选参数,被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank:在新窗口显示目标网页
_self:在当前窗口显示目标网页 _top:框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
https://www.wendangku.net/doc/a419135471.html, 不能包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
例如:打开https://www.wendangku.net/doc/a419135471.html,网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口:
注意:运行结果考虑浏览器兼容问题。
关闭窗口(window.close)
用法
window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口例如:关闭新建的窗口
var
mywin=window.open('http://www.imooc.c om'); //将新打的窗口对象,存储在变量mywin中
mywin.close();
注意:上面代码在打开新窗口的同时,关闭该窗口,看不到被打开的窗口。
认识DOM
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)
代码:
com”>Javascript DOM
对HTML元素进行操作,可添加、改
变或移除CSS样式等
将HTML 代码分解为DOM 节点层次图:
HTML 文档可以说由节点构成的集合,三种常见的DOM 节点:
1. 元素节点:上图中、
、等都是元素节点,即标签。
2. 文本节点:向用户展示的内容,如
3. 属性节点:元素属性,如标签的链接属性href="https://www.wendangku.net/doc/a419135471.html,"。 看下面代码:
通过ID 获取元素
学过HTML/CSS 样式,都知道,网页由标签将信息组织起来,而标签的id 属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id 先找到标签,然后进行操作。 语法: document.getElementById(“id”) 代码:
var mye = document.getElementById ("con");//获取元素储存在变量mye 中 document.write(mye);//输出变量mye
I love JavaScript
结果:null 或[object HTMLParagraph -Element]
注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。
innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。 语法:
Object.innerHTML 注意:
1.Object 是获取的元素对象,如通过
document.getElementById("ID")获取的元
素。
2.注意书写,innerHTML 区分大小写。 我们通过id="con"获取
元素,并将元素
的内容输出和改变元素内容, 代码如下:
Hello World!
改变HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢? 语法:
Object.style.property=new style; 注意:Object 是获取的元素对象,如通过document.getElementById("id")获取的元素。
注意:该表只是一小部分CSS 样式属性,其它样式也可以通过该方法设置和修改。 代码:
改变
元素的样式,将颜色改为红色,字号改为20,背景颜色改为蓝
Hello World!
显示和隐藏(display 属性)
网页中经常会看到显示和隐藏的效果,可通过display 属性来设置。 语法:
Object.style.display = value
注意:Object 是获取的元素对象,如通过document.getElementById("id")获取的元素。
value 取值:
控制类名(className 属性)
className 属性设置或返回元素的class 属性。 语法:
object.className = classname 作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css 样式来更改该元素的外观
1.在第一次给一个变量赋值的时候要加var 2.使用=== 替换== 3.使用闭包实现私有变量 `function Person(name, age) { this.getName = function() { return name; }; this.setName = function(newName) { name = newName; }; this.getAge = function() { return age; }; this.setAge = function(newAge) { age = newAge; }; //未在构造函数中初始化的属性 var occupation; this.getOccupation = function() { return occupation; }; this.setOccupation = function(newOcc) { occupation = newOcc; }; }` 4.在语句结尾处使用分号 5.创建对象的构建函数 `function Person(firstName,lastName){ this.firstName=firstName; https://www.wendangku.net/doc/a419135471.html,stName=lastName; var Saad = new Person("Saad", "Mousliki"); }` 6.小心使用typeof instanceof 和 constructor typeof 用在数据类型上,如果用在引用类型上返回的 object instanceof 判断是那种对象的实例 Object.constructor 是object 的一个属性。他只想:创建对象函数的引用。 7.创建一个自调用函数 `(function(){ // some private code that will be executed automatically })();
Web Crawler A Review 1.分类:通用爬虫、聚焦爬虫、分布式爬虫 2.网络是一个有向图,所以搜索操作可以总结为对有向图的遍历。爬虫通过web页面的图结构从一个页面到另一个页面。 3.Google具有较少的垃圾结果和公平的搜索结果两大优点,其来源于google的pagerank算法和锚点词权重。 4.爬虫技术:A,通用爬虫:从每一个网页尽可能多的找寻链接,去点速度慢占带宽。B,聚焦爬虫:爬取某一主题的文件,节省带宽。C分布式爬虫:多线程爬取。 5.现在爬虫都是同步进行的,有重载、质量和网络等问题。 6.Selberg, E. and Etzioni, O. On the instability of Web search engines. In Proceedings of RIAO ’00, 2000. Teevan, J., E. Adar, R. Jones, and M. A. Potts. Information reretrieval: repeat queries in Yahoo's logs. SIGIR ‘07, 151-158, 2007. 这两篇主要研究识别结果动态改变。 K. S. Kim, K. Y. Kim, K. H. Lee, T. K. Kim, and W. S. Cho “Design and Implementation of Web Crawler Based on Dynamic Web Collection Cycle”, pp. 562-566, IEEE 2012 动态web数据爬取技术包含对web变化的监视,动态获取网页。 Junghoo Cho and Hector Garcia-Molina “Parallel Crawlers”. Proceedings of the 11th international conference on World Wide Web WWW '02”, May 7–11, 2002, Honolulu, Hawaii, USA. ACM 1-58113-449-5/02/0005. 高效的并行爬虫 Alex Goh Kwang Leng, Ravi Kumar P, Ashutosh Kumar Singh and Rajendra Kumar Dash “PyBot: An Algorithm for Web Crawling”, IEEE 2011 广度优先搜素,会输出一个Excel CSV 形式的web架构,存储下来的网页与web结构用于排名, Rajashree Shettar, Dr. Shobha G, “Web Crawler On Client Machine”, Proceedings of the International MultiConference of Engineers and Computer Scientists 2008 V ol II IMECS 2008, 19-21 March, 2008, Hong Kong 异步多线程下载模块 Eytan Adar, Jaime Teevan, Susan T. Dumais and Jonathan L. Elsas “The Web Changes Everything: Understanding the Dynamics of Web Content”, ACM 2009. 对特征化网络变化提出更细微的分析。 A.K. Sharma, J.P. Gupta and D. P. Agarwal “PARCAHYD: An Architecture of a Parallel Crawler based on Augmented Hypertext Documents”, International Journal of Advancements in Technology, pp. 270-283, October 2010.
DAY01 基本使用 什么是javascript 发展历史 javascript组成ECMAScript+BOM+DOM 使用标签 document.write方法 注释 使用引入js文件的方式 . 二种:将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可. 1.1.3代码实现: ”字符串。例如。浏览器在加载如下代码就会产生一个错误。”); } Hi(); 错误原因:当浏览器解析到字符串””时,会结束JavaScript代码段的执行。解决方法: 使用转义字符把字符串‘’分成两部分来写就不会造成浏览器的误解。 代码测试和错误处理,理解浏览器的不同内核和代码不同的兼容性,在不同浏览器代码报错的时候会有不同的调试方法,学会使用浏览器的调试器对网页开发效率会有很大的提高。现在主流的浏览器是Chrome、Firefox、Safari等。 JavaScript的基本语法和各种变量,各种数据类型及各种数据类型的转换。 重点:避免变量污染 Var foo = function(){ Var a = 1, b = 2; Var bar = function(){ Var b = 3, c=4, //a= 1,b =3, c=4 a+=b + c; // a=8, b=3, c=4 }; //a=1, b=2, c = undefined bar(); //a= 21,b=2,c= undefined } JavaScript运算符的使用。JavaScript定义了51个运算符,主要分为一下几大类,位运算符、算术运算符、逻辑运算符、关系运算符、赋值运算符、对象炒作运算符和其他运算符。设计程序结构。程序都是由一个或多个语句组成的集合,语句表示一个可以执行的命令。用来完成特定的任务。大部分语句用于流程控制,在JavaScript中提供了if条件判断语句、switch多分枝语句、for循环语句、while循环语句、do/while循环语句、break语句、continue语句等7种流行控制语句。
韩顺平html+css+js 之JS笔记 Javascript的基本介绍 ?JS是用于WEB开发的脚本语言: ?脚本语言是什么: ?脚本语言不能独立使用,它和HTML/JSP/PHP/https://www.wendangku.net/doc/a419135471.html,配合使用 ?脚本语言也有自己的变量,函数,控制语句(顺序,分支,循环) ?脚本语言实际上是解释性语言(即在执行时直接对源码进行执行) ?Java程序.java→.class→jvm , js→浏览器(js引擎来解释执行) ?Js在客户端(浏览器)执行 ?因为js是由浏览器来执行的,因此这里有个问题,不同类型的浏览器可能对js的支持不一样。
JS: (1)去掉标签的某个属性: $("#ZHTMC").removeAttr("placeholder"); (2)添加属性: $("#ZHTMC").attr("disabled", "disabled"); (3)控件被移除:$(“#Submint”).remove(); (4)控件被隐藏:$(“#Submit”).hide(); (5)控件显示:$(“#Submit”).show(); (2)escape()该函数对字符串进行编码,这样就可以在所有的机器上读取该字符串(例如汉字,特殊字符-)。 只能用于传递文本比较短的参数例如名字,编号等,如果传递的文本过长就会超出浏览器规定的限制,报错,如果传递的文本过长就必须换方式传递,例如传递GUID,通过GUID 进行查询数据库得到要显示的参数; (3)取得Combobox的值:$(“#Name”).combobox(“getValue”); (4)得到数字文本框numberbox的文本: $(“#number”).numberbox(“getValue”); (5)取得redioButton 的值:$(“input[name=?female?]:check”).val() (6)获取DataGrid的整个列表的数据:$(“#grid”).datagrid(“getData”); (7)重新加载DataGrid: $(“#grid”).datagrid(“reload”);//(刷新列表) (8)不需要刷新Datagrid更新某个状态: Var selectedRow=$(“#grid”).datagrid(“getSelected”);//得到选
三、字面量 字面量:是表示固定值的一种表示方法。字面量的字面含义就是你看到什么就是什么。 字面量也叫常量。 字面量:数字,字符串,undefined,布尔类型的值。今天只学数字字面量和字符串字面量。 3.1 数字字面量 数字字面量包含:整数,浮点数(小数),特殊值。 ①整数: 十进制表示法,八进制表示法,十六进制表示法。 八进制表示法:前缀0,0o,0O,后面数字0-7。 十六进行表示法:前缀0x,0X,后面数字0-9,字母a-f或者A-F 在进行算术运算时,都会转换成十进制。(控制台输出的是十进制的数) 八进制:逢八进一。 4console.log(010000); 八进制每一位数都不能超过7,如果超过了会强制转换成十进制。 1console.log(087); 前缀是0o或者0O会直接报错。 1console.log(0o87); 2console.log(0O87); 十六进制:逢十六进一 1console.log(0X10); 2console.log(0x100); 3console.log(0x1000); 4console.log(0xff);
十六进制每一位数不能超过0-9或者a-f(A-F),超过直接报错。1console.log(0xgh); 以下这些都输出15 1console.log(15); 2console.log(017); 3console.log(0o17); 4console.log(0O17); 5console.log(0Xf); 6console.log(0xf); 以下这些都输出-15 6console.log(-0xf); ②浮点数字面量 整数.小数(浮点数只能用十进制表示) 表示: 1console.log(22.33); 2console.log(-1.8); 3console.log(0.893); 4console.log(.893);
文档从互联网中收集,已重新修正排版,word 格式支持编辑,如有帮助欢迎下载支持。
HTML 概要知识点梳理 .................................................................................................................. 2 1、了解 HTML 的概念 ........................................................................................................... 2 2、熟练掌握 HTML 的文档结构。 ....................................................................................... 2 3、标签的分类..........................................................................................错误!未定义书签。 块记标签: ...................................................................................... 错误!未定义书签。 行级标签:....................................................................................................................... 2 掌握灵活运用实际开发中常用的 4 中布局结构:............................................................... 3 注意编写习惯:....................................................................................................................... 3 超链接的应用:....................................................................................................................... 3 表单的应用:........................................................................................................................... 3 下拉列表框:................................................................................................................... 4 多行文本框....................................................................................................................... 4 只读和禁用属性............................................................................................................... 5 隐藏域:......................................................................................................................... 5
Css 样式表........................................................................................................................................ 5 常用样式设置总结................................................................................................................... 5 超链接伪类样式........................................................................................错误!未定义书签。 各类样式的优先级................................................................................................................... 5
Javascript 知识点汇总...................................................................................................................... 6 一、 JavaScript 理论知识点的理解: ................................................................................... 6 1、 JavaScript 定义 ......................................................................................................... 6 2、 JavaScript 组成。 ..................................................................................................... 6 3、 JavaScript 的基本结构 ............................................................................................. 7 4、 JavaScript 的引用方式 ............................................................................................. 7 二、 JavaScript 核心语法 ....................................................................................................... 7 1、 语法约定:............................................................................................................... 7 2、 变量:....................................................................................................................... 8 3、 数据类型:............................................................................................................... 8 4、 运算符:................................................................................................................... 8 三、 JavaScript 基本应用 ....................................................................................................... 8 1、 消息框:................................................................................................................... 8 2、 数组:....................................................................................................................... 9 JavaScript 中的 for in 迭代语句: ............................................................................ 10 3、 函数:..................................................................................................................... 10 4、 事件:..................................................................................................................... 11 5、 其他注意事项:..................................................................................................... 11 四、 JavaScript 中的对象 ..................................................................................................... 12 一、 BOM 和 DOM 对象有哪些区别:(了解)........................................................ 12 二、 BOM 对象............................................................................................................. 13 Window 对象属性 ................................................................................................................. 13 window 对象常用的方法:........................................................................................... 13 三、 DOM 对象 ............................................................................................................ 14 Document 对象常用的属性 ................................................................................................... 14 Document 对象的常用方法 ........................................................................................... 14
1word 格式支持编辑,如有帮助欢迎下载支持。