前端学习之-- JavaScript

JavaScript笔记

参考：http://www.cnblogs.com/wupeiqi/articles/5602773.html

javaScript是一门独立的语言，游览器都具有js解释器

首先html head头部包含如下：
<meta charset="UTF-8">
<title>Title</title>
<style>css代码</style>
<script>js 代码</script>
注意：每行js代码后要加：分号，因为当所有js代码压缩到一行的时候，是通过分号进行区分的，也会省空间和容量。但是请注意，一般js都是写在body标签的结尾处。

介绍js的存在形式；
1：head中
<script>
//javascript代码
alert('123');
</script>

js代码注释：但行注释： // 多行注释：/* ....*/

变量说明：
name = 'jack' #全局变量
var name = 'jack' # 局部变量
<script>
name = 'jack'; 全局变量
function fun() {
var name = jack 局部变量
}
</script>
写js代码：
－　直接写在html文件中
－　临时测试：在游览器的终端(console)

实例讲解：实现一个简单的弹窗

     <body>

     <input type="text" id="user">

     <input type="button" onclick="getdata();" value="提交">

     <script>

         function getdata() {

             var i = document.getElementById('user') # 从整个页面里查找id为user的标签

             alert(i.value);

         }

         age = '18'

         i = parseInt(age);

         j = parseFloat(age);

     </script>

     </body>

基本数据类型：
1：数字
age = '18'
i = parseInt(age); # 将字符串转换为数字
j = parseFloat(age); #转换为浮点数
在页面右击－》审查元素－》ｃｏｎｓｏｌｅ里可以手工输入测试
2：字符串
- obj.length 长度重点
- obj.trim() 移除空白
- obj.trimleft() / trimRight()
- obj.charAt(n) 返回字符串中的第n个字符重点
- obj.concat(value,...) 拼接
- obj.indexOf(substring,start) 子序列位置（从左到右提取指定字符第一次出现的索引位置）
- obj.lastIndexOf(substring,start) 子序列位置（从左到右提取指定字符最后出现的索引位置）
- obj.substring(from,to) 根据索引获取子序列重点
- obj.slice(start,end) 切片
- obj.tolowerCase() 大写
- obj.toUpperCase() 小写
- obj.split(delimiter,limit) 根据指定字符分割生成一个列表
- obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置（g无效）
- obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个
- obj.replace(regexp,replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配值，
$数字：匹配的第n个组内容
$&：当前匹配的内容
$`：位于匹配子串左侧的文本。

举例：
a = 'jack'
"jack"
a.charAt(1)
"a"

3：列表（数组）：a = [11,22,33]
- obj.length 数组的大小
- obj.push(ele) 尾部追加元素
- obj.pop() 尾部获取一个元素
- obj.unshift(ele) 头部插入元素
- obj.shift() 头部移除元素
- obj.splice(start<起始的位置>,deleteCount<删除的个数>,value<插入的值>...) 插入，删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
- obj.slice() 切片
- obj.reverse() 反转
- obj.join(sep) 将数组元素连接起来以构建一个字符串
- obj.concat(val,...) 连接数组
- obj.sort() 对数组元素进行排序
4：字典
和python类似
5：布尔类型
使用小写：true,false

条件语句：
if (条件){
}else if(条件){
}else if(条件){
}else{}

if (1==1){} #值相等即可
if (1!=1){} #值不相等
if (1===1){} # 值和类型都要相等
if (1!==1){} #值和类型不相等
if (1==1 &&/|| 2==2) # &&->and ||->or
条件语句第二种写法：
name = 1
switch(name){
case;'1'; # 当name为1的时候，执行这里
console.log(123)
case:'2': # 当name为2的时候，执行这里
console.log(456);
default: # 默认执行
console.log('999')

for循环：（2种）
1：循环时，循环的元素是索引值
写法一：
a= [11,22,33,44]
for (var item in a){
console.log(item); # 打印的是索引值，使用a[item]才能打印值
}

a= {'k1':'v1','k2':'v2}
for (var item in a){
console.log(item); # 打印的是key，使用a[item]才能打印值
}
写法二：
for (var i=0;i<10;i++){}
a = [11,22,33,44]
for (var i=0;i<a.length;i=i+1){
console.log(a[i])
}
注意：这个循环方法不支持字典
2：第二种循环，用法和python一样
while (条件){
循环体
}

循环也存在：break,continue

举例continue / break 使用：
for (var item in [11,22,33] {
console.log(item)
continue; 终止本次循环
}
for (var i=0;i<10;i++){
cosole.log(i)
break; 结束本循环
}

函数分类：3种：
第一种：普通函数
　　function 函数名(形参){
　　　　函数体
　　}
　　函数名(实参)

举例：
function func(arg){
　　return arg+1
　　}
var result = func(1)
console.log(result)

第二种：匿名函数
setInterval(执行的函数，5000)
setInterval(function(){
　　console.log(123)
　　},5000)

第三种：自执行函数：程序由上到下执行到这里时候，会自动创建并执行函数。
(function(arg形参){
　　console.log(arg)
　　})(实参)

序列化
JSON.stringify()：将对象转换为字符串
JSON.parse()：将字符串转换为对象类型
举例：将列表转换为字符串
　　l1=[11,22,33,44] # 首先定义一个数组
　　s = JSON.stringify(l1) # 将数组转换为字符串
　　输出："[11,22,33,44]"
　　new = JSON.parse(s) # 将字符串转换为数组
　　输出：(4) [11, 22, 33, 44]
　　经常用在与后台进行通信

转义：（对特殊字符和中文转义）
decodeURI()：URI中来转义的字符（解码，将uri中的中文转为可看懂的）
decodeURIComponent()：URI组件中的来转义的字符（解码）
encodeURI()：URI中的转义字符（编码，将uri中的中文转为%等字符串）
encodeURIComponent()：将uri中的中文，://这样的字符全部进行转义
以上举例说明：
　　url = 'https://www.sogou.com/web?query=zh中文' # 定义一个url
　　new_url = encodeURI(url) # 第一种编码
　　输出：https://www.sogou.com/web?query=zh%E4%B8%AD%E6%96%87 # 只中文进行了编码
　　encodeURIComponent(url) #第二种编码
　　输出：https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3Dzh%E4%B8%AD%E6%96%87"　# 将https后的://和中文都进行了编码
　　解码相对上面的也是2种方法
　　decodeURI(new_url) # 进行解码
　　https://www.sogou.com/web?query=zh中文 # 输出解码后的url

escape()：对字符串转义
unescape()：给转义字符串解码
URIError：由URI的编码和解码方法输出

eval：相当于表达式和执行代码的集合

时间：
Date对象用来操作时间
var d = new Date() # 表示创建一个对象，（d里面就封装了当前的时间）
d.get... 获取 / d.set.... 设置
获取当前时间使用： d.方法
获取分钟：d.getMinutes()
修改分钟：
n = d.getMinutes() + 4 （获取新的时间）
d.setMinutes(n) （设置为新的时间）

作用域（最重要）：函数未执行前首先要从上到下进行解释（过程是只对函数生成作用域）
结论：
1：js以函数为作用域

举例：javascript：以函数为作用域

 function func(){

     if(1==1){

         name='jack';

     }

     console.log(name);

 }

 func()

2：函数的作用域在函数未被调用之前，已经创建

举例：以下这个函数没有执行，但是已经创建

 function func(){

 if(1==1){

     name='alex';

 }

 console.log(name);

 }

3：函数的作用域存在作用域链（函数套函数），并且也是在被调用之前创建

 name = 'jack';  # 优先级最低

 function func(){

     var name = 'vivi';  # 优先级3

     function inner(){

         var name = 'bill'; # 优先级1

         console.log(name);

     }

     var name = 'toni';  #优先级2

     reuturn inner;

 }

 var ret = func()

 ret()

 以上作用域链执行顺序解释如下：进行全局解释 name=jack,生成func作用域，执行ret=func()这里，开始执行函数

 func，首先name=vivi,然后执行name=toni，最后返回inner函数给ret，这个时候name=toni,最后执行ret()函数

 相当于执行inner函数，执行name=bill，并且打印此变量,注意：当name=bill此变量不存在时候，则name=toni

 所以变量赋值顺序是：name=jack(优先级最低) , name=vivi , name=toni , name=bill(优先级最高)

 说明：作用域和python一样，优先级都是从内到外。

4：函数内部局部变量声明要提前
举例：

 function func(){

     console.log(xx) 解释过程中xx 为undefined

     var xx = 'jack' 执行到这里才声明变量

 }

 func() 执行函数

支持面向对象：
function foo(){
　　this.name = 'jack' # this相当于python 中的self，这里相当于构造方法
　　}
var obj = new foo(); # 实例化用，new 函数() 表示创建了一个对象
obj.name # 打印属性值
1：这里this代指对象（python self)
2：创建对象时：new 函数()
举例：
function Foo(n){
　　this.name = n;
　　this.sayname = function(){
　　console.log(this.name)
　　}
　　}
var obj1 = new Foo('we');
obj1.name
obj1.sayname()
执行：这里obj1就是函数里的this，obj1.name输出为赋予的实参we，然后执行sayname函数，函数内部的this就是对应的obj1，
所以obj1.sayname函数执行的输出this.name值为we
原型：
function Foo(n){
　　this.name = n;
　　}
# Foo的原型
Foo.prototype = {
　　'sayName': function(){
　　console.log(this.name)
　　}
　　}
obj1 = new Foo('we');
obj1.sayName() # 这里从Foo的原型里查找
obj2 = new Foo('we');
obj2.sayName() # 这里从Foo的原型里查找
# 原型存在的好处是，避免重复方法调用浪费内存资源

定时器：
<script>
　　function f1(){ # 定义函数
　　　　console.log(1) # 在console里打印
　　}
　　function fun() {
　　alert('jack')
　　}
//创建一个定时器
//setInterval('执行什么','间隔多少')
setInterval('fun()',2000); //每2秒执行一次
</script>
举例：提取页面的内容
<body>
　　<div id="i1">欢迎老男孩来</div>
</body>
打开页面在console中显示内容：
i = document.getElementById('i1') # 获取id为i1的标签
i.innerText # 提取并显示标签里的内容
content = i.innerText
f = content.charAt(0)
l = content.substring(1,content.length)
new_content = l + f;
i.innerText = new_content;

举例：实现动态跑马灯

 <div id="i1">欢迎老男孩来</div>

 <script>

     function getdata() {

         //根据ID获取指定标签和内容，定义局部变量

         var label_content = document.getElementById('i1');

         // 获取标签内的内容

         var content = label_content.innerText;

         // 获取第0个字符

         var c1 = content.charAt(0);

         // 获取位置1之后的内容

         var c2 = content.substring(1,content.length);

         var c3 = c2 + c1;

         label_content.innerText = c3

     }

     setInterval('getdata()',1000)

 </script>

前端学习之-- JavaScript的更多相关文章

web前端学习：JavaScript学习指南
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...
前端学习之JavaScript
JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Net ...
前端学习之 JavaScript基础
一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...
前端学习笔记-JavaScript
js引入方式: 1.嵌入js的方式:直接在页内的script标签内书写js功能代码. <script type="text/javascript">alert('hel ...
web前端学习(二) javascript对象和原型继承
目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...
【前端学习】javascript面向对象编程(继承和复用)
前言继承,代码复用的一种模式.和其它高级程序语言相比,javascript有点点不一样,它是一门纯面向对象的语言,在JS中,没有类的概念,但也可以通过原型(prototype)来模拟对象 ...
前端学习之JavaScript中的 NaN 与 isNaN
NaN NaN 即 Not a Number ,不是一个数字. 在 JavaScript 中,整数和浮点数都统称为 Number 类型 .除此之外,Number 类型还有一个很特殊的值,即 NaN . ...
前端学习之JavaScript(1)
目录一. JavaScript简介二. 第一个JavaScript代码三. 基本数据类型四. 运算符五. 数据类型转换六. 流程控制七. 常用内置对象八. 函数一. JavaScri ...
前端学习之 JavaScript DOM 与 BOM
一. DOM介绍 1. 什么是DOM? DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的其实就是为了能让js操作html元素而制定的一个规范. DOM就 ...

随机推荐

洛谷 P1955 程序自动分析
题目描述在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3...代表程序中出现的变量,给定n个形如xi=xj或xi≠xj的变 ...
使用JavaScript将当前页面保存成PDF，支持图片和文字的保存
前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件.如果采用屏幕截图的话,默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容. ...
浅谈p值（p-value是什么）
当我们说到p-value时,我们在说什么? “这个变量的p-value小于0.05,所以这个变量很重要” ........ 你真的知道自己在说什么么???这个p-value到底是个什么鬼?为什么小于0 ...
JS怎么创建一个类?
15. JS怎么创建一个类? 方式1 : var obj = new Object(); 方式2 : var obj = {}; 16.JS的typeof返回哪些数据类型? string.number ...
luogu P2865 路障
https://www.luogu.org/problemnew/show/P2865 看到题解好多dijkstra,作为一名钟爱于spfa的蒟蒻看不下去了. 有些spfa要跑两边,代码量要曾长好多( ...
bzoj3336 Uva10572 Black and White
题目描述: 数据范围:2<=n,m<=8 题解: 很明显需要状压.但是怎么压不知道,压什么不知道. 然后从条件下手. 条件1要求黑色在一起白色在一起,记录轮廓线很容易做到. 条件2要求不能 ...
linux php安装ODBC扩展
进入php源码安装目录的ext/pdo_odbc $ sudo /data/apps/php/bin/phpize $ ./configure --with-php-config=/data/apps ...
7. 配置undo表空间
7. 配置undo表空间 undo日志可以存储在一个或多个undo表空间中,无需存储在系统表空间中. 要为MySQL实例配置单独的undo表空间,请执行以下步骤 [重要]: 只能在初始化新MySQL实 ...
第三章：systemverilog文本值和数据类型
1.增强的文本值 2.改进的`define文本替换 3.时间值 4.新的变量类型 5.有符号和无符号类型 6.静态和动态变量(***) 7.类型转换 8.常数增强的文本值(文本赋值增强) 主要是:位 ...
Windows使用Nginx+ffmpeg搭建RTMP服务器
简介Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.nginx-rmtp-module是Nginx服务器的流媒体插件.nginx通过rtmp模块提供r ...

前端学习之-- JavaScript

前端学习之-- JavaScript的更多相关文章

随机推荐

热门专题