Web前端学习——JavaScript

2018-06-24 00:58:56来源：未知阅读 ()

一、JavaScript介绍
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
二、JavaScript使用
1、JavaScript脚本定义
(1)head标签内定义

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert("警告");
</script>
</head>

(2)head标签内引入

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js01.js">
    </script>
</head>

(3)body标签内部末尾

<body>
    xxx
    <script src="js01.js">
    </script>
</body>

2、JavaScript注释
(1)单行注释
   //
(2)多行注释
   /* xxx */
3、JavaScript常用数据类型
(1)变量声明
   全局变量定义：name='Tom'
   局部变量：      var name='Tom'
(2)数字类型
   a=18;
   age="18"
   parseInt(age);       ##转化为整数类型
   parseFloat(age);   ##转化为浮点数类型
(3)字符串类型
   name="Tom"
   a.charAt(1)           ##根据下标取字符串值,0表示第一个字符
   a.substring(1,3)   ##获取字符串,起始结束为止,0表示第一个字符，范围是[m,n)，即m=<name<n
   a.length           ##获取字符串长度
   a.trim()           ##移除空白
   a.trimleft()       ##移除左侧空白
   a.trimright()       ##移除右侧空白
   a.concat(value,...)   ##字符串拼接
   a.indexOf(sub,start)##子序列位置，正数
   a.lastIndexOf(sub,start)##子序列位置，倒数
   a.slice(start,end)   ##切片
   a.toLowerCase()       ##转换为大写
   a.toUpperCase()       ##转换为小写
   a.split(delimiter,limit)   ##分隔
   a.search(regexp)   ##从头开始匹配，返回匹配成功的第一个位置(g无效)
   a.match(regexp)       ##全局搜索,如果正则中有g表示找到全部，否则只知道第一个
   a.replace(regexp,replace)##替换，有g替换所有，否则只替换第一个，$数字：匹配的第n个组内容，$&当前匹配的内容,$`：位于匹配子串左侧的文本
(4)布尔类型
   true
   false
(5)数组
   a=[1,'a','','tom']
   a.length           ##数组长度
   a.splice(n,0,value)   ##从指定位置插入value
   a.splice(n,1,value)   ##从指定位置替换value
   a.splice(n,1)       ##从指定位置删除value
   a.slice(m,n)       ##从指定位置切片
   a.join(sep)           ##数组值按照指定分隔符拼接成字符串
   a.concat(val,...)   ##对数组元素进行排序
   a.sort()           ##对数据元素进行排序

(6)字典
   a={'k1':'v1','k2':'v2'}

4、常用语法
(1)函数定义语法
a.普通函数：

function fname(){
函数体
}
b.匿名函数
fsetInterval(function(){
console.log(123);
},5000)

c.自执行函数

(2)if语法
   if(条件){

   }else if(条件){

   }else if(条件){

   }else{

   }

   ==：非严格意义等号，1=="1"为true
   ===:严格意义等号，1==="1"为false
   !=:不等号
   &&:逻辑与
   ||:逻辑或

name='1' ;
switch(name){
case '1':
console.log(123);
case '2':
console.log(456);
default:
console.log(789);

}

<script>
var name='1';
switch (name){
case '1':
age=123;
console.log(age)
case '2':
age=456;
console.log(age)
default:
age=999;
console.log(age)


}
</script>

(3)for循环

   1)语法
   a=[1,'a','','tom']
   for(var item in a){
       console.log(a[item]);
   }
   2)语法
   a=[1,'a','','tom']
   for(var i=0;i<a.length;i++){
       console.log(a[i]);
   }

5.其他常用函数
(1)计时器

<body>
    <script >
        setInterval("alert('警告')",5000)
    </script>
</body>

(2)console日志记录

<body>
    <script >
        function  f01() {
            console.log(123)
        }
        setInterval("f01()",5000)
    </script>
</body>

(3)json和字符串转换

JSON.stringify(li) ##将数组转化为字符串
JSON.parse(li) ##将字符串转化为数组
(4)转义

encodeURL() ##URL中转义的字符
decodeURL() ##URL中未转义的字符
encodeURLComponent() ##URL中组件未转义的字符
decodeURLComponent() ##URL中组件转义的字符
escape() ##对字符串转义
unescape() ##给转义字符串解码
URLError() ##给URL编码和解码方法抛出
(5)eval
javascript中eval是可以编译代码，也可以获取返回值
(6)时间
var dt=new Date()
dt.getxxx ##获取时间
dt.setxxx ##设置时间
(7)确认框
confirm('输入信息内容')

(8)重定向
location.href='url' ##重定向
location.reload() ##重新加载
location.href ##获取URL
(9)事件
事件调用有两种方式：
a.一种是通过直接标签绑定
onclick='xx()'
b.先获取Dom对象，然后进行绑定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus

onclick
onblur
onfocus

6、Dom间接选择器
(1)找到标签
a.直接查找
获取单个元素：document.getElementById('i1')
获取多个元素：document.getElementsByTagName('div')
document.getElementsByClassName('c1')
document.getElementsByName('name')
b.间接查找
tag=document.getElementById('i1')

parentElement ##父标签元素
children ##子标签元素
firstElementChild ##第一个子标签元素
lastElementChild ##最后一个子标签元素
nextElementSlibling ##下一个兄弟标签元素
previousElementSlibling ##上一个兄弟标签元素

(2)操作标签
a.innerText
获取标签中的文本内容：标签.innerText
标签内容重新赋值：标签.innerText=''
b.className
tag.className ##直接整体操作
tab.className.add('样式名') ##添加指定样式
tab.className.remove('样式名') ##删除指定样式

7、作用域
(1)作用域范围
a.其他语言：以代码块作为作用域
public void Func(){
if(1==1){
string name='Java';
}
console.writeline(name);
}
Func(); ##此时执行报错，因为name是局部变量，其作用域为{}内
b.python:
def func():
if 1==1:
name='tom'
print(name)

func() ##此时执行成功，因为Python作用域是函数本身
c.javascript
def func(){
if (1==1){
name='tom';
}
console.log(123);
}

func() ##此时执行成功，因为javascript作用域是函数本身
##函数作用域存在作用域链中，并且也是在创建之前被声明
##函数局部变量提前声明
8、JavaScript面向对象
function fo(n){
this.name=n;
}
var obj=new fo('Tom');

a.this 代指对象(python self)
b.创建对象时,new 函数名，表示类实例化
9、JS正则匹配
/../ 用于正则匹配
/../g 全局匹配
/../i 忽略大小写匹配
/../m 多行匹配
(1)test
判断字符串是否符合规定的正则，只要含有匹配内容就返回true
req=/^d+$/
req=/\bJava\b/g
(2)exec
获取匹配数据