avaScript和Java有什么联系
根据目前我自己的理解,不要被名字有相似字节所欺骗,这两个语言其实没有什么联系,如果说有的话,应该就是关键字和对象的一些范畴有点相似或者说是有种模仿的感觉。但是实际上一个作为脚本的轻量语言[^7],一个作为有完整体制的大型语言[^8],两者是没有任何可比性的。
JS的内链外链
内链
JS的内链,也就是在html文件内的调用使用与css类似,也有两种方式,即在html文件的<head></head>中书写使用或是在<body></body>中使用。
<head></head>内书写
在<head></head>中对JS的代码进行书写时,我们使用<script></script>对我们的JS代码进行包裹,与html及CSS的法则一样,其作用也是用来标明其JS的代码块属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>
<button type="button" onclick="displayDate()">显示日期</button>
</body>
</html>
###### <body></body>内书写
与在<head></head>中类似的,我们在<body></body>中对JS的书写和使用同样是在<script></script>中实现,其作用也与上述的一致。
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
</body>
</html>
外链
与css有些不同的,JS的外链同样使用的是<script></script>标签来实现。JS即可以出现本地的JS文件的链接,也可以调用网上的JS文件进行链接,但调用网络上的文件有可能会受到目标文件服务器和网络的影响,使用的频率没有本地的调用高。
调用本地JS文件:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../js/js_for_Seat_selection_nterface.js" ></script>
</head>
<body>
</body>
</html>
调用网络的JS文件:
<!DOCTYPE html>
<html>
<head>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"> </script>
</head>
<body>
</body>
</html>
JS的外链与css类似的,也可以在同个文件里调用多个JS文件使用。其中还有很多较css的相似部分就不在这里重复说了,可以参考之前的css部分内容。
JS的语法关键字
JS的语法关键字有很多很多,因为JS是一门以对象为基础的语言,我们在使用会发现很多例如document.getElementById("demo").innerHTML=x;的语句,这里的getElementById(),innerHTML其实都是JS为我们已经封装(可以理解为打包)好了的方法和方法中的参数。所以我们在这里主要介绍一些基本的关键字。
function
function的作用其实很简单,就是声明一个函数,表明我这里的是一个函数,我们用一个看例子来看:
function myFunction(){
var x="";
var time=new Date().getHours();
if (time<20){
x="Good day";
}
document.getElementById("demo").innerHTML=x;
}
上述的例子就是为我们声明了一个叫做myFunction的的函数,其后的花括号中包含的就是函数中的内容。
var
在JS中,var的作用就是声明一个变量,在JS中,对于变量的类型没有严格的规定,所以JS也是一门弱语言,被定义的变量只有在第一次被赋值时才会被系统分配相应数据类型的空间。
var a;
a=10;
但实际上我们会发现,在实际使用时不仅仅是var可以声明一个变量,$也可以成功声明一个变量,甚至不需要任何的申明关键字也可以直接创建一个变量。但实际上是有非常大的差别的,$是JQ中的一个已经过定义的自定义函数名,而在单纯的JS中是没有任何意义的,一般是在你的文件已经引入了一个JQ数据库后才出现$也可以创建变量的情况,而相较于不使用任何关键字而直接创建一个变量,其实质是在整个JS文件的最上层windows中创建了一个对象属性,详细的解释我会在文末提供一个网络来源的博客地址,其中对创建对象属性有一个较为详细的解释。
所以我们在声明创建变量时一定要使用var关键字,不使用任何关键字创建变量,虽然可行,但却存在着语法错误。
new
与其它的面向对象方法一样的,JS中创建对象所使用的个关键字也是new,我们通过它来创建一个对象。
person=new Object();
在上述的例子中,我们创建了一个名为person的对象,object我们在这里可以简单的理解为一个类型为对象的数据结构。这句代码的意思就是创建一个对象,对象名为person。
JS的结构语句
其实说是JS的结构语句,我们不难发现的,这些结构语句其实很多都是我们在其他语言中也能见到的语言语法,我们在这里也是将它们简单的归类再来说明一下。
###### if else
if else语句主要的作用其实也很简单,就是做一个判断,就像它的翻译 一样——如果….就….. 否则…..。
if(...){
...
}
else{
....
}
上述的就是它的基本格式,我们可以看到在if后面的小括号中会有一个判断语句,其中的语句用来判断真假来控制语句的执行部分。花括号中的就是满足条件时执行的语句。
这一条语句是可以嵌套的,我们通过对它的嵌套来进行多层的判断。
if(...){
if(...){
...
}
else{
....
}
}
else{
....
}
while
我们先来看它的格式:
while(...){
...
}
while是一个循环语句,在关键字后面的小括号中,也同样是一条判断语句,用来控制循环的执行。在花括号中是我们的循环内容。
do while
可能我们会发现,这条语句和上一条语句非常的相似,我们还是先来看它的格式:
do{
...
}while(...)
它一样是一条控制循环的语句,不过和上一个语句有所区别的,它是先循环后判断,而while是先判断后循环,有的时候我们在不以言大哥情况下使用会达到不一样的效果。
for
js for( var i=0;1<=10;i++){ ... }
for语句也同样是一个循环语句,我们在上面举出了一个实例,从例子中我们看到,for和它的循环语句是有区别的,我们需要在判断的语句中定义变量,规定执行循环的条件,及控制循环的条件变化。
但实际上,有些时候我们只需要写明控制循环的条件语句就可以了,其他的两条语句可以不在括号中写出。但要注意的,我们需要保留它的分号,不然会出现语法错误。
switch
js switch(...){ case '...': ...;break; case '...': ...;break; .... default:...; }
这是一个条件选择语句,我们通过判断语句来选择到一个具体的分支,执行相应的语句。
有关于break,default 的作用,我们就不细说了,大家可以去网上查看它的详细信息。
JS的效果实现(HTML的事件响应)
我们已经很简单的介绍了一下JS的语法和关键字,那么我们下面来说在网页中如何触发JS的代码,又或者说是如触发相应的事件。
##### 点击事件
点击事件就是通过页面点击触发的事件,我们要注意的,在网页中其实不是只有按钮才可以作为点击事件的载体,基本上所有的网页元素都可以作为点击事件的载体。也就是说其实我们可以在任意一个元素中添加一个点击事件。
下面我们来看常用的格式:
<html>
<body>
<input type="checkbox" name="ticket_seat"id="tucket_18" class="ticket_input"value="18"onclick="ticket_onclick()">
<script>
function ticket_onclick(){
...
}
</script>
</body>
</html>
在上述的例子中我们可以看到,在标签中加入一个onclick属性,在后面写上要触发的函数名。这样我们在点击网页上的元素之后,我们就可以触发相应的JS函数。
对于我们的onclick字段,我们可以像常规的函数调用来看待它,也就是说,我们也是可以通过它向函数传入参数。
后记:对于大部分转行的人来说,找机会把自己的基础知识补齐,边工作边补基础知识,真心很重要。
"我们相信人人都可以成为一个IT大神,现在开始,选择一条阳光大道,助你入门,学习的路上不再迷茫。这里是北京尚学堂,初学者转行到IT行业的聚集地。"
TML+CSS学完好久了,一直没啥时间总结,现在总结了下学的过程:
之所以放在一起总结,是因为HTML和CSS没有啥很多的编程逻辑,都是需要去记住并且熟练使用的,熟练使用是得去一个个敲过一遍。所谓的代码量积累好像就是这么回事,只有多敲才能会。
小白用的哔哩哔哩上的教程视频,因为个人学习方法的原因,都是跟着那教程去敲的,当然课后练习的话,都是自己先摸索敲了一遍在去看的讲解,小白觉得这样可以加深印象。
还有就是没有熟练之前要天天的去练,哪怕一天半小时也好。因为一旦一天没有练就会忘掉,还得回去找之前的笔记来看。(因为有事耽搁了两三天没去学,结果又重头的看了一遍,血淋淋的学习效率教训。不管怎样,贵在坚持。)
当然,因为小白基础是真的差,没有什么教程是可以完完全全都讲完的,使用小白看完了哔哩哔哩的教程又跑去了网易云课堂找了一份HTML+CSS的教程来看,为的是查漏补缺。
有一种播放叫做1.5倍播放。看的过程,别跟播放器里一倍的速度看,调成1.5倍或是2.0倍播放速度,因为那些东西,多数都是理解使用的。哪怕忘了,百度一下就可以直接搞定了。打基础阶段所以还是记住熟练使用才好。
HTML小白也就看了两天吧,用了半天做了下练习;CSS对于零基础的人来说建议12-15天,当然小白之前有过这些概念,所以用了五天多点的时间。JS才刚刚开始学,所以不知道时间怎么算才好。因为前端三大基石:HTML+CSS+JS,HTML+CSS学习所使用的时间占比才百分之五,剩下的百分之九十五都是JS的学习时间。
找课程时记住,找一两个课程,一个全心去学,一个查漏补缺就好,别一会儿这个课程看一下,那个课程看一下的。这样子反而会使自己心浮气躁没法静下心来去学。打基础的视频教程,其实都一样的,没啥有特别好的特别坏的。
tml是一种标记语言,准确地来说应该是超文本标记语言。什么叫标记语言呢?
很多谍战电视剧里面经常有这样的桥段:要刺杀一个很重要的人物需要一个组织内部的很多人来配合完成,A负责监视并传达信息给B,B在收到信息后判断是否对目标进行刺杀。比如A传递信息的手段是做标记,在某面墙上画个圆圈代表可以动手。画个叉代表时机不成熟,不能动手。画个方块,代表情况不明需要进一步监视探明情况。B在看到标记后就知道是什么意思。这就是标记,标记代表一定的意思,也可以称呼为标记语言。
那什么又是超文本呢?看其字知其意,就是超越文本。我们一般传递意思大部分都是文字,说话说的都是文字,写信一般也全是用文字来表述意思。超文本不光有文字,它还包括图片、链接甚至是音乐和程序等非文字的元素。
发微信消息就可以体会出来,除了发文字我们也会发图片,甚至斗图。如果有好听的音乐也可以分享给好友听。如果你还懂程序的话,你也可以发给好友。
Html既然是一种超文本标记语言,可想而知它里面包含的标记应该有很多。每个标记代表一个意思,用不同比较组合起来就可以表达一整串完整的意思。
比如说这个,四个标记可以完整表达一个成语的意思。猜猜是什么成语吧。
在动手开始写hmtl标记之前,我们需要一点准备。
1. 在你的电脑桌面新建一个记事本。
注意记事本的后缀名(也就是图中最后面的.txt)必须要有,如果没有这个要调出来。
我的电脑是win10系统的,以下以win10系统为例。其他系统的可以百度自行搜索。
调的步骤为:1)打开我的电脑
2)选择查看
3)勾选文件扩展名
调整完成后,以后再新建记事本就会看到扩展名了。
2. 打开记事本,在里面写一个标记<a href="http://www.baidu.com">百度</a>
注意:<a></a> 这个就是html众多标记中的一个标记,我们叫做a标记,这个<a>叫a标记的开始,这个</a>叫做a标记的结束。他们两个是天生一对。href=”http://www.baidu.com”,这个就是百度的网址,只有写了这个,才知道是要去百度,你要不写,那谁知道你要去哪里呢。当然这个网址你也可以改成腾讯或者是新浪的网址。
3. 将记事本的txt后缀名改为html。(我这里不光改了后缀名,也将新建文本文档改为了index)。
注意,你改完以后的图标可能和我的不一样,这是因为我安装的是360浏览器,你安装是其他浏览器,所以不一样。不一样是正常的。
4. 双击打开这个文件。
双击打开以后,我会看到两个带下划线的字——百度。
5. 点击百度两个字,我们就可以跳转到百度官网了。
总结:
1.本文粗略介绍了超文本标记语言的意思
2.动手实践写了一个a标记
3.实践之前的一些准备(新建记事本,改后缀名)
4.具体介绍了a标记的写法,里面包含一个href(用来写网址的地方)
编程最重要的是动手,看是看不会的,很多人都是看得特别明白,以为自己已经会了,但是一动手大脑就一片空白。什么也写不出来。所以编程最重要的就是要动手,动手一遍强过看明白十遍。一定要动手做一遍。
Ps:a标记一般也叫做a标签,一般我们习惯叫做a标签。
有什么不懂的地方,可以留言咨询。
*请认真填写需求信息,我们会在24小时内与您取得联系。