首页 > 代码库 > JavaScript 基础快速入门（1）

JavaScript 基础快速入门（1）

2024-09-18 16:42:55   217人阅读

HTML,CSS和JavaScript是网页设计的基础。HTML和CSS定义了静态的效果，而JavaScript则可以体现出一些动态的效果。在已经掌握一种或者多种编程语言的基础下，学习JS很容易，下面看看一些基本的使用方法。


1. JavaScript的位置。

和CSS类似，我们可以直接写代码块，也可以引用外部文件。理论上，<script src="http://www.mamicode.com/xxx"></script>可以放在<head>里面，也可以放在<body>里面，但是从效率考虑，如果script的链接比较慢或者错误，<head>里面可能导致整个页面半天加载不出来，因此，我们一般推荐放在<body</body>代码块的底部。如果只是暂时的测试性质的编码，我们甚至可以直接在浏览器上的console上使用。F12或者Inspect ，然后选择console就可以了


2.定义变量

直接写 name=‘james’ 定义了全局变量，如果在函数里面定义，指定一个var 关键字，则表示局部变量


3.数字

 

JS不区分float或者int，不过我们可以通过parseInt或者parsefloat来转换字符

 例如：

         
    a="222.2"
    parseFlaot(a)
    222.2
    parseInt(a)
    222

        

4. 字符串 

这个和其他语言几乎一样，有常见的属性和方法。

                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $‘：位于匹配子串右侧的文本
                                     $$：直接量$符号



实例：跑马灯，不停的循环输出文字 

   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">欢迎领导视察工作</div>
<script>
    //定义函数
    function change(){
        //通过id获取标签
        var dd=document.getElementById("d1")
        //控制台可以查看输出，很好的查错方式
        console.log(dd)
        var content=dd.innerText
        console.log(content)
        //获取第一个字符
        var f=content.charAt(0)
        //获取子字符串
        var l=content.substring(1,content.length)
        //字符串拼接
        var new_content=l+f;
        //重新赋值
        dd.innerText=new_content
        console.log(new_content);
    }
    //定时器，每隔1000毫秒执行一下change()
    setInterval(‘change()‘,1000)
</script>
</body>


5. 布尔值， true和false，注意是小写


  • ==      比较值相等

  • !=       不等于

  • ===   比较值和类型相等

  • !===  不等于

  • ||        或

  • &&      且


6.  数组，和python的列表差不多。


方法如下，其中splice比较特殊 他有3个参数，第一个参数表示插入的位置，第二个参数表示删除几个值，第三个表示插入的新值。因此splice(0,1)表示删除第一个值，splice(0,0,20)表示第一个值前面插入一个值20


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


7. 字典  

例如

a={‘name‘:‘James‘,‘age‘:30} 

使用和Python一样


8. for循环；for循环有2种形式

第一种形式        

例如直接循环数组，他输出的是索引而不是值

     

a=[11,22,33,44]
for(var item in a){console.log(item);}
 0
 1
 2
 3
for(var item in a){console.log(a[item]);}
11
22
33
44

     直接循环字典，输出的也是key而不是value

b={"name":"alex","age":20}
for(var item in b){console.log(item);}
name
age
undefined
for(var item in b){console.log(b[item]);}
alex
20


第二种形式, 就和其他语言一样；不过注意如果要输出字典，因为字典的key的数据类型是无序散乱 因此这里就不适合了

for(var i=1;i<a.length;i++){console.log(i)}
1
2
3
for(var i=1;i<a.length;i++){console.log(a[i])}
22
33
44


本文出自 “麻婆豆腐” 博客，请务必保留此出处http://beanxyz.blog.51cto.com/5570417/1920939

JavaScript 基础快速入门（1）


联系
我们