js的三种特性,三大组成部分,三个基本功能

时间:2019-11-27
本文章向大家介绍js的三种特性,三大组成部分,三个基本功能，主要包括js的三种特性,三大组成部分,三个基本功能使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

js与3这个数字有种不解之缘,它的许多属性有三种,如下是我简单的归纳

js的三种特性

  • 弱类型
  • 解释型
  • 单线程

向html文档中链接javascript代码的三种方式

  • 内联js代码
  • 嵌入式js代码
  • 外部js代码

js的三大组成部分

  • ECMAScript 简称es是js的基本语法

    • 分为es5与es6
    • 现在常用的语法是es6

  • DOM document object model 文档对象类型

  • BOM Browser Object Model 浏览器对象模型

js三个基本功能

  • 修改html文档
  • 与服务器通信
  • 存储数据

js的三种特性的理解
弱类型就是说它对声明变量的类型的关键字不是像c语言,c++那么苛刻,只需要var就可以初始化一个变量.至于变量的类型是根据其后的值的类型自动判断的,不需要我们手动的去设置.这也反映出js是特别灵活的语言
解释型是说语言的编译模式,解释型语言是逐语句执行代码通过解释器将语句翻译成机器语言再给操作系统.
单线程是说js语句只能一句一句的执行,不能同时两个js文件都同时执行,至于异步与线程我有点搞不明白,以后再写吧.

说点题外话,我在前几天学python的时候,看到了编译型与解释型语言的区别,我认为比较的详细,如下是我简单的归纳

编译型语言和解释语言

  • 编译器

计算机不能直接理解任何除机器语言以外的语言,所以必须要把程序员缩写的程序语言翻译成机器语言,计算机才能执行程序,将其他语言翻译成机器语言的工具,被称为编译器

  • 编译器的种类

    编译器翻译的方式有两种,一个是编译,另外一个是解释,两种方式之间区别在于翻译时间点不同.

    当编辑器以编译的方式运行我们称其为编译器,当以解释型的方式运行我们称为解释器.

  • 编译型与解释型的优缺点

    • 编译型是把源代码直接转换为可执行文件,操作系统是直接执行可执行文件,而解释型语言是逐语句执行源代码,然后将语句再给操作系统,解释器中间没有生成可执行文件,而是充当一个媒介.所以编译型语言效率高.
    • 在可移植性上,编译型语言的源代码在不同的系统上可能需要修改,而解释型语言只是解释器不同,源代码不需要修改.所以可移植性上来说,解释型比编译型要好.
    • 解释型语言只回在出错的情况下,暂停执行,之前的语句还可以运行,而编译型语言在编译一开始到结束都会检查,只要有错误啥都运行不出来

js的三大组成部分的对比
内联js代码:
最常见的使用方式是向某个元素增加一个点击行为
缺点:
和内联css一样,js的效果仅仅局限在该元素内部,既不能被缓存,也不可复用.除非整个html页面都被缓存了,否则每次加载页面,这些js语句都要重新绑定.
总结:
通常来说,使用内联js是不明智的,不过我们在这里用js事件演示浏览器与用户的交互倒是个不错的办法.这里使用js代码会引入很多多余的行为处理,从而搅乱html文档结构.而且我们有种术语称这种内联代码,叫”侵入式js”(obtrusive javascript).但我们需要的是”低调的js” (unobtrusive javascript)

<nav>
    <li><a href="javascript:;" onclick="alert('what\'s problem of you?')">你有什么问题?</a></li>
    <li><a href="../" onclick="return false;">我没病</a></li>  
</nav>

嵌入式js代码:
尽管它未彻底解决对html文档的侵扰问题,但是这种放在html里面的代码,其语法风格已经与低调的代码毫无二致了.
嵌入式js也放在html文档种只不过它们都位于<script>元素范围内而且只在加载页面执行.
我们将以嵌入式js代码风格去写上述的功能:

<nav>
    <li><a href="#" id="problem">你有什么问题?</a></li>
    <li><a href="../" onclick="return false;">我没病</a></li>  
</nav>
<script>
    function Problem(){
       alert("what\'s problem of you?");
    }
    function noProbem(){
        console.log(123); 
        return false;
    }
    var elem = document.getElementById("problem");
    var elem1 = document.getElementById("noproblem");
    elem.addEventListener("click",Problem,false);
    // elem1.addEventListener("click",noProbem,false);
    elem1.onclick = noProbem;
</script>

以上实验,
script代码做了三件事
1. 定义了两个函数
2.定义了两个变量
3.设置了一个时间监听器和点击事件
但我们发现事件监听器不能对阻止浏览器在用户点击之后执行链接跳转操作

外联式js代码:
我们可以将上述html文档的script标签中的所有js代码都移动到单独的js文件中,再利用html中script标签的src属性将外部的js文件引入html文档中,并执行源文件里面的函数,一般我们都在html文档的末尾引入

<html>
<head></head>
<body>
<script src="js/script.js"></script></body>
</html>

在文档末尾引入js文件,从技术角度看,虽然html文档的任意位置都可以链入js文件,然而浏览器在渲染和执行js代码时,可能会由于链入的位置而导致一些难缠的性能问题,所以还是放在文档末尾比较好,再者如果我们使用的是渐进增强式开发,即使没有js的情况下网页依然能狗运转,所以这样做不会出问题,使用js只是为了改善用户体验,让项目能够及时满足用户需求.最后,当整个html文档都加载完之后,再用js对html的dom进行操作会更容易.

js的三大组成就是我们一直要写的和用的东西,在之后会详细讲的,不得不说这确实多.

js三大基本功能
修改html文档
　　有了js我们可以用它来向html文档中添加,插入及移除内容了,这些操作的具体形式可以是通过js向文档中加入一个标记块,修改样式,增加或移除属性.整个文档内容尽在js的控制下.
这是一项重要的技能,我们需要大量使用它,必须完全掌握
与服务器通信
　　通常谈论与服务器通信时,大多指的是ajax,使用js与服务器通信对于开发者和用户来说都是省时省力的方案,好处是我们只需更新页面中的一小部分内容就可以,这样可以节省带宽,不必为了获取新的数据而强迫用户刷新整个页面.
存储数据
　　js语言的另外一项重要功能就是存储数据,和数据库差不多,主要区别是客户端访问服务器端的数据要比直接访问客户端本地数据慢得多,如果有些数据从客户端获取到的话那就绝不要去向服务器端要.

不过还有种前端的说法就是

js有两大功能:一个是交互 第二是动效  不过呢这两点都可以归结为修改js三大基本功能里的修改html文档

原文地址：https://www.cnblogs.com/lionli/p/11945057.html

随机文章
Javascript知识点必读
最近更新