笔记-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中的面向对象,妈蛋 一脸萌比啊.还好有大神.让 ...
随机推荐
- nginx的负载均衡配置
1.下载nginx的压缩包,可以去官网下载 2.解压缩,可以看到其中有个conf的文件夹,在该目录中,nginx.conf配置文件就是核心配置文件 3.默认配置 #user nobody; worke ...
- vue 实现todolist，包含添加，删除，统计，清空，隐藏功能
vue 实现todolist,包含添加,删除,统计,清空,隐藏功能 添加:生成列表结构(v-for+数组).获取用户输入(v-model).通过回车新增数据(v-on+.enter) 删除:点击删除指 ...
- Go_runtime包
package main import ( "fmt" "runtime" "time" ) //写在init函数里,main函数运行之前就 ...
- MBA 报考
1. 作者:MBA薛老师链接:https://www.zhihu.com/question/277811289/answer/397083199来源:知乎著作权归作者所有.商业转载请联系作者获得授 ...
- RedHat7.0 网络源的配置
RedHat7.0 yum源的配置 写这篇随笔的目的 为了记录自己的操作,能够为以后的再次配置提供参考 因为网上的教程都有些年代了,为了方便其他同学方便配置 提高下自己的写作水平 参考资料 RedHa ...
- Java 线程高级
1.volatile关键字:当多个线程操作共享数据时,可以保证内存中的数据可见,相较于syncronized是一种较为轻量级的同步策略, 注意:1.volatile不具有“互斥性” 2.volatil ...
- 吴裕雄 PYTHON 神经网络——TENSORFLOW 单隐藏层自编码器设计处理MNIST手写数字数据集并使用TensorBord描绘神经网络数据
import os import numpy as np import tensorflow as tf import matplotlib.pyplot as plt from tensorflow ...
- MFC程序加打印（使用控制台）
对于MFC界面编程,在调试过程常常希望时刻知道程序的运行状态,可以使用弹窗程序来进行显示,但这种操作非常的麻烦,因此可以考虑使用控制台程序,在控制台程序中添加输出信息.方法如下: 在stdafx.cp ...
- 正则去掉 html标签
var htmlStr='<p class="cjk" style="margin-bottom: 0cm; line-height: 16px;"> ...
- 计算机二级-C语言-程序填空题-190110记录-文件写入与文件读出显示
//给定程序功能是:从键盘输入若干行文本(每行不超过80个字符),写到文件myfile4.txt中,用-1(独立一行)作为字符串输入结束的标志,然后将文件的内容读到显示在屏幕上.文件的读写分别由自定义 ...