Web前端学习——JavaScript

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

新老客户大回馈,云服务器低至5折

一、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
获取匹配数据



 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:better-scroll 上拉加载,下拉刷新(解决移动端长页面卡顿)

下一篇:Code Kata:超级偶数数列 javascript实现