【教程】javascript&浏览器对象入门教程

原创 2013年12月05日 15:02:15
* 此教程是头一章 估计我以后也不想写什么第二章了
* 需要的基础知识:javascript语法和常用对象
* 大神勿喷

上次讲完了封包 这回我们再说说javascript
javascript是一种弱类型的客户端脚本语言 在html文本返回后在浏览器上执行
javascript除了基本的运算之外 还可以通过html dom控制浏览器的某些动作 例如向编辑框输入文本 或者点击按钮等等 以达到用代码代替手动操作的目的
同样他也是网页填表的基础

好了 废话不多说 我们来做个演示 比如我要在百度搜索“飞龙”这个词
我们要做的是 1.先在搜索框里面输入飞龙 2.然后再点击“百度一下”按钮
我们注意 这两个动作分别涉及到两个控件 文本框和按钮
学过编程的人都知道 这两个动作在程序里面实现很简单
无非就是Textbox.Text = "飞龙" 之后Button.click()
那是因为在程序中你可以直接访问到控件的对象 但是网页中不行
网页中 html控件大多数以id作为标识的

那我们首先要把id找出来
我们打开chorme 右键点击审查元素 可以看到 底下的窗口中 html源文本按照tag被分为一行一行的


我们可以看到 鼠标移上去 上面会有阴影提示你是网页的哪个部分
于是可以迅速定位到你要找的控件


一开始可能一个区域都有阴影 我们可以点击左侧的小箭头 一层一层找


找到编辑框:


按钮:


好 控件的声明已经找到了 然后光有id也不成啊 我们要生成这个两个控件的对象
ctrl+shift+J打开控制台 输入:

var txt = document.getElementById("kw");
var btn = document.getElementById("su");

这样就成功取到了
我们可以看到 编辑框位于两个div一个form下 按钮位于两个div一个form以及一个span下面
也就是说 无论它有多下面 用这种方法都能取到
注意 输入的时候如果要换行 请用shift+enter 直接按enter会提交脚本

然后就是模拟动作了
首先是输入文本 input标签的编辑框 以及input标签的submit按钮 文本属性都是value
按钮的点击事件一般是button.click() 表单的提交事件一般是form.submit()
那我们换行 接着输入:

txt.value = "飞龙";
btn.click();

回车 于是就成功了


当然 你也可以把自己代码间的回车取掉 前面加上javascript: 存成书签用于经常使用

javascript:var txt = document.getElementById("kw");var btn = document.getElementById("su");txt.value = "飞龙";btn.click();

变式提升

通过js脚本 将"百度一下"按钮上面的文字改成"飞龙"
答案:

var btn = document.getElementById("su");
btn.value = "飞龙";
版权声明:License: CC BY-NC-SA 4.0

相关文章推荐

给初学者提供最简单的JavaScript入门教程

 认识实物应该从最简单的一面去入手,JavaScript教程网给初学者提供最简单的JavaScript入门教程。 每一门语言的学习都是从HelloWorld开始的,我今天也遵循这个原则吧!...
  • mynote
  • mynote
  • 2014-09-01 17:49
  • 1244

百度地图JavaScript开发入门教程

自从openGPS.cn小编在2011年的一个WEB项目中用到了百度地图做售楼数量分布显示功能之后,就一发不可收拾,在位置服务的领域一路走了5年之久。今天难得时间充裕,给WEB开发者分享一点自己的经验...

javascript发展史和入门教程

5 Javascript入门 5.1 引入 html:负责网页结构 css: 负责网页美观 javascrip...

Javascript WebSocket使用实例介绍(简明入门教程)

http://www.jb51.net/article/49060.htm 网络套接字是下一代WEB应用程序双向通信技术,它是基于一个独立的socket并且需要客户端浏览器支持HTML5 一旦...

【Unity3D入门教程】使用C#脚本控制游戏对象

使用C#脚本控制游戏对象,是一项必备的基本技能。Unity3D可以使用的脚本有C#和javascript等。我们主要讲注意力集中在C#上。本文将会介绍怎样使用脚本控制场景中的游戏对象。
  • zzlyw
  • zzlyw
  • 2017-01-07 16:47
  • 8569

PHP面向对象(OOP)编程入门教程

转载自:http://www.cnblogs.com/phpgo/p/5658145.html 面向对象编程(OOP)是我们编程的一项基本技能,PHP5对OOP提供了良好的支持。如何...

Python快速入门教程2:Python 面向对象

第2部分:Python 面向对象 1、类与对象 1.1 定义类     通常你需要在单独的文件中定义一个类     [root@hadron python]# vi Employee.py ...

【PHP面向对象(OOP)编程入门教程】4.如何抽象出一个类?

对于面向对象,看过很多资料,个人觉得大多都讲得不是很清楚,要反复揣摩才能逐渐明白,也许是我的理解能力有问题。但我发现这哥们儿写得比较到位,一看就通俗易懂。比那些个所谓的国内技术权威专家出的书要强很多。...

【Unity3D入门教程】Unity3D界面介绍及游戏对象基本操作

本文介绍了Unity3D界面及游戏对象基本操作。
  • zzlyw
  • zzlyw
  • 2017-01-06 17:16
  • 3734

Python入门教程--类和对象(二)

Python其实也被称为面向对象的预研,和C++/Java一样,具有面向对象预研的多态、封装、方法和特性等概念。关乎面向对象的概念这里不讲述,就看看Python里的类和对象的定义和使用相关的知识。 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)