任何语言的核心都必然会描述这门语言基本的工作原理。而描述的内容通常都要涉及这门语 言的语法、操作符、数据类型、内置功能等用于构建复杂解决方案的基本概念。如前所述, ECMA-262通过叫做 ECMAScript的“伪语言”为我们描述了 JavaScript的所有这些基本概念

本篇文章主要讲语法,类型,操作符,语句和函数。

任何编程,都是从基础的语法开始,例如java,java也有基础语法,操作符,数据类型,控制语句等。c++,php,python也同理。

js与java在变量上有其共同点,这也是很多编程语言也有的共性:

一、语法

变量命名:

1.区分大小写,例如在js中给变量命名可以是var,也可以是let, var t和vat T是两个变量,而并不是一个变量;

2.标识符,不能以数字开头,第一个字符必须是一个字母,下划线或$符号,建议命名驼峰命名法,首字母小写,剩下的第二个单词字母大写;

3.不得以关键字和保留字进行命名,例如True命名可以,true则不行,因为true是js的基本数据类型boolean类型;

关键字:

保留字:

当然上述列出的只是一部分,还有其他,其他可以去w3school参考:http://www.w3school.com.cn/js/

变量有这么几种类型?

1.number

2.string

3.boolean

4.undefined

5.Object

上述js数据类型分别对应数字,字符串,布尔,未定义,对象等类型

typeof操作符可以得到该变量的类型

说到基本数据类型,不得不提一个类型转换,类型转换报错是很常见的:

类型转换应用:

比如字符串1,2,3,或者3.24,true等,我如何将其转换为数字类型,可使用parseInt(),parseFloat(),parseDouble()等方法可以进行转换

数字如何转字符串,toString()方法即可解决

undefined,有的时候我们添加数据时,有那么几个非必填项,但在列表展示时,常常展示为undefined,为什么会出现undefined,因为没有初始值,在java中int类型可默认初始值为0,声明尚未实现可以这样,js就不能这样,所以我们通常就要写if判断,当等于这个undefined时,我们给它赋个空串。

操作符也是开发中常用的,一元操作符,运算符,位操作符,布尔操作符,关系操作符,条件操作符,在这里我只说关系和条件,因为这两个用的比较多,当然还有布尔操作符,一元操作符,运算符等,位运算符,用的少,几乎没用过。

一元操作符类似于我们的if(condition){}else{},运算符,加减乘除,特别是关于购物车钱的计算及其日期的计算,例如下图示例:

//本周    var date = new Date();// 本周一的日期date.setDate(date.getDate() - date.getDay() + 1);var begin = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " 00:00:00";// 本周日的日期date.setDate(date.getDate() + 6);var end = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " 23:59:59";

//当天var year = now.getFullYear();       //年var month = now.getMonth() + 1;     //月var day = now.getDate();  //日var current=year+"-"+month+"-"+day;

//最近一个月function timeForMat (count) {// 拼接时间let time1 = new Date()time1.setTime(time1.getTime() - (24 * 60 * 60 * 1000))let Y1 = time1.getFullYear()let M1 = ((time1.getMonth() + 1) > 10 ? (time1.getMonth() + 1) : '0' + (time1.getMonth() + 1))let D1 = (time1.getDate() > 10 ? time1.getDate() : '0' + time1.getDate())let timer1 = Y1 + '-' + M1 + '-' + D1 // 当前时间let time2 = new Date()time2.setTime(time2.getTime() - (24 * 60 * 60 * 1000 * count))let Y2 = time2.getFullYear()let M2 = ((time2.getMonth() + 1) > 10 ? (time2.getMonth() + 1) : '0' + (time2.getMonth() + 1))let D2 = (time2.getDate() > 10 ? time2.getDate() : '0' + time2.getDate())let timer2 = Y2 + '-' + M2 + '-' + D2 // 之前的7天或者30天return {t1: timer1,t2: timer2}}var timer = timeForMat(30)alert(timer.t1)

布尔操作符,也比较常用,与(&),或(||),非(!)

关系操作符 小于(<)、大于(>)、小于等于(<=)和大于等于(>=)这几个关系操作符用于对两个值进行比 较,比较的规则与我们在数学课上所学的一样。

条件操作符类似我们的if..else

(1)var max = (num1 > num2) ? num1 : num2;

(2)if(num1>num2){

alert(num1)

}else{

alert(num2)

}

(1)和(2)实际上是一样的,没多大区别。不过注意的是写if时,连else也写了吧,这样逻辑清晰,还有if(){},这个{}可以省略,但建议不要省略。

二、语句

1.if语句

这个常用,就不多说了,总而言之,写if,要写就写全套,不要省略else

if的话表单验证用的挺多的,我开发用的js验证全部用if

例如:

常见的密码一致性问题

    if(password==null||password==""){alert("密码不能为空");return false;}else if(password2==null||password2==""){alert("确认密码不能为空");return false;}else if(password!=password2){alert("两次输入密码不一致");return false;}else{//ajax请求,这里省略}                

2.do..while(condition)

注意:do..while和java中的一样,至少执行一次

不会出现当条件不满足时,不执行。先执行再判断,用这句话形容do..while非常合适

开发中的话,我个人不常用,当然应用场景的话,可以用作于数据初始化

3.while(conditioini)

先判断再执行,有可能一次都不执行

while的话,用的不多,应用场景当满足条件时,进行函数调用。不过注意,如果代码存在逻辑问题又或者其他原因,可能导致死循环或者浏览器崩溃。

4.for循环

这个玩意好啊,用的最多,不过用之不慎的话,也会导致死循环。记得某个幽默的大牛对我说,十年前,初次做开发,别人问他,你会什么,他回答说,我就会for循环。

for循环,我应用的地方是:

// 数据展示
var loadData3 = function(list) {$("#s10_tbody tr[value != '']").remove();var rows = "";var comuStatus = "";// 数据遍历for (var i = 0; i < list.length; i++) {var comuStatus = list[i].comuStatusif (comuStatus == 1) {comuStatus = "正常";} else {comuStatus = "异常";}rows = rows + '<tr>';rows = rows + '  <td>' + list[i].id + '</td>';rows = rows + '  <td>' + comuStatus + '</td>';rows = rows + '  <td>' + list[i].time + '</td>';rows = rows + '</tr>';}$("#s10_tbody").append(rows);}

5.for in

对于这个玩意,我应用的场景如图所示:通常for in是针对数组或集合

      //按条件查找锁function searchLock(index,size) { $(".list [value != '']").remove();//用户IDvar userId=$("#userId").val();//门锁编码var lockNo = $("#lock_no_search").val();//房间编码var roomCode = $("#room_no_search").val();//房源编码var houseCode = $("#house_bm_search").val();//省市区var province = $("#province").find("option:selected").text();var city = $("#city").find("option:selected").text();var district = $("#district").find("option:selected").text();//安装地址var region = province+"_"+city+"_"+district;//地址var address = $("#address").val();$.ajax({  type : "POST",  url : "lock/list",  data : {  userId : userId,lockNo:lockNo,roomCode:roomCode,houseCode:houseCode,region:region,address:address,pageIndex:index,  pageSize:size  },dataType : 'json',success : function(data) {  var json = eval("("+data+")");//总数lockCount=json.lines;$("#locknum").html(lockCount);if(lockCount!=0){//将后台集合装载入listvar list = json.lockList;for (i in list){var lockNo = list[i].lock_no;var houseCode = list[i].houseCode;var roomCode = list[i].roomCode;var type = list[i].type;                var doorsensor = list[i].doorsensor;var comuStatus = list[i].comuStatus;var power = list[i].power;var region = list[i].region;var address = list[i].address;var installTime = list[i].installTime;var name = list[i].name;var nodeNo = list[i].nodeNo;if(type==1){type="二代433门锁";}if(doorsensor==1){doorsensor="是";}else{doorsensor="否";}if(comuStatus==1){comuStatus="强";}             var rows=""+"<span class='fl lockinfo lockcheck' style='width:7%;'>  <a class='checks' href='javascript:;' data-id='162235c895b065' data-node-comu='00' data-node-type='3' checks='false'></a> </span>"+"  <span class='fl ip-p lockinfo'><a target='_blank' href='lockPassword.html?lockNo="+lockNo+"' class='listss-l'>"+lockNo+"</a></span>"+"<span class='fl code-p lockinfo'>"+houseCode+"</span>"+"<span class='fl room-p lockinfo'>"+roomCode+"</span>"+"<span class='fl lock-p lockinfo'>"+type+"</span>"+"<span class='fl magnetic-p lockinfo'>"+doorsensor+"</span>"+"<div class='fl commit-p lockinfo'><span class='ico ico-cmt-s4'></span><p class='green'>"+comuStatus+"</div>"+"<span class='fl qua-p lockinfo'><div class='iconfont icon-icon-test20 green'></div><div>"+power+"%</div></span>"+"<span class='fl add address lockinfo'><span style='display:none'>"+region+"</span>"+address+"</span>"+"<span class='fl time-p lockinfo'>"+installTime+"</span>"+"<span class='fl ope-p lockinfo'>"+name+"</span>"+"<span class='fl gate-p lockinfo'>"+nodeNo+"</span>"+"<span class='fl lockinfo lockope'><a class='opebtn opechange' href='lockPassword.html?lockNo="+lockNo+"' data-node='3' style='display: inline;'>编辑</a></span>";            $(".list").append(rows); }var page='<div id="userPage" align="center" ><font size="2">共'  (lockCount+pageSize-1)/pageSize+'页</font> <font size="2">第'  +(pageIndex+1)+'页</font> <a href="javascript:void" onclick="GoToFirstPage()" id="aFirstPage" >首页</a> '  +'<a href="javascript:void" onclick="GoToPrePage()" id="aPrePage"  >上一页</a>  '  +'<a href="javascript:void" onclick="GoToNextPage()" id="aNextPage" >下一页</a>  '  +'<a href="javascript:void" onclick="GoToEndPage()" id="aEndPage" >尾页</a>  ';  page+='</div>';  $("#lockPage").html(page);  //  document.getElementById("dltitle").innerHTML = "查找结果如下";  }       },error:function(){alert("有异常");}  });  }  

6.switch

这个switch的话,我觉得也很有用,可以针对不同的条件和参数调用不同的函数,挺有用的,不过我用的不多,可能是因为没有领会它的真谛吧,说到底就是用的太少不熟练。

应用场景的话,前后端分离,用的展示层就是html,如何进行权限控制呢?就通过switch,通过全局js函数获得用户角色,根据该角色,进行访问资源判断。例如,

不过这里的角色是有限的,基本定义为普通人员,安装人员,运维,admin或者root等四到五个角色,如果想crm或erp之类的,角色很多,万不可通过这种形式来定义对资源的访问。

三、函数

这个不能不提啊,现在我写的最多的就是js函数

突然让我想起了Linux,linux中的shell,shell脚本的基础就是linux的命令的集合体,记得在上家公司一位同事写监控服务器脚本就是用的函数,函数方便复用和模块化,什么是模块化呢?我个人的理解是,比如我写的一个用户管理界面,引用的js文件主要是用户管理相关js,该js文件专心于用户管理界面上的一切操作。

JavaScript高级程序设计学习(二)之基本概念相关推荐

  1. JavaScript高级程序设计学习笔记(三)

    分享一下第五章(引用类型)的笔记,内容比较多,我拆成了两部分,今天这部分是关于Object.Array.Date和RegExp类型的. 以下的笔记是书上一些我以前学习的时候,没有太重视的js基础知识, ...

  2. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

  3. javascript高级程序设计学习之数值转换 |Number(),parseInt(),parseFloat()

    2019独角兽企业重金招聘Python工程师标准>>> 将非数值转换成数值的函数有三个:Number(),parseInt(),parseFloat(); 小记tip:Number( ...

  4. [Javascript 高级程序设计]学习心得记录 函数参数传递与引用

    最近开始啃js的红宝书:<Javascript 高级程序设计>,偶有心得,记录一下. 先上代码 function howManyArgs() {alert(arguments.length ...

  5. JavaScript高级程序设计学习笔记二(在HTML中使用JavaScript)

    在 HTML 中使用 JavaScript 在html中使用JavaScript脚本有两种方式一种是嵌入在HTML中的脚本,另一种是引入外部的脚本.两种方式都离不开<script>元素. ...

  6. JavaScript高级程序设计学习(四)之引用类型(续)

    一.Date类型 其实引用类型和相关的操作方法,远远不止昨天的所说的那些,还有一部分今天继续补充. 在java中日期Date,它所属的包有sql包,也有util包.我个人比较喜欢用util包的.理由, ...

  7. javascript高级程序设计总结二

    一.面向对象的程序设计 1. 属性类型 // 1.数据属性 object.defineproperty(属相所在的对象,属性名,(4种))let person = {};Object.definePr ...

  8. JavaScript高级程序设计--学习笔记(第六章)

    文章目录 第六章 面向对象的程序设计 1. 理解对象 1.1 属性类型 1.2 定义多个属性 1.3 读取属性的特性 2. 创建对象 2.1 工厂模式 2.2 构造函数模式 2.3 原型模式 2.4 ...

  9. JavaScript高级程序设计学习(六)之设计模式

    每种编程语言都有其自己的设计模式.不禁让人疑惑设计模式是用来做什么?有什么用? 简单的说,设计模式是为了让代码更简洁,更优雅,更完美. 同时设计模式也会让软件的性能更好,同时也会让程序员们更轻松.设计 ...

最新文章

  1. eclipse--各类型版本包含插件比较
  2. 解决windows版 duet display无法正常连接 【看完就会】
  3. win 2008 控制共享文件夹大小_Windows 10 无法访问共享的解决办法大全
  4. 卡方 python_Python评分卡建模—卡方分箱
  5. HTTP 中的 304
  6. 网速慢?NO可能是路由器的原因?
  7. LS-GAN:把GAN建立在Lipschitz密度上
  8. C# JsonHelper
  9. ASP.NET MVC RedirectToRoute类[转]
  10. .NetCore中EFCore for MySql整理(二)
  11. 汕尾python高手_每天两小时,下一个python 高手就是你!满满都是干货
  12. java 异常哪个包,这个提示包不存在的异常是咋回事
  13. centos7安装tree命令
  14. HTML页面跳转及传递参数
  15. 职称最新消息:2022年开始湖北全面实行职称电子证书
  16. 计算机的系统更新速度,Windows 10更新后变慢了?5种方法解决Windows变慢问题
  17. miui11可用的位置模拟器_miui11支持机型汇总_miui11支持哪些机型_软吧下载
  18. Bootstrap轮播插件
  19. python鸭子类型与协议理解
  20. WindowsCE目录解析

热门文章

  1. C++之继承探究(三):继承的方式
  2. 哈工大计算机学院2021复试分数线,哈尔滨工业大学2021年考研复试分数线
  3. videocapture 保存图片_RoboMaster视觉教程OpenCV(二)读取视频图像与转换
  4. 离散数学计算机科学丛书答案,计算机《离散数学》期中试卷答案.docx
  5. 不是单组分组函数_面向对象编程是否已淘汰?函数式编程的枪口瞄错了对象
  6. 停车还能360全方位影像_2020款新途锐锐享版上市,智能泊车360全景影像加量不加价...
  7. java 复制标记_java-对于大文件,在标记inputStream并将其重置...
  8. flask-sqlalchemy Multiple Databases
  9. Flask cookie
  10. java 类变量方法实例对象方法