从零开始的javascript(1.1 ver)

创作时间: 14 Jul 2022 14:07
正文:
注:该文章是我写的,发布在这里,有编者居然直接用从入门到入土来搬,对编者表示强烈谴责(逃)(bushi

没错!你们眼前的virusJoevirusJoe居然真的开坑啦!

你个鸽子还会开坑???
没错,先开着(


基本信息:什么是javascript?

很简单,js(javascript)是一种web编译语言,被许多网站所使用。
误区:javascript虽然名字里有java,但是与java不相关。

为什么用javascript?

相比其他语言来说,

  • 它不像C等是编译语言,而是脚本语言
  • 它是动态语言,这就是说它可以在网页上边写边运行
  • 它的入门门槛较低,基本上只要懂一点python就可以看懂javascript
  • 许多网站和浏览器都使用javascript

入门:什么是javascript?

唉等等等等,你不是说过了吗?你是不是又想水一段?
你看看开头,基本信息和入门可是不一样的。
在这个章节里,你会了解到…

  • javascript在网页上的作用
  • javascript与其它语言的配合
  • javascript的函数
  • more…

OK,let’s go!

javascript在网页上的作用

javascript在网页上用来被控制网页中的行为
可能有人就要问了:啊virusJoe你个大聪明,你直接用<button>他不香吗?
以下是一段代码,你试试看:


wow
代码就是由javascript组成的,现在我们找出它的代码:

<p id="demo">
我变绿
</p>
<script>
function becomeGreen()
{
    x=document.getElementById("demo")
    x.style.color="#31ff31";         
}
</script>
<button type="button" onclick="becomeGreen()">点击这里</button>

等一等,这不是纯纯的html吗……等等,{ }是啥情况,这不是java吗
没错,javascript其实就是仿java制作的,我们把代码拆开来就能看清楚了:
这一段是html
<p id="demo">
我变绿
</p>
<script>

这一段是javascript
function becomeGreen()
{
    x=document.getElementById("demo")
    x.style.color="#31ff31";         
}

这一段是html
</script>
<button type="button" onclick="becomeGreen()">点击这里</button>

就那么简单。

javascript与其它语言的配合

很简单,在html使用<script></script>即可。
俗话说得好:

网页三大法宝:html,css,js。

这就好比一部电梯,html是电梯厢,css是电梯门和广告牌,js则是电梯里的按钮

elevator
灵魂画手之《电梯》

只要缺了一个,那这个电梯就不完整了
那作为电梯上的按钮,如果光有按钮,那再怎么按都没有用

所以,接下来,我们学习基础语法,让按钮起作用!

芜湖起飞

基础语法:逻辑为先

不学好逻辑,你电梯都掉下去…
在这个章节里,你会学到…

  • javascript的函数
  • javascript的变量
  • javascript的循环与条件

javascript的函数

javascript的函数代码如下:

function aFunction()
{
alert('awa')
}

其中aFunction()是函数的名字,而alert('awa')则是执行的动作
function是函数的定义方式,function本身的意思也是函数
注:alert的效果就点一下下面的按钮吧;)


这就好比说是一个上楼命令,每当你说一次,他就会上升一次
那你就不能直接说报几楼吗,他直接上到几楼不就好了?

对的,这就是我们接下来就要学习的

javascript的变量

javascript的变量很简单,代码如下:

var myvar=114514;

是不是看出来了?这就是普通的变量赋值钱加上了var而已
var:variable(变量)很简单吧
而且它也能存储字符串
var myvar="jiege";

很不戳
这就好比是把楼层上传给电梯,让它收到命令后自己动
不过说到这儿了,我们也得介绍另外两位——let和const!
这两个与var最大的区别就是let设定之后不能改变,而const只能在设定时改变,且不能再次改变
这就好比说var面板的属性是可以随意更改的,楼层可以随意变:
var floor=114514;
var floor=3.1415926;
//这个也太奇怪了,九又四分之三楼(bushi
var floor=1782378912698;
//…

而let面板只能有这一个属性,之后就没办法再动了:
let floor=114514;
//let说:定!
/*
这些都不能运行啦a
let floor=3.1415926;
哼哼哼哈啊啊啊啊啊啊
let floor=1782378912698;
哈啊啊啊啊啊
*/

const面板更严格,你必须输入一个楼层再动(话说不应该就是这样吗)
const floor;
//…?抱个错吧
const floor=114514;
//ok

当然啦,如果嫌很烦,那可以直接这样用:
floor=114514;
floor=3.1415926;
floor=1782378912698;

这样子的效果和上文的var就一样了
你不早说
……
真不戳,但是为什么只开了一次就停了?
当然你可以在html里就设置循环,但我们要介绍的就是

javascript的循环与条件

while循环

这就是了,你要的while循环:

while (i<10)
{
    floor=i;
    i++;
}

我们来拆开看一看:
在while (i<10)中,i<10是它的停止条件
如果你不添加,这个电梯就停不下来了
接下来再把现在的楼层设为i
最后i++的意思是把i变量先运算,后增长
相反的,++i的意思是把i变量先增长,后运算
在电梯里我们可以这样理解:
电梯制造到了九楼,到十楼就不行了
那如果楼层到了还不停还不停怎么办?
if?
不错,又被你蒙中了,就是if

if…elif…else…

if代码如下:

if (floor=5)
{
    text="到了";
}
else if (floor=9)
{
    text= "到顶了";
}
else
{
    text="还没到";
}

在if (floor=5)/else if (floor=9)中,floor=5是执行条件
当楼层为5层/9层时就会执行
有没有发现if/else if的区别
if和elif?
对的,就是python中if…elif…else…的逻辑,只不过略有区别而已
电梯中,当到5楼后就会输出“到了”,到9楼后则会输出“到顶了”,否则就输出“还没到”
当然啦,你如果喜欢,你可以试试看

for循环

for循环哪里方便了吗,python里要blabla一大堆…
停!上代码:

for (var i=floor; i<10; i++)
{
    note=i;
}

停停停,为什么三个条件?你说清楚啊
……
第一个指的是提前执行的条件,比如var i=floor在这里代表的就是在开始循环前把变量floor赋值给i
如果你有提前赋过值,那不写也可以
var i=floor
for (; i<10; i++)
{
    note=i;
}

第二个则是循环结束的条件,在这里的i<10就代表i小于10时,循环停止运行。
当然,如果你能,你可以选择在循环内停止。
注意!如果你不让它停止,它会一直运行直到你的服务器被卡崩
第三个是每次循环后的运行条件,它会在每一次运行之后执行。
当然,你也能在循环内写,这样第三个也能被省略:
for (var i=floor; i<10; )
{
    note=i;
    i++
}

现在电梯的机械已经差不多了:一个变量控制面板和一个逐层上升的电机
不戳,但是每次这个电梯都要到了楼层才能点,像这样子真的很烦(
有道理
那既然说到电梯楼层的排列,你会想到什么?
emm…python的列表
对了,就是列表!

JavaScript的数据类型

(注:由于变量已经讲过,故不再赘述,请翻到前面看)

数组(Array)

az…啥是数组啊???
别急,上个代码就知道了:

const floors = [114514,1919810,287786917969];

列表!不过为什么是const?
这里就不得不提到它的一个特点——虽然它不能再次赋值,但是它可以改变数组内项的数据
const floors = [114514,1919810,287786917969];
floors[2] = 793;
//现在的floors:[114514,1919810,793]

而且最逆天的是,数组赋值可以轻松破掉const!:
const floors = [];
floors[0] = 114514;
floors[1] = 1919819;
floors[2] = 793;
//这个不会报错!

啊啊啊啊啊,我学了个啥啊(
awa二二二

一周一更不缺席awa

打分:

rating: 0+x

标签:

分享:http://netboard.wikidot.com/blog:417

评论数: 0

Add a New Comment
找Netboarder要授权