JavaScript 基础快速入门(1)

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

1. JavaScript的位置

和CSS类似,我们可以直接写代码块,也可以引用外部文件。理论上,<script src="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
时间: 2024-08-28 21:53:43

JavaScript 基础快速入门(1)的相关文章

零基础快速入门web学习路线(含视频教程)

下面小编专门为广大web学习爱好者汇总了一条完整的自学线路:零基础快速入门web学习路线(含视频教程)(绝对纯干货)适合初学者的最新WEB前端学习路线汇总! 在当下来说web前端开发工程师可谓是高福利.高薪水的职业了.所以现在学习web前端开发的技术人员也是日益增多了,但是在学习web前端开发中盲目的去学习而没有一个完整的思路和学习路线也是不行的. 成为一个合格的web前端开发工程师的具备什么条件? 熟练的掌握HTML.CSS.JS.JQ等最基本的技术. 现在,只掌握这些已经远远不够了.无论是开

Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 2. 变量

大家在中学就已经学过变量的概念了.例如:我们令 x = 100,则可以推出 x*2 = 200 试试下面这段 Python 代码 1 import turtle 2 3 turtle.shape("turtle") 4 x = 100 5 turtle.forward(x) 6 turtle.left(45) 7 turtle.forward(2*x) 8 9 turtle.exitonclick() 运行上面的代码,小海龟将画出下面的图案 x = 100 声明了变量 x,并将它赋值为

六、华为IP基础快速入门之RIP协议

六.华为IP基础快速入门之RIP协议 1.本章学习目标 2.课程内容 3.了解什么是路由 4.RIP协议概述:RIP(Routing Information Protocol,路由信息协议)是一种内部网关协议(IGP),是一种动态路由选择协议,用于自治系统(AS)内的路由信息的传递.RIP协议基于距离矢量算法(DistanceVectorAlgorithms),使用"跳数"(即metric)来衡量到达目标地址的路由距离.这种协议的路由器只关心自己周围的世界,只与自己相邻的路由器交换信息

小D课堂 - 零基础入门SpringBoot2.X到实战_第1节零基础快速入门SpringBoot2.0_1、SpringBoot2.x课程介绍和高手系列知识点

1 ======================1.零基础快速入门SpringBoot2.0 5节课 =========================== 1.SpringBoot2.x课程全套介绍和高手系列知识点     简介:介绍SpringBoot2.x课程大纲章节         java基础,jdk环境,maven基础 2.SpringBoot2.x依赖环境和版本新特性说明 简介:讲解新版本依赖环境和springboot2新特性概述 1.依赖版本jdk8以上, Springboot2

Expression Blend实例中文教程(7) - 动画基础快速入门Animation

通过前面文章学习,已经对Blend的开发界面,以及控件有了初步的认识.本文将讲述Blend的一个核心功能,动画设计.大家也许注意到,从开篇到现在,所有的文章都是属于快速入门,是因为这些文章,都是我曾经学习的经验和工作中使用到的经验总结出来的.在我个人认为,掌握了这些核心功能也就等于掌握了Blend的开发方法.在以后开发项目中使用Blend开发工具,这些知识应该足够用了.当然,特殊项目也需要特殊对待,如果您在项目开发中,有新的Blend开发经验,希望您能够毫不吝啬的分享,在这里,我表示深深的谢意.

【JavaScript】快速入门

摘抄地址快速入门 No1: JavaScript严格区分大小写 No2: JavaScript不区分整数和浮点数,统一用Number表示 NaN表示Not a Number,当无法计算结果时用NaN表示 Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity JavaScript允许对任意数据类型做比较 No3: 要特别注意相等运算符==.JavaScript在设计时,有两种比较运算符: 第一种是==比较,它会自动转换数据类型再比较

前端零基础快速入门JavaScript

JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中: <html><head> <script> alert('Hello, world'); </script></head><http://www.my516.com> ...</body></html> 1234567891011由<script>...</script

Kubernetes零基础快速入门!初学者必看!

起源 Kubernetes 源自于 google 内部的服务编排系统 - borg,诞生于2014年.它汲取了google 十五年生产环境的经验积累,并融合了社区优秀的idea和实践经验. 名字 Kubernetes 这个名字,起源于古希腊,是舵手的意思,所以它的 logo 即像一张渔网又像一个罗盘,谷歌选择这个名字还有一个深意:既然docker把自己比作一只鲸鱼,驮着集装箱,在大海上遨游,google 就要用Kubernetes去掌握大航海时代的话语权,去捕获和指引着这条鲸鱼按照主人设定的路线

零基础快速入门SpringBoot2.0 (一)

一.SpringBoot2.x依赖环境和版本新特性说明 简介:讲解新版本依赖环境和springboot2新特性概述 1.依赖版本jdk8以上, Springboot2.x用JDK8, 因为底层是 Spring framework5, 2.安装maven最新版本,maven3.2以上版本,下载地址 :https://maven.apache.org/download.cgi 3.Eclipse或者IDE 4.新特性 5.翻译工具:https://translate.google.cn/ 6.spr