RE: 0 从头开始学JS
写在最前面的话
由于项目需求,所以开始温习JS。以此博客敦促自己,也以此记录自己的经验与教训,有失误之处还请各位不吝赐教。
同样,本博客也是给我各位亲爱的可爱学弟们看的QwQ
由于都是有点C语言基础的,所以可能会选择性跳过一些过于简单的内容~会着重写一些与C不同的地方以及JS 的独有特性,这样学起来也快一点,轻松一点
学习程度:掌握>理解>了解>知道
JS原生初级
过渡篇
学习时间:30min
学习目标:
掌握JS的引用,掌握注释的使用方法
了解alert函数
JS写在哪?
具体实例请参照代码段
1. script标签
script 标签可以加标签属性:type=“text/javascript” 或者 language=“javascript”,也可以不加
2. 引入外部js文件
使用src属性
如果script用来去引入js文件,那么它里面就不能再写js代码了
3. 写在标签属性里面
ps:一个页面可以插入多个script标签来引入多个js片段
<body onload="alert(666);">
<script>
alert("123");
</script>
<script src="你要链接的文件名"></script>
</body>
会先后弹窗显示123 和 666
常用的测试方法
1.使用alert()函数。具体使用可以参照下面
alert(233);
使用之后浏览器会弹出提示框并显示相关内容
2.使用控制台输出
console.log(233);
使用之后,当使用浏览器打开文件时,按F12会在console中显示
JS冷知识
script标签位置
script标签能放在任意的位置,但是最终会被浏览器整合在head或者body里面
所以说,我们需要将script标签放置于head或者body标签包含的内容里面
通常我们会把js代码写在结构结束之后,也就是body的最后面,就像这样:
<body>
<script>alert(1);</script>
</body>
注释
与C语言类似,多行注释使用 /* 我是注释*/ ,单行注释为 //我是注释,例子如下
/* 用这对符号,
可以完成对多行代码的注释*/
//当然,这样也可以
ps:注释最好应当统一风格,在两种注释方法中选择一种使用
JS变量以及数据类型
学习时间:40min
学习目标:
理解变量命名的要求
掌握数字与字符串相加结果
了解数字与字符串作比较
变量命名
定义变量的要求:
只能包含 数字 字母 _ $
不能以数字开头
不能和JS原本的API或语法词冲突
定义变量的规范:
见名知意
驼峰 / _ 连词
使用var关键字来定义变量,省略也同样可以成功
总的来说和C语言的变量命名方式区别不大,同时也兼容中文变量的命名,但是不推荐这样使用
var a=0;
var a1=1;
var _a=2;
var $a=3;
a=4;
小明=5;
以上这些都是可以通过的命名方式
但在实际运用中,我们常使用驼峰命名法:
var myMoneyCount
这个变量就表示“我钱的数量”这重意思
数据类型
1.数值类型(Number)
无论是整数还是浮点数,八进制还是十进制,在JS当中,数据类型都是Number类型,例如
var x = 10;
var y = 10.5;
其中的x,y都是Number类型的变量
- 字符串类型
在JS使用字符串需要使用引号(" ")引起来,加上引号表示的就是字符串。使用双引号或是单引号都可以,但是不要混着用,引号不能嵌套,双引号里面不能不能放双引,单引号里面不能放单引号
var a='12345';
var b="hello,there";
其中的a,b都是字符串变量
- 布尔类型(Boolean)
布尔值的取值只有两个–true 和 false
除条件判断外,做运算时,true可当1运算;false当做0运算
var yes=true;
var no=false;
- 空值(NULL)
表示声明对象为赋值,Null类型的值只有一个就是null,null这个值专门用来表示这个为空的对象
var empty=null;
- 未定义(Undefined)
声明变量未赋值属于undefined类型
var a;
alert(a);
将会弹出显示undefined
因为变量a虽然被声明但没有赋值,属于未被定义的变量
- 对象(Object)
这个类型会在后续"面向对象编程"那里展开讨论
数字与字符串
数据类型的判断函数
使用typeof函数如:
本代码段可以复制后直接使用F12调试台验证
var x = 10;
console.log(typeof(x));//会显示 number
console.log((a))//会显示undefined,在这里先存一个悬念,就叫它'小笨蛋不知道'定理好了
var a='12345';
console.log(typeof(a));//会显示 string
var b="hello,there";
console.log(typeof(b));//会显示string
var yes=true;
console.log(typeof(yes));//会显示boolean
var empty=null;
console.log(typeof(empty));//会显示object,这是一个存在了很久的bug,暂时还没有被修复
就可以判断出数据的类型辣!
数字与字符串加和问题
先来问一个小问题,变量x,y,z,a,b,c分别是什么数据类型:
var x=10;
var y='10';
var z=10+y;
var a=5;
var b=x+a;
var c=b+y;
首先,x和y的数据类型根据之前的学习应该还是比较好判断的
数值类型(Number)
无论是整数还是浮点数,八进制还是十进制,在JS当中,数据类型都是Number类型
字符串类型
在JS使用字符串需要使用引号(" ")引起来,加上引号表示的就是字符串。使用双引号或是单引号都可以,但是不要混着用,引号不能嵌套,双引号里面不能不能放双引,单引号里面不能放单引号
所以很容易就可以知道x是数字类型,而y是字符串类型。
接下来就要解决z的问题了,可能小伙伴们会疑惑,为什么数字可以和字符串加起来呢?这在C语言当中妥妥的报错呀~
在JS当中,‘+’这个符号有着不少的特殊行为。
x | y | x+y |
---|---|---|
数字 | 数字 | 数字之和 |
10 | 10 | 20 |
字符串 | 字符串 | 字符串拼接 |
‘10’ | ‘10’ | ‘1010’ |
数字 | 字符串 | 数字转化为字符串后拼接 |
15 | ‘20‘ | 1520 |
’20’ | 15 | 2015 |
在字符串与数字相加时,数字会先转化为字符串然后按照字符串相加的规律进行拼接。
翻页有点麻烦,把之前的代码抄下来
var x=10;
var y='10';
var z=10+y;
var a=5;
var b=x+a;
var c=b+y;
经过刚才的学习,现在显而易见的可以看出来,z和c的类型是字符串 ,a和b的类型是数字。
可以通过
alert(typeof(z));
来验证一下~
再来求一下z,b,c的值
z-->10+y=10+'10'=1010
b-->10+5=15
c-->15+'10'=1510
最后,来一道题目检验一下学习成果~
本代码段可以复制后直接使用F12调试台验证
var x=10;
alert(x + 2 + "x" + 1);
答案应该是12x1~
咱来一步步解析
首先x+2 原式=12+"x"+1
接着12+"x" 原式="12x"+1
最后得出12x1辣~
数字和字符串比较问题
var a=2>1;
var b=2<1;
这两个比较的答案是显而易见的,a=true,b=false,
var c="beta">"alpha";
var d="Beta">"alpha";
则比较的是字符串的ascll码,
“b”>“a”,所以c=true
而“B”<“a”,所以d=false
那么难题来了,以下的数据比较怎么完成呢?
var e=25"<3;
var f="25"<"3";
var g="a"<3;
e在比较时字符串 “25” 将被转换成数字 25,然后与数字 3 进行比较,结果不出所料。e=false
f 比较的是字符串 “25” 和 “3”。两个运算数都是字符串,所以比较的是它们的字符代码(“2” 的字符代码是 50,“3” 的字符代码是 51)f=true
而g在比较时,由于a无法转化成数字,所以无法比较,只能返回错误,也就是false。g=false
JS 的函数
函数
声明
函数的声明方法:
function functionName(arg0, arg1, ... argN) {
statements
}
其中的arg0,arg1,…argN都是传入函数的参数,如果没有参数直接省略括号内的内容就好啦~
先来举个例子嗷,上一个经典款的sayhi函数
function sayHi(Name, Message) {
alert("Hello " + Name + Message);
}
调用
首先声明
function sayHi(Name, Message) {
alert("Hello " + Name + Message);
}
接着直接使用函数名+传入参数形式来调用(和C语言及其相似)
本代码段可以复制后直接使用F12调试台验证
function sayHi(Name, Message) {
alert("Hello " + Name + Message);
}
sayHi("heng"," have a good day");
返回值
和C语言当中一样,JS中的函数可以有返回值(也可以没有)
在函数返回某个值的时,函数结束并返回特定值
继续用sayhi函数来举例,这时候我们不直接用alert来显示结果,而是通过显示函数返回值的形式:
本代码段可以复制后直接使用F12调试台验证
function sayHi(Name, Message) {
return ("Hello " + Name + Message);
}
alert(sayHi("heng"," have a good day"));