笔记-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中的面向对象,妈蛋 一脸萌比啊.还好有大神.让 ...
随机推荐
- C++子类虚函数表指针
最近看剑指offer,记录一下 #include <iostream> #include <string> #include <cctype> #include&l ...
- oracle 唯独测试视图
--建立用户分配权限 create user groper identified by groper / grant connect,resource to groper / grant create ...
- Springboot 中AOP的使用
面向切面编程(Aspect Oriented Programming) 是软件编程思想发展到一定阶段的产物,是面向对象编程的有益补充.AOP一般适用于具有横切逻辑的场合,如访问控制.事务管理.性能检测 ...
- redis 字符串操作
redis 字符串创建SET操作 127.0.0.1:6379> set number "10086" OK 127.0.0.1:6379> set book &quo ...
- Jmeter_选项_函数助手_RandomString的用法
1.用处:测试账户注册可以通过随机生成数实现,而不需要Excel手动输入, 缺点:随机生成数可能会重复 优点:不需要使用CSV config 或者excel ,txt格式 2.举例:之前我们通过CSV ...
- 【MySQL】完整性约束
" 目录 not null default unique 单列唯一 联合唯一 primary key 单列主键 复合主键 auto_increment 步长与偏移量 foreign key ...
- 使用SSH客户端远程登录Linux主机
使用SSH客户端远程登录Linux主机(可替代samba.ftp服务) . Linux系统起初就是为多用户而产生的,可以允许多个用户同时登录linux主机各自进行操作,如图1所示: 图1 SSH(Se ...
- HDFS的常用命令
一.常用命令 二.其他命令
- Ubuntu国内镜像
编辑文件:sudo vim /etc/apt/sources.list 全部替换为:如下根据需要替换一个即可,修改保存后记得要执行更新软件包列表命令: sudo apt-get update 一.清华 ...
- dapper基本操作
https://www.cnblogs.com/vichin/p/9289969.html