JavaScript入门学习之一——初级语法
JavaScript是前端编辑的一种编程语言（不同于html，html是一种标记语言），所以和其他的编程语言一样，我们将会从下面几点学习
- 基础语法
- 数据类型
- 函数
- 面向对象
实际上一个完整的JavaScript是由下面三个不同的部分组成的
- 核心(ECMAScript)
- 文档对象模型(DOM),Document object model，整合了JS，CSS及Html
- 浏览器对象模型(BOM),Broswer object model，整合了JS和浏览器
简单的说，ESMAScript描述了JavaScript语言本身的相关内容，它有着下面一些特点：
- JavaScript是脚本语言
- JavaScript是一种轻量级的编程语言
- JavaScript是可以插入Html内的编程代码
- 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中的语句要以分号(;)结束，但这个C语言不同，这个结束符不是必须的，但是建议还是加上，因为有些时候会出问题。
变量声明
JavaScript的变量名可以使用下划线_,数字，字幕和$符组成，但不能以数字开头。
变量声明的时候要用var来声明
var name='字符串';
var value=123;
还有一点要注意的是变量名是要区分大小写的。这里建议使用驼峰式的命名规则。
还有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入门学习之一——初级语法的更多相关文章
- JavaScript入门-学习笔记(一)
JavaScript入门(一) 学习js之前,我们先来了解一下,什么是JavaScript? JavaScript是一种解释型语言.在运行的时候,一边读一边编译一边执行.简单来说就是,在执行js代码时 ...
- JavaScript入门学习书籍的阶段选择
对于许多想学习 JavaScript 的朋友来说,无疑如何选择入门的书籍是他们最头疼的问题,或许也是他们一直畏惧,甚至放弃学习 JavaScript 的理由.在 JavaScript 方面,自己不是什 ...
- Javascript入门学习
编程之道,程序员不仅仅要精通一门语言,而是要多学习几门. 本学习之源出自柠檬学院http://www.bjlemon.com/,特此声明. 第一课1:javascript的主要特点解释型:不需要编译, ...
- JavaScript入门学习之二——函数
在前一章中讲了JavaScript的入门语法,在这一章要看看函数的使用. 函数的定义 JavaScript中的函数和Python中的非常类似,只不过定义的方式有些不同,下面看看是怎么定义的 //定义普 ...
- JavaScript入门学习笔记（JSON）
JSON是JavaScript Object Notation的简称,是一种轻量级的数据交换格式. JSON使用JS的语法,但其格式只是一个文本,可以被任何编程语言读取病作为数据格式传递. JSON以 ...
- JavaScript入门学习笔记（二）
JavaScript运算符: 算术运算符.赋值运算符和字符串连接运算符. 算法运算符与复制运算符用法参照Java: 字符串运算符: +运算符用于把文本值或字符串变量连接起来,适用于两个或更多字符串变量 ...
- JavaScript入门学习笔记（一）
W3cJavaScript教程 JS是JavaScript的缩写,而JSP是Java Server Page的缩写,后者是用于服务器的语言. JavaScript代码写在标签<script> ...
- JavaScript入门学习(1)
<html> <script type ="text/javascript"> var i,j; for (i=1;i<10;i++){ for (j ...
- 【前端】JavaScript入门学习
<button type="button" onclick="alert('hillo!')">Here</button> <sc ...
随机推荐
- Linux-T
vim编辑器i输入Esc切换:wqw保存q退出保存 查看openssl版本号openssl version 查看所有php扩展php -m 查看指定端口占用netstat -anp |grep xxx ...
- 04-再探JavaScript
一. DOM介绍 1. 什么是DOM? DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的其实就是为了能让js操作html元素而制定的一个规范. DOM就 ...
- mariadb数据库备份与恢复
1.查询日志: 记录每一条sql语句,建议不开启,因为如果访问量较大,会占用相当大的资源,影响性能; vim /etc/my.cnf.d/server.cnf general_log = ON| OF ...
- 关于deepin装机的一些经验总结
最近win10用的有一点腻,虚拟机很久之前就装上了deepin,乌班图,红帽等隶属于Linux一些操作系统,但是终究还是虚拟机所以还是想在真机上试试,所以照着deepin网上的流程装好了deepin并 ...
- java第一次实验总结&第三周总结
Java第一次实验报告,java开发环境与简单的Java程序 一.实验目的 1.熟悉JDK开发环境 2.熟练掌握结构化程序设计方法 二.实验内容 打印输出所有的"水仙花数",所谓& ...
- spring笔记3路径跳转
---恢复内容开始--- 页面跳转 <!--forward直接跳转--><jsp:forward page="pages/admin/member/add_pre.acti ...
- AC自动机练习题1：地图匹配
AC自动机板子,学习之前要是忘记了就看一下 1465: [AC自动机]地图匹配 poj1204 时间限制: 1 Sec 内存限制: 256 MB提交: 78 解决: 46[提交] [状态] [讨论 ...
- Linux服务器Java进程突然消失排查办法
出处:JAVA进程突然消失的原因? 问题描述 在实际生产环境下,如果我们遇见Java进程突然消失,该如何去排查问题? 思路 可能有几种原因: ①.Java应用程序的问题:发生OOM导致进程Crash ...
- luogu P3320 [SDOI2015]寻宝游戏
大意:给定树, 要求维护一个集合, 支持增删点, 询问从集合中任取一点作为起点, 遍历完其他点后原路返回的最短长度. 集合中的点按$dfs$序排列后, 最短距离就为$dis(s_1,s_2)+...+ ...
- SpringDataJpa实体类常用注解
最近公司在使用SpringDataJpa时,需要创建实体类,通过实体类来创建数据库表结构,生成数据库表. 下面我们就来看下在创建实体类时一些常用的注解吧!!! 1.实体类常用注解 @Entity 标识 ...