笔记-javascript
笔记-javascript
1. 简介
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
2. 使用
2.1. 开始
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript：
如果把<script>标签放到body中，浏览器会在页面加载时执行；
2.2. javascript函数和事件触发运行机制
上面例子中的 JavaScript 语句，会在页面加载时执行，但使用js主要目的是动态改变网页内容，而不仅仅是加载时；
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
我们可以在 HTML 文档中放入不限数量的脚本，脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
较好的实践是把函数统一放入 <head> 部分中，或者放在页面底部。
也可以把脚本放到外部文件中，文件扩展名为.js；
当然这样需要进行说明，在 <script> 标签的 "src" 属性中设置 .js 文件：
案例：
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
3. 语法
3.1. 基础语法
JavaScript 对大小写是敏感的；
JavaScript 会忽略多余的空格；
分号用于分隔 JavaScript 语句；
可以在文本字符串中使用反斜杠对代码行进行换行
document.write("Hello \
World!");
这样的代码是允许的；
3.2. 注释
3.2.1. 单行注释
单行注释以 // 开头
// 输出标题：
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落：
document.getElementById("myP").innerHTML="This is my first paragraph.";
var x=5; // 声明 x 并把 5 赋值给它
var y=x+2; // 声明 y 并把 x+2 赋值给它
这样也是可以的；
3.2.2. 多行注释
多行注释以 /* 开始，以 */ 结尾。
下面的例子使用多行注释来解释代码：
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
3.3. 变量及变量声明
var x=2;
var y=3;
var z=x+y;
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
声明（创建） JavaScript 变量
var carname;
3.4. 数据类型
与python类似，javascript变量是动态类型的；
- 字符串：
- 数字：只有一种类型，可以带小数点，也可以不带；
var x= 34; var y=34.00;
- 布尔：true,false
- 数组：
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者：
var cars=new Array("Audi","BMW","Volvo");
或者：
var cars=["Audi","BMW","Volvo"];
- 对象：
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"Bill", lastname:"Gates", id:5566};
对象属性寻址方式：
name=person.lastname;
name=person["lastname"];
3.4.1. 声明变量类型
声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
3.4.2. 变量作用域，生存周期
与python类似，不解释
3.5. 函数
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
这里是要执行的代码
return
}
3.6. 流程控制
- if…else
- switch #类似c下的case
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
- 循环for,while,break,
3.7. 异常处理
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
4. javscript HTML DOM
4.1. 查找元素
4.1.1. 通过id查找元素
本例查找 id="intro" 元素：
var x=document.getElementById("intro");
4.1.2. 通过标签名查找 HTML 元素
本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
4.2. 修改内容
4.2.1. document.write()
document.write() 可用于直接向 HTML 输出流写内容。
案例
<script>
document.write(Date());
</script>
输出：上述语句输出日期及时间
4.2.2. innerHTML
修改元素内容
document.getElementById("p1").innerHTML="New text!";
4.2.3. 改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";
4.2.4. 改变样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
案例：
document.getElementById("p2").style.color="blue";
4.3. HTML DOM事件
4.3.1. 对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
4.3.2. HTML 事件属性
如需向 HTML 元素分配 事件，您可以使用事件属性。
实例
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">点击这里</button>
4.3.3. 使用 HTML DOM 来分配事件
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
实例
向 button 元素分配 onclick 事件：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()}
4.3.4. 事件说明
- 1. onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
- 2. onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例
<input type="text" id="fname" onchange="upperCase()">
- 3. onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
- 4. onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
- onfocus
获得焦点时触发事件；
------附录------
5. javascript库
常用的javascript库/框架有
jQuery
Prototype
MooTools
jQuery
jQuery 是目前最受欢迎的 JavaScript 框架。
它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）
6. JAVASCRIPT/DOM对象
本章节简要列出JAVASCRIPT/DOM对象
6.1. JavaScript 对象参考手册
Array，Boolean，Date，Math，Numbe，String，RegExp，Global
6.2. Browser 对象参考手册
Window，Navigator，Screen，History，Location，
6.3. HTML DOM 对象参考手册
本参考手册描述每个对象的属性和方法，并提供实例。
Document
Anchor
Area
Base
Body
Button
Canvas
Event
Form
Frame
Frameset
IFrame
Image
Input Button
Input Checkbox
Input File
Input Hidden
Input Password
Input Radio
Input Reset
Input Submit
Input Text
Link
Meta
Object
Option
Select
Style
Table
TableCell
TableRow
Textarea
笔记-javascript的更多相关文章
- RX编程笔记——JavaScript 获取地理位置
RX编程笔记——JavaScript 获取地理位置 2016-07-05
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
- 慕课笔记-JavaScript正则表达式
目录 慕课笔记-JavaScript正则表达式笔记 概述 RegExp对象 修饰符 元字符 字符类 范围类 预定义类 预定义字符 边界 量词 贪婪模式 分组 或(使用竖线表示) 反向引用 忽略分组 前 ...
- 笔记-JavaScript与HTML DOM
引用源:https://www.cnblogs.com/propheterLiu/p/5966791.html 笔记-JavaScript和HTML DOM 区别: javascript JavaSc ...
- 前端学习实践笔记--JavaScript深入【3】
这章主要讨论闭包和原型,以及面向对象和继承. 闭包 闭包充分利用了JS里面作用域的概念,作用域的好处是内部函数可以访问定义它们的外部函数的参数和变量.使用闭包主要是为了读取函数内部的变量或者将函数内部 ...
- 前端学习实践笔记--JavaScript深入【1】
这一年中零零散散看过几本javascript的书,回过头看之前写过的javascript学习笔记,未免有点汗颜,突出“肤浅”二字,然越深入越觉得javascript的博大精深,有种只缘身在此山中的感觉 ...
- [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
- 昼猫笔记 JavaScript -- 作用域技巧!!
简单理解 var zm = function (x) { var code = 'bb' return code }; 学过js的老哥们都知道,当这样简单的一个函数进入浏览器,浏览器开始解释代码,会将 ...
- HTML 学习笔记 JavaScript（面向对象）
现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让 ...
随机推荐
- Mysq的安装
1.安装包下载 2.安装教程 (1)配置环境变量 (2)生成data文件 (3)安装MySQL (4)启动服务 (5)登录MySQL (6)查询用户密码 (7)设置修改用户密码 (8)退出 1.安装包 ...
- wampserver apache 403无权限访问 You don't have permission to access /index.html on this server
今天接到要求 需要配置一下https 折腾好久 最后好还遇到了权限不够的问题 最后解决方案如下 我这边补充一下我的方法 我的apache是 2.4.23 版本 是由 wampserver集成的 在 h ...
- 数据库备份与还原：mysqldump,source
*数据库备份* 1.备份方法一:适用于myslam表: 直接将tb_name.frm.tb_name.myd.tb_name.myi三个文件保存,备份即可. 需要的时候直接解压到,移动到相应的数据库目 ...
- eosio 编译与部署
1. 名词解释 创世节点(BIOS) 用于创建初始区块,加载基础合约,供其它节点同步连接. 矿工节点(BP) 主要用于生产同步区块,计算合约产生的费用归矿工账号所有. 查询节点 不产生区块,同步区块信 ...
- 安卓基础（AndroidViewModel）
今天学习了AndroidViewModel,但是我根据视频上讲解,根据所讲用例,在添加依赖得时候一直报错,后来我请教大佬,他告诉我说是,因为网络得问题,国外得一些依赖有可能下不下来,所以可以下载阿里云 ...
- Git创建合并和删除分支
创建并切换分支 git checkout命令加上-b参数表示创建并切换分支,以下为创建并切换到dev分支: 相当于先通过 $ git branch dev 命令创建dev分支,然后 $ git che ...
- Smart License
思科启动了通过构建思科智能软件管理器门户来简化客户许可管理的计划. 它可以帮助客户了解他们购买的许可证以及他们使用的许可证. 其他各种思科产品已经启用Smart Enabled,随着此版本(我这里学习 ...
- 总结 jion,group join 基于方法的查询与查询表达式 对比
数据源: 代码: using (tempdbEntities context = new tempdbEntities()) { #region 基于方法的查询 Console.WriteLine(& ...
- vscode 提示 Running save participants 无法保存文件
今天vscode提示一直在running save participants...中,无法保存文件 control + shift + p打开面板后,输入Reload with extensions ...
- Python爬虫老是被封的解决方法【面试必问】
在爬取的过程中难免发生 ip 被封和 403 错误等等,这都是网站检测出你是爬虫而进行反爬措施,在这里为大家总结一下 Python 爬虫动态 ip 代理防止被封的方法. PS:另外很多人在学习Pyth ...