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程序----嵌入在HTML文档中并让他弹出“hello world”,在控制台中输出“你好呀”(提示,按F12打开控制台)

JS变量以及数据类型

学习时间:40min
学习目标:
理解变量命名的要求
掌握数字与字符串相加结果
了解数字与字符串作比较

变量命名

定义变量的要求:
只能包含 数字 字母 _ $
不能以数字开头
不能和JS原本的API或语法词冲突
定义变量的规范:
见名知意
驼峰 / _ 连词

使用var关键字来定义变量,省略也同样可以成功
(可能刚学完C语言会不太适应,因为通常需要预先设定数据类型,比如int char 之类,而在JS当中只需要使用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类型的变量

  1. 字符串类型(String)
    在JS使用字符串需要使用引号(" ")引起来,加上引号表示的就是字符串。使用双引号或是单引号都可以,但是不要混着用,引号不能嵌套,双引号里面不能不能放双引,单引号里面不能放单引号
var a='12345';
var b="hello,there";

其中的a,b都是字符串变量

  1. 布尔类型(Boolean)
    布尔值的取值只有两个–true 和 false
    除条件判断外,做运算时,true可当1运算;false当做0运算
var yes=true;
var no=false;
  1. 空值(NULL)
    表示声明对象为赋值,Null类型的值只有一个就是null,null这个值专门用来表示这个为空的对象
var empty=null;
  1. 未定义(Undefined)
    声明变量未赋值属于undefined类型
var a;
alert(a);

将会弹出显示undefined
因为变量a虽然被声明但没有赋值,属于未被定义的变量

  1. 对象(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

学完本小节来操作一下:
按F12打开控制台后,在控制台中运行这段程序来检验一下~

var x=10;
alert(x + 2 + "x" + 1);

JS 的函数

学习时间:15min
学习目标:
掌握函数的声明方法,调用方法与返回值

函数

声明

函数的声明方法:

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"));

会和之前一样的运行结果哦~

学完本小节来操作一下:
1.用控制台运行本小节所有含有“本代码段可以复制后直接使用F12调试台验证 ”的代码段
2.写一个属于自己的sayhello函数并通过打开HTML文件运行成功~

JS语句

学习时间:40min
学习目标:
完全掌握以下几种语句
知道with语句

语句大致分为以下几种

  1. if语句
  2. 迭代语句
  3. break/continue/with
  4. 标签语句
  5. switch语句

If语句

和C语言中的If语句描述基本相同,一分钟过一下

if (condition1) statement1 else if (condition2) statement2 else statement3

举个具体点的例子就是:

if (i > 30) {
   
  alert("大于 30");
} else if (i < 0) {
   
  alert("小于 0");
} else {
   
  alert("在 0 到 30 之间");
}

迭代语句

do-while

和C语言中极其类似,十秒钟过一下

do {statement} while (expression);

例子:

var i = 0;
do {
   i += 2;} while (i < 10);
while

和C语言中极其类似,十秒钟过一下

while (expression) statement

例子:

var i = 0;
while (i < 10) {
   
  i += 2;
}
for

和C语言中极其类似,十秒钟过一下

for (initialization; expression; post-loop-expression) statement

例子:
本代码段可以复制后直接使用F12调试台验证

iCount = 6;
for (var i = 0; i < iCount; i++) {
   
  alert(i);
}
for-in

for-in迭代器,用于枚举对象的属性。mark一下,由于还没有复习到面向对象编程部分,先挂在这里,回头再来看看

for (property in expression) statement

例子:

for (sProp in window) {
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值