java script基础与... java script编程

转载

网猴儿 2023-06-29 21:11:53

文章标签 java script基础与... javascript python json ViewUI 文章分类 Java 后端开发

JavaScript编程语言

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

代码存在形式以及放置的位置

JavaScript存在的形式

<!-- 方式一文件引入 -->
<script src="JS文件"></script>
  
<!-- 方式二页面中直接写 -->
<script>
    Js代码内容
</script>
<!-- 方式一文件引入 -->
<script src="JS文件"></script>
  
<!-- 方式二页面中直接写 -->
<script>
    Js代码内容
</script>

JavaScript放置的位置

HTML的head中
HTML的body代码块底部(推荐)
由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。
建议：非影响整个页面布局的js可以放在body中的最下位置；

例通过输入内容弹出alert框

<body>
    <input type="text" id="user" />
    <input type="button" value="点我" onclick="GetData();">
    <script>
        function GetData() {
            var i = document.getElementById("user")
            alert(i.value);
        }
    </script>
</body>
<body>
    <input type="text" id="user" />
    <input type="button" value="点我" onclick="GetData();">
    <script>
        function GetData() {
            var i = document.getElementById("user")
            alert(i.value);
        }
    </script>
</body>

javascrip变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

<script>
    name = 'seven';         // 全局变量
    function func(){
        var name = "lin";   // var 局部变量
    }
</script>
<script>
    name = 'seven';         // 全局变量
    function func(){
        var name = "lin";   // var 局部变量
    }
</script>

在JavaScript中的注释：

单行 // 
多行 /*包过内容*/
单行 // 
多行 /*包过内容*/

基本数据类型

原始类型

数字
字符串
布尔值

对象类型

"列表"数组
"字典"
....

数字（Number）

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

将其他值转换为数字

parseInt(..)将某值转换成数字，不成功则NaN。

parseFloat(..)将某值转换成浮点数，不成功则NaN。

<script>
    age = "18";           //定义一个变量的字符串 age = "18"
    i = parseInt(age);    //将字符串转化为数字
    z = parseFloat(age);  //将字符串转换为小数类型Float
</script>
<script>
    age = "18";           //定义一个变量的字符串 age = "18"
    i = parseInt(age);    //将字符串转化为数字
    z = parseFloat(age);  //将字符串转换为小数类型Float
</script>

特殊值:

NaN,非数字.可使用 isNaN(num) 来判断。

Infinity，无穷大.可使用 isFinite(num) 来判断。

字符串（String）

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。

1.定义字符串并通过下标取出相应的值

a="zhangsan"
"zhangsan"
a.charAt(0)
"z"
a.charAt(1)
"h"
a.charAt(2)
"a"
a="zhangsan"
"zhangsan"
a.charAt(0)
"z"
a.charAt(1)
"h"
a.charAt(2)
"a"

2.字符串下标的截取(顾头不顾尾)

a="zhangsan"
a.substring(0,5)
"zhang"
a.substring(0,3)
"zha"
a="zhangsan"
a.substring(0,5)
"zhang"
a.substring(0,3)
"zha"

3.获取字符串的总长度;

a="zhangsan"
a.length
8
a="zhangsan"
a.length
8

4.根据指定的字符串(空格),对内容切割为列表split;

a="zhang san li si"
"zhang san li si"
a.split(" ")
(4) ["zhang", "san", "li", "si"] 
// 获取切割的前2个值
a.split(" ",2)
(2) ["zhang", "san"]
a="zhang san li si"
"zhang san li si"
a.split(" ")
(4) ["zhang", "san", "li", "si"] 
// 获取切割的前2个值
a.split(" ",2)
(2) ["zhang", "san"]

字符串其他常见方法:

obj.length                           长度
 
obj.trim()                           移除空白
obj.trimLeft()
obj.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个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $'：位于匹配子串右侧的文本
                                     $$：直接量$符号
obj.length                           长度
 
obj.trim()                           移除空白
obj.trimLeft()
obj.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个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $'：位于匹配子串右侧的文本
                                     $$：直接量$符号

布尔类型（Boolean）

布尔类型仅包含真假，与Python不同的是其首字母小写

a=true
true
a=false
false
a=true
true
a=false
false

布尔类型判断的符号

== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且

数组

JavaScript中的数组类似于Python中的列表

1.定义数组

a = [11,222,333,444]
(4) [11, 222, 333, 444]
a = [11,222,333,444]
(4) [11, 222, 333, 444]

2.获取数组的长度length

a = [11,222,333,444]
a.length
4
a = [11,222,333,444]
a.length
4

3.插入、删除或替换数组的元素splice

a = [11,222,333,444]
(4) [11, 222, 333, 444]
// a.splice(起始位置,删除1个数,要插入的值)
a.splice(1,1,99)
[222]
a
(4) [11, 99, 333, 444]
// a.splice(起始位置,删除0个数,要插入的值)在指定的位置增加值
a.splice(1,0,888)
[]
a
(5) [11, 888, 99, 333, 444]
// a.splice(起始位置,删除1个数)只指定删除个数,不指定增加值
a.splice(1,1)
[888]
a
(4) [11, 99, 333, 444]
a = [11,222,333,444]
(4) [11, 222, 333, 444]
// a.splice(起始位置,删除1个数,要插入的值)
a.splice(1,1,99)
[222]
a
(4) [11, 99, 333, 444]
// a.splice(起始位置,删除0个数,要插入的值)在指定的位置增加值
a.splice(1,0,888)
[]
a
(5) [11, 888, 99, 333, 444]
// a.splice(起始位置,删除1个数)只指定删除个数,不指定增加值
a.splice(1,1)
[888]
a
(4) [11, 99, 333, 444]

4.切片(顾头不顾尾)

a
(4) [11, 99, 333, 444]
a.slice(1,3)
(2) [99, 333]
a
(4) [11, 99, 333, 444]
a.slice(1,3)
(2) [99, 333]

5.join在JS中是给数组按照指定的方式拼接(python中是给字符串使用的)

a
(4) [11, 99, 333, 444]
a.join("-")
"11-99-333-444"

6.将2个数组拼接到一起;

a=[11, 99, 333, 444]
(4) [11, 99, 333, 444]
b=["aa","bb","ccc","dddd"]
(4) ["aa", "bb", "ccc", "dddd"]
a.concat(b)
(8) [11, 99, 333, 444, "aa", "bb", "ccc", "dddd"]
a=[11, 99, 333, 444]
(4) [11, 99, 333, 444]
b=["aa","bb","ccc","dddd"]
(4) ["aa", "bb", "ccc", "dddd"]
a.concat(b)
(8) [11, 99, 333, 444, "aa", "bb", "ccc", "dddd"]

常见功能：

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( )         对数组元素进行排序
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( )         对数组元素进行排序

字典

1.定义字典

a={"k1":"v1","k2":"v2","k3":"v3"}
{k1: "v1", k2: "v2", k3: "v3"}
a.k1
"v1"
a={"k1":"v1","k2":"v2","k3":"v3"}
{k1: "v1", k2: "v2", k3: "v3"}
a.k1
"v1"

定时器setInterval

格式

setInterval("执行的代码",间隔时间毫秒)
setInterval("执行的代码",间隔时间毫秒)

1.定义一个定时器,每2秒钟弹出一个alert框

<script>
    // setInterval创建一个定时器,多久执行一次
    // 第一个参数是要执行什么;
    // 第二个参数多久执行一次;2000毫秒,2秒钟
    setInterval("alert(123)",2000)
</script>
<script>
    // setInterval创建一个定时器,多久执行一次
    // 第一个参数是要执行什么;
    // 第二个参数多久执行一次;2000毫秒,2秒钟
    setInterval("alert(123)",2000)
</script>

2.通过定时器中输出console.log信息

<script>
    // function f1()  定义一个函数 f1
    function f1() {
        // 在浏览器Console窗口,打印输出内容一般用于打印招聘信息
        var logs="这里是xxoo招聘,请把简历投放到xxx@ooo.com"
        console.log(logs);
    }
    
    // setInterval 定时器
    setInterval("f1()",2000)
</script>
<script>
    // function f1()  定义一个函数 f1
    function f1() {
        // 在浏览器Console窗口,打印输出内容一般用于打印招聘信息
        var logs="这里是xxoo招聘,请把简历投放到xxx@ooo.com"
        console.log(logs);
    }
    
    // setInterval 定时器
    setInterval("f1()",2000)
</script>

通过定时器setInterval实现轮播标签

1.定义一个div,设定一个id=i1

<div >欢迎大人物莅临指导!</div>
<div >欢迎大人物莅临指导!</div>

2.通过document.getElementById("i1")获取表情内容

tag = document.getElementById("i1")
<div id=?"i1">?欢迎大人物莅临指导!?</div>?
tag
<div id=?"i1">?欢迎大人物莅临指导!?</div>?
tag = document.getElementById("i1")
<div id=?"i1">?欢迎大人物莅临指导!?</div>?
tag
<div id=?"i1">?欢迎大人物莅临指导!?</div>?

3.通过innerText获取标签内的内容(innerText可以获取内容也可以set内容)

content=tag.innerText
"欢迎大人物莅临指导!"
content
"欢迎大人物莅临指导!"
content=tag.innerText
"欢迎大人物莅临指导!"
content
"欢迎大人物莅临指导!"

4.通过下标的截取,从新拼接字符串;将拼接字符串从新赋值给tag.innerText

f=content.charAt(0)
"欢"
l=content.substring(1,content.length)
"迎大人物莅临指导!"
new_content=l+f;
"迎大人物莅临指导!欢"
tag.innerText=new_content
"迎大人物莅临指导!欢"
f=content.charAt(0)
"欢"
l=content.substring(1,content.length)
"迎大人物莅临指导!"
new_content=l+f;
"迎大人物莅临指导!欢"
tag.innerText=new_content
"迎大人物莅临指导!欢"

实现效果

欢迎大人物莅临指导!

实现代码

<body>
<div >欢迎大人物莅临指导!</div>
    
<script>
    function func() {
        // 获取id为 i1 的标签
        var tag=document.getElementById("i1");
        // 获取标签内部的内容
        var content=tag.innerText;
        // 标签的第一个值
        var f=content.charAt(0);
        // 标签的第一个值后的所有值
        var l=content.substring(1,content.length);
        // 拼接新的字符串
        var new_content = l+f;
        // 将值从新赋给 tag.innerText
        tag.innerText = new_content;
    }
    // 0.5秒执行一次
    setInterval("func()",500)
</script>
</body>
<body>
<div >欢迎大人物莅临指导!</div>
    
<script>
    function func() {
        // 获取id为 i1 的标签
        var tag=document.getElementById("i1");
        // 获取标签内部的内容
        var content=tag.innerText;
        // 标签的第一个值
        var f=content.charAt(0);
        // 标签的第一个值后的所有值
        var l=content.substring(1,content.length);
        // 拼接新的字符串
        var new_content = l+f;
        // 将值从新赋给 tag.innerText
        tag.innerText = new_content;
    }
    // 0.5秒执行一次
    setInterval("func()",500)
</script>
</body>

通过定时器，页面显示当前时间

<body>
    <div id="isj"></div>

    <script>
        function currentDate() {
            var da = new Date();

            var year = da.getFullYear();
            var month = da.getMonth()+1;
            var day = da.getDate();

            var hours = da.getHours();
            var minutes = da.getMinutes();
            var seconds = da.getSeconds();

            var txt = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;

            document.getElementById("isj").innerHTML = txt;
        }
        setInterval(currentDate,1000)
    </script>
</body>
<body>
    <div id="isj"></div>

    <script>
        function currentDate() {
            var da = new Date();

            var year = da.getFullYear();
            var month = da.getMonth()+1;
            var day = da.getDate();

            var hours = da.getHours();
            var minutes = da.getMinutes();
            var seconds = da.getSeconds();

            var txt = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;

            document.getElementById("isj").innerHTML = txt;
        }
        setInterval(currentDate,1000)
    </script>
</body>

语句和异常

for循环语句

1.默认循环列表时获取的为下标;

b = ["aa", "bb", "ccc", "dddd"]
        // var 定义的为局部变量
        for(var i in b){
            console.log(i)
        }
0
1
2
3
b = ["aa", "bb", "ccc", "dddd"]
        // var 定义的为局部变量
        for(var i in b){
            console.log(i)
        }
0
1
2
3

2.通过下标值获取相应的值;

b = ["aa", "bb", "ccc", "dddd"]
        // var 定义的为局部变量
        for(var i in b){
            // 通过下标获取值
            console.log(b[i])
        }
aa
bb
ccc
dddd
b = ["aa", "bb", "ccc", "dddd"]
        // var 定义的为局部变量
        for(var i in b){
            // 通过下标获取值
            console.log(b[i])
        }
aa
bb
ccc
dddd

3.默认循环字典获取的是key值:

a = {k1: "v1", k2: "v2", k3: "v3"}
        for(var i in a){
            console.log(i)
        }
k1
k2
k3
a = {k1: "v1", k2: "v2", k3: "v3"}
        for(var i in a){
            console.log(i)
        }
k1
k2
k3

4.通过key获取相应的值:

a = {k1: "v1", k2: "v2", k3: "v3"}
        for(var i in a){
            console.log(a[i])
        }
v1
v2
v3
a = {k1: "v1", k2: "v2", k3: "v3"}
        for(var i in a){
            console.log(a[i])
        }
v1
v2
v3

5.通过表达式形式写for循环

for (var i=0;i<10;i++){
            
}
for (var i=0;i<10;i++){
            
}

if条件语句

单条件语法:

if(条件){

}else{

}
if(条件){

}else{

}

多条件语法:

if(条件){

}else if(条件){

}else if(条件){

}else{

}
if(条件){

}else if(条件){

}else if(条件){

}else{

}

函数

基础函数

JavaScript中函数基本上可以分为一下三类：
1.普通函数

// 普通函数 function 函数名(形参){语句}
function func(arg){
    return true;
}
// 普通函数 function 函数名(形参){语句}
function func(arg){
    return true;
}

2.匿名函数,没有名字的函数

setInterval(function(){
    console.log(123);
},5000)
setInterval(function(){
    console.log(123);
},5000)

3.自执行函数，从上往下解释时候，自动执行
格式：

(function(形参){
        console.log(形参);
    })(实参)
    (function(形参){
        console.log(形参);
    })(实参)

示例：

(function(arg){
    console.log(arg);
})('123')
(function(arg){
    console.log(arg);
})('123')

序列化

常用于用户向后台发送数据的时候，返回的值都为字符串，拿到字符串后需要反序列化将字符串转换为列表进行循环操作；

JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化

1.将列表序列化为字符串

li=[11,22,222,333,444,555]
(6) [11, 22, 222, 333, 444, 555]

str_li=JSON.stringify(li)
"[11,22,222,333,444,555]"
li=[11,22,222,333,444,555]
(6) [11, 22, 222, 333, 444, 555]

str_li=JSON.stringify(li)
"[11,22,222,333,444,555]"

2.将字符串反序列化为列表

new_li = JSON.parse(str_li)
(6) [11, 22, 222, 333, 444, 555]

new_li
(6) [11, 22, 222, 333, 444, 555]
new_li = JSON.parse(str_li)
(6) [11, 22, 222, 333, 444, 555]

new_li
(6) [11, 22, 222, 333, 444, 555]

转义

decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出

1.将URL中的中文转换为%字符串

url="https://www.sogou.com/web?query=叨客厨子"
"https://www.sogou.com/web?query=叨客厨子"
new_url = encodeURI(url)
"https://www.sogou.com/web?query=%E5%8F%A8%E5%AE%A2%E5%8E%A8%E5%AD%90"
url="https://www.sogou.com/web?query=叨客厨子"
"https://www.sogou.com/web?query=叨客厨子"
new_url = encodeURI(url)
"https://www.sogou.com/web?query=%E5%8F%A8%E5%AE%A2%E5%8E%A8%E5%AD%90"

2.将%号字符串，转换为中文

decodeURI(new_url)
"https://www.sogou.com/web?query=叨客厨子"
decodeURI(new_url)
"https://www.sogou.com/web?query=叨客厨子"

3.将URL中的//也转换为%字符

a = encodeURIComponent(url)
"https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E5%8F%A8%E5%AE%A2%E5%8E%A8%E5%AD%90"
a = encodeURIComponent(url)
"https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E5%8F%A8%E5%AE%A2%E5%8E%A8%E5%AD%90"

4.将%字符串转换回中文

decodeURIComponent(a)
"https://www.sogou.com/web?query=叨客厨子"
decodeURIComponent(a)
"https://www.sogou.com/web?query=叨客厨子"

Date时间对象

获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)
获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

时间常见的格式

var D = new Date()
Mon Oct 16 2017 00:05:15 GMT+0800 (中国标准时间)

D.toISOString();
"2017-10-15T16:05:15.267Z"

D.toJSON()
"2017-10-15T16:05:15.267Z"

D.toLocaleDateString()
"2017/10/16"

D.toLocaleString()
"2017/10/16 上午12:05:15"

D.toTimeString()
"00:05:15 GMT+0800 (中国标准时间)"

D.getFullYear()+"-"+(D.getMonth()+1)+"-"+(D.getDate())
"2017-10-16"

作用域

JavaScript以函数作为作用域；
函数的作用域在函数未被调用之前，已经创建；
函数的作用域存在作用域链，并且也是在被调用之前就创建；
函数内局部变量，会提前声明，但不会提前赋值；

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：java sql序列化 java如何实现序列化

下一篇：android两种fragment 安卓fragment的作用

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯