编程,无非就是写指令。不过面对黑白相接的C/C++等语言,太过于枯燥。不知道哪天开始,就喜欢上了能直接看到效果的前端,谨以本账号在简书记录一下本人在前端的学习生涯。
说起来对javascript这个语言,了解也有一段时间了。只是一直堕于记笔记,确实是一个非常致命的习惯。所以今天开始尽量多在简书上写一下自己的学习感受与笔记吧。先上一点基础内容。
说起任何一种新的事物,每个人最开始的困惑一定是,这个东西是做什么的,有什么用,好。那么我们就先了解一下js这门语言。
1.javascript相关知识的介绍
1.1 js的作用
主要作用就是用来实现网页中的各种功能,以及制作酷炫的网页特效,同时对新手接触编程来说又是非常友好的一门若变量类型语言,不需要像iOS与安卓开发一样关注内存释放的问题,却也可以同时完成移动端的开发工作。
1.2 js与ECMA的关系
javascript是由公司开发而成的,欧洲的这个ECMA组织,制定了js的标准,取名为ECMAScript
1.3 js的现状
- 前些年之前,js被认为是“牛皮癣”,用来制作页面上的广告,如弹窗、漂浮的广告条之类的。以至于浏览器推出了屏蔽广告的功能。
- 2004年js命运开始改变,那一年谷歌公司开始带头使用Ajax技术,并从当时开始逐步提升用户体验。
- 2007年乔布斯发布了iPhone,这一年,用户就多了上网的途径,就是用移动设备上网,js在移动页面中,也是不可或缺的。并且这一年,互联网开始标准化,按照W3C规则三层分离,结构,样式,JS。人们越来越重视js了。
- 2011年,node.js诞生,使js能够开发服务器程序了。
2.标识符###
2.1 什么是标识符
- 程序员自己在程序中起的一些名字就叫标识符
2.2 标识符的作用
- 从字面来理解,就是用来表示某些东西的符号,标识的目的就是为了将这些东西区分开来
- 其实标识符的作用跟人类的名字差不多,为了区分每个人,就在每个人出生的时候起了个名字
- 比如,我们在学习选择器中的class选择器或者id选择器的时候,给标签的class或者id起名字一样
2.3 标识符命名规则(必须遵守什么?)
- 只能由26个英文字母的大小写、10个阿拉伯数字(0~9)、下划线或$符号组成
- 严格区分大小写:比如A和a是两个不同的标识符
- 不能以数字开头
- 不能是ECMAScript的保留关键字,详询W3C
2.4 标识符的命名规范?
- 起一个有意义的名字,能够提高代码的可读性
- 驼峰命名法(除开头第一个单词,后面每个单词的首字母都大写)
3.常量###
3.1 什么是常量?
表示一些固定的数据,也就是不能改变的数据,比如:1、2、3、4、5、6、7、a、b、c
4.变量###
4.1 什么是变量?
- 表示的数据可以经常修改的,当一个数据的值需要经常改变或者不确定时,就应该用变量来表示
- 比如:游戏的积分
- 超市存储物品的小柜子
4.2 声明变量及变量的赋值
- 4.2.1 先定义后初始化
- 使用var关键字来生命变量(var LG),变量声明之后,该变量是空的(它没有值),如需向变量赋值,请使用“=”复制,如LG="ZL";
- 4.2.2 定义的同时进行初始化
- 也可以在声明变量时对其复制,如var LG="ZL";
- 4.2.3 同时定义多个变量
var name="ZL",age=22,job="CEO";
- 4.2.4 声明也可以跨越多行:
var name="ZL",
age=22,
job="CEO";
- 4.2.5 value=undefine
在计算机程序重,经常会声明无值的变量。未赋值的变量,其值实际上是undefined。如在执行过:var LG后,变量LG的值将为undefined。
5.运算符
5.1 算术运算符
+ 加
- 减
* 乘
/ 除
% 取余
++ 自加
-- 自减
5.2 赋值运算符
= 赋值
+= 加等于
-= 减等于
*= 乘等于
/= 除等于
%= 取余等于
5.3 关系运算符(比较运算符)
== 是否相等(值相等)
=== 是否全等(值与类型都相等)
> 大于
< 小于
>= 大于等于
<= 小于等于
!= 不等
5.4 逻辑运算符
&& 与(都为真才为真)
|| 或(一真则真)
! 非(取反)
5.5 条件运算符、三目运算符(三元运算符),多数情况用于给变量赋值
var rst = a>b?a:b; //理解为a是否大于b,如果是,则返回a,否则返回b
6.数据类型
6.1 string,字符串,用引号包裹,在js中单双引号效果相同,不过定义字符串尽量先使用双引号,字符串里面再需要引号时使用单引号,外双内单。
6.2 number,数值型(有整型与浮点型)
6.3 bool,布尔型(只有真或假)
6.4 null,空值(没有值,可用于清除变量,暂时的理解)
6.5 undefined,未定义(有值,值为undefined,常见于定义了变量,但未对其进行赋值)
6.6 array,数组
6.7 object,对象
7.条件语句,用于进行流程控制###
7.1 if语句
语法:
if(条件){
//执行语句
}
7.2 if...else语句
语法:
if(条件){
//执行语句
}else{
//执行语句
}
7.3 if...else if...else语句,可无限往下写条件进行流程控制
语法:
if(条件){
//执行语句
}else if(条件){
//执行语句
}else{
//执行语句
}
8.switch语句###
8.1 语法
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
8.2 工作原理
工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
8.3 注意default关键词
使用default关键词来规定匹配不存在时做的事情
9.javascript中的内置函数,简单了解###
9.1 console对象
- console.log(控制台输出内容)
9.2 prompt函数
- 接收用户输入的值,返回值为字符串。
10.练习###
10.1 请用prompt输入三个并使用三目运算符求出最大值
代码:
var num1 = parseInt(prompt("请输入第一个值")),
num2 = parseInt(prompt("请输入第二个值")),
num3 = parseInt(prompt("请输入第三个值"));
var rst = num3>(num1>num2?num1:num2)?num3:(num1>num2?num1:num2);
console.log(rst);
10.2 要求用户输入月份,弹出对应的季度
代码:
var month = parseInt(prompt("请输入月份"));
switch (month){
case 3:
case 4:
case 5:
alert(month+"月是春天");
break;
case 6:
case 7:
case 8:
alert(month+"月是夏天");
break;
case 9:
case 10:
case 11:
alert(month+"月是秋天");
break;
case 12:
case 1:
case 2:
alert(month+"月是冬天");
break;
default:
alert("您输入的是无效内容,请重新输入");
}
10.3 要求用户输入分数,求成绩等级
代码:
var score = parseInt(prompt("输入成绩"));
if(score>=80&&score<=100){
alert("优秀");
}else if(score>=60&&score<80){
alert("中等");
}else if(score>=0&&score<60){
alert("不及格");
}else{
alert("输入的成绩非法")
}
求分数也可用switch来写,但是有一个问题是分数除以十以后,若向下取整那么101到109分数的也会显示优秀,在不使用if语句时无法解决问题。向上取整时则-1到-9会显示不及格,不满足客观事实,所以不予采用switch写分数判断
11.while与do...while循环,重复做相同的事情###
11.1 While 循环会在指定条件为真时循环执行代码块
语法:
while(条件){
//执行语句
}
11.2 do/while循环是 while 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。
语法:
do{
//执行语句
}while(条件)