JavaScript高级程序设计学习(二)之基本概念
任何语言的核心都必然会描述这门语言基本的工作原理。而描述的内容通常都要涉及这门语 言的语法、操作符、数据类型、内置功能等用于构建复杂解决方案的基本概念。如前所述, 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].comuStatus
if (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(); //用户ID
var 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){
//将后台集合装载入list
var 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高级程序设计学习(二)之基本概念的更多相关文章
- JavaScript高级程序设计学习(三)之变量、作用域和内存问题
这次讲的主要是变量,作用域和内存问题. 任何一门编程语言,都涉及这三个. 变量,比如全局变量,局部变量等,作用域,也分全局作用域和方法作用域,内存问题,在java中就涉及到一个垃圾回收的问题,由于ja ...
- JavaScript高级程序设计学习(四)之引用类型
在javascript中也是有引用类型的,java同样如此. javascript常见也比较常用的引用类型就熟Object和Array. 一个对象和一个数组,这个在前后端分离开发中也用的最多.比如aj ...
- javascript高级程序设计学习笔记
javascript高级程序设计,当枕头书已经好久了~zz 现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...
- JavaScript高级程序设计---学习笔记(一)
今天,2017.3.17开始利用课余时间仔细学习<JavaScript高级程序设计>,将需要掌握的知识点记录下来,争取把书里的所有代码敲一遍并掌握. 1.标识符命名最好是第一个字母小写,剩 ...
- javascript 高级程序设计 十二
1.组合使用原型模式和构造函数模式: 由于原型模式创建对象也有它的局限性------有智慧的人就把原型模式和构造函数模式进行了组合. function Person(name, age, job){/ ...
- JavaScript高级程序设计---学习笔记(二)
面向对象程序设计1.属性类型.定义多属性.读取属性特性对象的属性在创建时都带有一些特征值,JavaScript通过这些特征值来定义它们的行为.这些特性是为了实现JavaScript引擎用的,因此不能直 ...
- JavaScript高级程序设计学习笔记--面向对象的程序设计(二)-- 继承
相关文章: 面向对象的程序设计(一) — 创建对象 http://www.cnblogs.com/blackwood/archive/2013/04/24/3039523.html 继承 继承是OO语 ...
- JavaScript高级程序设计学习笔记第三章--基本概念
一.标识符: 1.区分大小写 2.命名规则: 第一个字符必须是一个字母.下划线(_)或一个美元符号($) 其他字符可以是字母.下划线.美元符号或数字 标识符中的字母也可以包含扩展的 ASCII 或 U ...
- JavaScript高级程序设计学习笔记--基本概念
1.语句 ECMAScript中的语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾,如下例所示: var sum=a+b //即使没有分号也是有效的语句--推荐 var diff=a-b; ...
随机推荐
- 【Java并发编程】21、线程池ThreadPoolExecutor源码解析
一.前言 JUC这部分还有线程池这一块没有分析,需要抓紧时间分析,下面开始ThreadPoolExecutor,其是线程池的基础,分析完了这个类会简化之后的分析,线程池可以解决两个不同问题:由于减少了 ...
- Hybris CronJob.
一.概念 CronJobs提供了在特定的时间或者间隔内处理业务逻辑的方法.一般创建一个Cronjob有两种方式,第一种是定义Java类,由Hybris生成脚本并加入数据库.第二种是直接编写gr ...
- RyuJIT的华丽转身【译文】
2018-06-19 RyuJIT是作为.NET即时编译器的代号称谓,它是.NET运行时的基本组件之一.与此相反的是,Roslyn作为C#编译器,其编译C#代码成为IL字节码.然后,其再将IL字节码编 ...
- 微信服务号 redirect_uri域名与后台配置不一致,错误代码10003
微信服务号开发获取用户openid时一直提示 redirect_uri域名与后台配置不一致,错误代码10003:后台也配置了域名 原因: 结果:获取到了openid
- 使用node.js进行API自动化回归测试
概述 传统的QA自动化测试通常是基于GUI的,比如使用Selenium,模拟用户在界面上操作.但GUI测试的开发.维护成本和运行的稳定性一直是测试界的老大难问题.投入大量的人力物力开发.维护.运行,却 ...
- 安卓开发ScrollView嵌套ListView只显示一行
在用列表控件做一个“更多功能”的界面的时候 <?xml version="1.0" encoding="utf-8"?> <ScrollVie ...
- Kotlin入门(16)容器的遍历方式
Kotlin号称全面兼容Java,于是乎Java的容器类仍可在Kotlin中正常使用,包括大家熟悉的队列ArrayList.映射HashMap等等.不过Kotlin作为一门全新的语言,肯定还是要有自己 ...
- (后端)java回调机制
转自强哥: 所谓回调,就是客户程序C调用服务程序S中的某个函数A,然后S又在某个时候反过来调用C中的某个函数B,对于C来说,这个B便叫做回调函数.例如Win32下的窗口过程函数就是一个典型的回调函数. ...
- JMeter—监听器(十二)
参考<全栈性能测试修炼宝典JMeter实战>第六章 JMeter 元件详解中第七节监听器用来显示JMeter取样器的测试结果,能够以树.表.图形形式显示,也可以以文件方式保存. 一.设置默 ...
- ext与xfs文件系统比较与总结
centos7.0开始默认文件系统是xfs,centos6是ext4,centos5是ext3 1.EXT2简介 EXT2第二代扩展文件系统(英语:second extended filesystem ...