JavaScript是前端编辑的一种编程语言（不同于html，html是一种标记语言），所以和其他的编程语言一样，我们将会从下面几点学习

  • 基础语法
  • 数据类型
  • 函数
  • 面向对象
JavaScript的组成

实际上一个完整的JavaScript是由下面三个不同的部分组成的

  • 核心(ECMAScript)
  • 文档对象模型(DOM),Document object model，整合了JS，CSS及Html
  • 浏览器对象模型(BOM),Broswer object model，整合了JS和浏览器

简单的说，ESMAScript描述了JavaScript语言本身的相关内容，它有着下面一些特点：

  • JavaScript是脚本语言
  • JavaScript是一种轻量级的编程语言
  • JavaScript是可以插入Html内的编程代码
  • JavaScript插入浏览器以后，可以由所有的现代浏览器来执行
JavaScript的引入方式

写在script标签内部

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script>

        alert('弹个窗口出来')

    </script>

</body>

</html>

单独写在JS文件中并导入在html内

先写一个1.js文件

##########1.js##########

alert('弹出个窗口')

然后可以把这个文件导入在html文件中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

    <script src="1.js"></script>

<body>

</body>

</html>
JavaScript的基本语法

注释

//单行注释

/*

多行注释

*/

结束符

JavaScript中的语句要以分号(;)结束，但这个C语言不同，这个结束符不是必须的，但是建议还是加上，因为有些时候会出问题。

变量声明

JavaScript的变量名可以使用下划线_,数字，字幕和$符组成，但不能以数字开头。

变量声明的时候要用var来声明

var name='字符串';

var value=123;

还有一点要注意的是变量名是要区分大小写的。这里建议使用驼峰式的命名规则。

还有JavaScript里的变量是动态类型，也就是说同一个变量名可以存储不同类型是的数据

JavaScript的数据类型

就像前面说的，JavaScript是可以拥有动态类型的

var x;          //x是underfined

var x = 1;      //x是数字

var x = 'abc'   //x是字符串

数字类型

JavaScript里是部分int和float的，只有一种数字类型。

var a = 1

var b = 12.34

var c = 123e4

var d = 123e-4

还有一种数据是NaN，表示不是一个数字(Not a Number)

字符串及其常用方法

方法 说明
.length 返回字符串长度值
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt(n) 返回第n个字符
.concat(value,...) 拼接
.indexOf(substring,start) 子序列位置
.substring(start,end) 根据索引获取子序列
.slice(start,end) 切片
.toLowerCase() 转换为小写
.toUpperCase() 转换为大写
.split(delimiter,limt) 分割

这里要注意的就是切片(slice)和返回子序列(substring)的区别

先看看两者的相同点：

如果start和end相等，则返回空字符串

如果stop参数省略，则返回到字符串末尾的字符串

如果某个参数超出字符串的长度，这个参数会被替换为字符串的长度

那么再看看两者的不同

substring的特点：

如果start>end则start和end两个值会被交换

如果某个参数为负数，则会被0替换(切片是允许使用-1来表示末尾最后一个字符的)

silce的特点：

如果start>end时二者不会被交换（会返回一个空字符串）

如果start小于0，则切片从字符串末尾往前数的低start个字符串开始(包括该位置)

如果end小于0，则从自佛成末尾往前数的第end个字符结束(不包括该位置)

分割的特点

按照delimiter分割字符串，返回一个列表，列表的长度为limit的值。

布尔类型

布尔值和Python不太一样，true和false都是小写

var a = true;

var b = false;

空字符串（‘’,不是‘ ’）、0、null、underfined、NaN都是false。

数组及其常用方法

数组和Python中的list列表相似，

var a = [0,1,2,3];

看看数组的常用方法

方法 说明
.length 数组大小
.push(ele) 尾部追加元素
.pop() 删除末尾元素并返回该值
.unshift(ele) 头部插入元素
.shift 删除第一个元素并返回该值
.slice(start,end) 切片
.reverse() 反转
.join(seq) 连接
.concat(val,...) 将数组元素连接成字符串
.sort() 排序

要注意的是几点：

1.不能想Python中的列表一样直接切片

a = [1,2,3,4,5]

//注意下面的方法是错误的

a[2:3]

2.join的时候和Python里是反的，先看看Python里的方法

>>> a = ['a','b','c']

>>> '+'.join(a)

'a+b+c'

再看看JS里的方法

a = ['a','b','c']

(3) ["a", "b", "c"]

a.join('+')

"a+b+c"

3.sort方法的使用事项

如果sort在调用的时候没有参数传入，则会按数组中元素的字符编码的顺序进行排序。

如果想按照其他的标准来进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值，然后返回一个用于说明这两个值相对顺序的数字，比较函数应该具有两个参数a和b，其返回值如下：

若a小于b，在排序后的数组中a应该出现在b之前，则返回一个小于0的值。

若a等于b，则返回0.

若a大于b，则返回一个大于0的值。

>function sortNumber(a,b){

    return a-b

}

<undefined

>var a = [1,3,2,4]

<undefined

>a.sort(sortNumber)

<(4) [1, 2, 3, 4]

4.数组的遍历

可以用for循环来对数组进行遍历

>var a = [1,2,3,4]

<undefined

>for (var i=0;i<a.length;i++){

    console.log(i);

}

VM1843:2 0

VM1843:2 1

VM1843:2 2

VM1843:2 3

undefined

null和underfined

null表示值是空，一般在需要指定或清空一个变量时候才会使用，比方下面的

>name = null

<null

>name

<"null"

而underfined表示当一个变量被声明但没初始化的时候，改变量的默认值为underfined，还有就是函数无明确的返回值时(var一个值但是没有赋值操作)，返回的也是underfined。

类型查询

类型查询可以用下面的方式进行

typeof 'abc'

typeof 123

typeof null

typeof true

typeof是一个一元运算符，就像++，！，--一样，不是一个函数，也不是一个语句

有些变量或值调用typeof运算后会有下面的返回值

数组、null的返回值是object

undefined的返回值是undefined

运算符

算数运算符

+

-

*

、

%

++

--

比较运算符

>

>=

<

<=

!=

==

===

!==

这里可能对==和===有些疑问，我们看看下面的代码

>1=='1'

<true

>1==='1'

<false

也就是说==是不考虑数据类型的，而===是强等，会对数据类型一同进行比较

逻辑运算符

&&      //与

||      //或

!       //非

赋值运算符

=

+=

-=

*=

/=
流程控制

if-else

>var a=10

>if (a>5){

    console.log('yes');

}else{

    console.log('no')}

<yes

switch判断

switch (day){

    case 0:

        console.log('Sunday');

        break;

    case 1:

        console.log('Monday');

        break;

    default:

        console.log('...');

}

通常switch里的case后都会加上break，否则会执行后续case里的语句。

for循环

>var a = [1,2,3,4]

<undefined

>for (var i=0;i<a.length;i++){

    console.log(i);

}

这个for循环的结构和C语言中类似。

while循环

var i = 0;

while(i<10){

    console.log(i);

    i++;

}

和for循环一样，while循环和C语言中的while循环结构一样。

三元运算

var a = 1;

var b = 2;

var c = a>b?a:b

JavaScript入门学习之一——初级语法的更多相关文章

  1. JavaScript入门-学习笔记(一)

    JavaScript入门(一) 学习js之前,我们先来了解一下,什么是JavaScript? JavaScript是一种解释型语言.在运行的时候,一边读一边编译一边执行.简单来说就是,在执行js代码时 ...

  2. JavaScript入门学习书籍的阶段选择

    对于许多想学习 JavaScript 的朋友来说,无疑如何选择入门的书籍是他们最头疼的问题,或许也是他们一直畏惧,甚至放弃学习 JavaScript 的理由.在 JavaScript 方面,自己不是什 ...

  3. Javascript入门学习

    编程之道,程序员不仅仅要精通一门语言,而是要多学习几门. 本学习之源出自柠檬学院http://www.bjlemon.com/,特此声明. 第一课1:javascript的主要特点解释型:不需要编译, ...

  4. JavaScript入门学习之二——函数

    在前一章中讲了JavaScript的入门语法,在这一章要看看函数的使用. 函数的定义 JavaScript中的函数和Python中的非常类似,只不过定义的方式有些不同,下面看看是怎么定义的 //定义普 ...

  5. JavaScript入门学习笔记（JSON）

    JSON是JavaScript Object Notation的简称,是一种轻量级的数据交换格式. JSON使用JS的语法,但其格式只是一个文本,可以被任何编程语言读取病作为数据格式传递. JSON以 ...

  6. JavaScript入门学习笔记（二）

    JavaScript运算符: 算术运算符.赋值运算符和字符串连接运算符. 算法运算符与复制运算符用法参照Java: 字符串运算符: +运算符用于把文本值或字符串变量连接起来,适用于两个或更多字符串变量 ...

  7. JavaScript入门学习笔记（一）

    W3cJavaScript教程 JS是JavaScript的缩写,而JSP是Java Server Page的缩写,后者是用于服务器的语言. JavaScript代码写在标签<script> ...

  8. JavaScript入门学习(1)

    <html> <script type ="text/javascript"> var i,j; for (i=1;i<10;i++){ for (j ...

  9. 【前端】JavaScript入门学习

    <button type="button" onclick="alert('hillo!')">Here</button> <sc ...

随机推荐

  1. app测试基础知识之命令

    app测试点:功能测试,安全测试,用户体验测试,交叉事件测试,兼容性测试,性能测试,安装/升级/卸载 ,UI测试 命令操作: adb connect 名 adb devices adb  instal ...

  2. 如何在robotframework基础上使用数据驱动测试

    一.写在前面 robotframework是很好用的关键字驱动测试框架,但是在实际工作中也有些地方使用不便,比如在我们设计参数校验测试case时,往往只是想修改校验参数类型而不得不做大量复制粘贴操作, ...

  3. 云计算共享组件--Memcache缓存系统（4）

    一.缓存系统 一.静态web页面: 1.在静态Web程序中,客户端使用Web浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告 ...

  4. word2010目录和正文分开编页码

    最近公司要写文档,老板给了一个范文模板,其中目录和正文的页码就是分开编辑的.上网查了很多资料,基本上都没有附图,通过自己的摸索以后终于实现了.现在我就把实现过程跟截图一并奉上.

  5. 【Python】【基础知识】【内置函数】【help的使用方法】

    原英文帮助文档: help([object]) Invoke the built-in help system. (This function is intended for interactive ...

  6. 批量删除Maven本地仓库中未下载完成的jar包（不完整的jar包）

    1.删除repository库目录下所有后缀名是.lastUpdated的文件 2.进入maven本地仓库地址: CMD进入windows的路径(或在仓库目录的地址栏直接输入CMD,回车自动打开); ...

  7. 2019中山纪念中学夏令营-Day1[JZOJ]

    T1 题目描述: 1999. Wexley接苹果(apple) (File IO): input:apple.in output:apple.out 时间限制: 1000 ms  空间限制: 1280 ...

  8. python PEP8常用规范(看完你会感谢我的！)

    完整的规范移步传送门 pep8规范 官方文档:[https://www.python.org/dev/peps/pep-0008/](https://www.python.org/dev/peps/p ...

  9. sql--index 索引

    CREATE INDEX 语句用于在表中创建索引. 在不读取整个表的情况下,索引使数据库应用程序可以更快地查找数据. 索引 您可以在表中创建索引,以便更加快速高效地查询数据. 用户无法看到索引,它们只 ...

  10. 定制ListView的界面（让列表中不仅有文字还有图片fruitImage.setImageResource(fruit.getImageId());）

    1.定义自己的实体类来作为ListView的适配类型如: public class Fruit { private String name;//水果的名字 private int imageId;// ...