在网页的HTML数据制作过程中,由于网页大多数是可以分为动态网页和静态网页,动态网页是指,在一个html页面上,所需要的数据是需要根据用户的需求来完成的,用户可以在该动态网页中实现数据的变化,即实时对数据进行增删改查的功能,这种动态网页的制作,大多数需要与后端的数据进行连接,常用的数据存储技术有数据库技术或者文件技术,常用的数据库软件就是MySql或者Sql Server,利用ajax进行前端数据向后端数据进行传输的特点。静态网页是指如果将该网页一旦放置在浏览器中,其中的所有数据都成为了固定的,即数据是不会再变化的,但是在现如今的大多数的网页中,大多都使用的是动态网页,这也就必须要对JavaScript以及TypeScript进行进一步的升入了解。
JavaScript是一种脚本语言,它可以实现对网页上的一些状态的实时更新,比如说在网页上使用百度地图,在网页中点击按钮后触发点击事件,以及在网页中实现各种各样的交互式的编程。在JavaScript中很明显的一个特征就是所有的定义的数据的特点都是一个对象,而不是在C/C++中存在的有int,float,double等多种特定类型的数据,在HTML页面上嵌入JavaScript时,在前端的没一个标签种获取的数据大多都是字符串形式,如果需要获取特定类型的数据,则可以将数据传送到后端,然后将数据在后端进行处理,处理完成之后再将数据由后端再传输到前端进行展示即可。接下来就会总结出一些有关于JavaScript的一些操作。
1. 利用JavaScript获取一个<input>方框标签中用户获取的数据时,此时就可以再该input标签中设置一个id选择器,然后使用var context=document.getElementById()的语法就可以实现对数据的获取,如下图中所示的信息就可以得出相应的数据(alert(),是一种在前端界面上可以实现弹出一个小窗口的功能):
在使用上述的语句使用点击事件实时弹出一个方框中的数据的过程中,我遇到了两个个问题,这个问题就是起初我在设置input标签的id时,使用的id="context",在该情况的使用下,页面如愿的给我报了一堆错误,还有一个错误就是我在使用alert(context1)弹窗进行实时展示时,页面会给我报出如下的一个奇怪的东西,而不是一个特定的input方框中的值,这是由于如下展示的是一个对象,而不是一个值,如果要展示值的话就要var context2=context1.value;这样就可以实现获取一个值的方式。这也体现了JavaScript在前端使用时,每一个获取的值就是一个对象的特点:
2. 利用JavaScript语言创建一个方法,使用的就是在第一问中的方式,但是这种方式仅仅限于页面标签使用的是button标签,就如同上述的在button中使用οnclick=“”事件,然后再在<script></script>中使用function的方式对该点击事件进行定义就可以,但是这种事件的触发不能单纯的只用一个按钮标签,有时候为了美观,点击事件还可以由其余的方式来实现,比如使用a标签,p标签,div标签等等,而这些触发事件的使用就需要引入jquery的js文件,然后使用‘$’的方法就可以触发点击事件了,如下图中所示:
3.利用JavaScript实现往方框中写入数据的方法就是使用document.write()的方式,如下所示:
介绍完成关于我常用的JavaScript的使用语言,接下来就是介绍如何使得Javascript生效的方法,主要有两种方法,第一种是直接在HTML文件使用<script></script>,然后在其中嵌入js语言即可生效,还有一种方法就是使用引入js代码的方式,将js文件放置在一个专门存储js的文件夹中,然后在需要生效的html文件中引入即可,重点介绍第二种方法,因为这种方式是比较常用的,它可以使得数据的兼容性很高,可以使得文件的独立性更高,出现失误也会很快的找出错误的原因,这种js文件的独立也可以让多种html共同使用,如下图中所示的引用方法(使用第一问的类型来对该过程进行分析,在界面上的运行效果是与第一问相同的情况):
如下所示的使用的是相应的JS代码实现的在网页中弹出一个消息为"11"的形式:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
TypeScript是JavaScript的超集,其中蕴含着有JavaScript的所有类型的语法,因此对于一个TypeScript文件中,可以兼容JavaScript的语法关于TypeScript的内容我不是很清楚,通过查阅资料以及课堂中老师的讲解,我可以将该种类型的语言的一些数据类型进行一个总结:
1.number类型:例如定义一个num为number类型的数据,即let num: number=123;
2.string类型:例如定义一个name为string类型的并且需要给name赋值,即let name: string="Hello".
3.布尔类型的数据:let king: boolean=true;
4.在TS中的null以及undefined既是类型值也是一格特定的值,因此在TS文件中使用这种类型时最好加以注解的形式来对其进行书写,这样才能够使得TS文件的书写更加通畅。
通过上述关于JavaScript以及TypeScript的学习总结,可以得出这两种语言都是对前端界面上的数据进行规范化处理的一种方式,其中最常用的就是JS形式,这是前端基础之一,在前端界面上进行开发主要使用的就是HTML,CSS以及JS的格式,而TS文件是对JS的一个升华,可以更好的对文件数据进行对象化的封装处理,基于这些过程,由于技术在不断革新,如果在开发中具有不知道的情况,可以在网络中查找,毕竟学会利用网络资源也是学习知识的有效方法之一。