硬汉嵌入式论坛

 找回密码
 立即注册
查看: 1985|回复: 3
收起左侧

[RL-TCPnet教程] 【RL-TCPnet网络教程】第48章 JavaScript基础知识

[复制链接]

740

主题

1326

回帖

3546

积分

管理员

春暖花开

Rank: 9Rank: 9Rank: 9

积分
3546
QQ
发表于 2018-1-11 15:45:26 | 显示全部楼层 |阅读模式
第48章  JavaScript基础知识

     本章节为大家讲解JavaScript基础知识,JavaScript属于网络脚本语言,被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用,是因特网上最流行的脚本语言。
      (本章的知识点主要整理自网络)
      48.1 初学者重要提示
      48.2 JavaScript基础知识参考资料
      48.3 JavaScript基础知识点
      48.4 HTML中嵌入JavaScript的方法
      48.5      总结



48.1  初学者重要提示
1、学好JavaScript有举足轻重的作用,如果打算深入Web前端设计,JavaScript必学。
2、通过本章的学习,要为后面章节学习Ajax(异步JavaScript+XML)技术做准备。
3、关于JavaScript的学习资料汇总和快速上手的说明专门放在了此贴里面:
http://bbs.armfly.com/read.php?tid=36065 。由于涉及到的资料不是我们原创,所以就不往教程中添加了,建议初学者必看!!!

48.2  JavaScript基础知识参考资料
      大家可以从以下地址获得JavaScript基础知识参考资料:
1、wiki百科中文版JavaScript:地址链接(这个是超链接)
2、wiki百科英文版JavaScript:地址链接(这个是超链接)
3、百度百科JavaScript:地址链接(这个是超链接)
      对这些基础知识有个了解后,直接看48.1小节中推荐的入门学习资料即可。

努力打造安富莱高质量微信公众号:点击扫描图片关注
回复

使用道具 举报

740

主题

1326

回帖

3546

积分

管理员

春暖花开

Rank: 9Rank: 9Rank: 9

积分
3546
QQ
 楼主| 发表于 2018-1-11 15:50:00 | 显示全部楼层
48.3  JavaScript基础知识点
      (这里的知识点整理自上面的参考资料地址和w3school)
      教程这里也对JavaScript的基础知识做个介绍,方便大家先有个大概的认识。

48.3.1 JavaScript简要说明
      JavaScript,一种高级编程语言,通过解释执行,是一门动态类型,面向对象(基于原型)的直译语言。它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、FireFox、Safari、Opera)支持。JavaScript是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程、命令式编程以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。
     虽然JavaScript与Java这门语言不管是在名字上,或是在语法上都有很多相似性,但这两门编程语言从设计之初就有很大的不同,JavaScript的语言设计主要受到了Self(一种基于原型的编程语言)和Scheme(一门函数式编程语言)的影响。在语法结构上它又与C语言有很多相似(例如if条件语句、while循环、switch语句、do-while循环等)。
      在客户端,JavaScript在传统意义上被实现为一种解释语言,但在最近,它已经可以被即时编译(JIT)执行。随着最新的HTML5和CSS3语言标准的推行,它还可用于游戏、桌面和移动应用程序的开发和在服务器端网络环境运行,如Node.js。
一般来说,完整的JavaScript包括以下几个部分:
    1、ECMAScript,描述了该语言的语法和基本对象。
    2、文档对象模型(DOM),描述处理网页内容的方法和接口。
    3、浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。
它的基本特点如下:
    1、是一种解释性脚本语言(代码不进行预编译)。
    2、主要用来向HTML页面添加交互行为。
    3、可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
JavaScript常用来完成以下任务:
      1、嵌入动态文本到HTML页面。
      2、对浏览器事件作出响应。
      3、读写HTML元素。
      4、在数据被提交到服务器之前验证数据。
      5、检测访客的浏览器信息。
      6、控制cookies,包括创建和修改等。

48.3.2 JavaScript发展史
      1995年,当时在网景公司就职的Brendan Eich正为Netscape Navigator 2.0浏览器开发的一门名为LiveScript的脚本语言。后来网景在与Sun公司合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似,是当时网景为了营销考虑与Sun达成协议的结果。
      JavaScript推出后在浏览器上大获成功,微软公司不久后就为Internet Explorer 3.0浏览器推出了JScript,用来与处于市场领导地位的网景产品同台竞争。JScript也是一种JavaScript实现,这两个JavaScript语言版本在浏览器端共存意味着语言标准化的缺失,对这门语言进行标准化被提上了日程,在1997年,由网景、Sub、微软、Borland等公司组织及个人组成的技术委员会在ECMA(欧洲计算机制造商协会)确定定义了一种名叫ECMAScript的新脚本语言标准,规范名为ECMA-262。JavaScript成为了ECMAScript的实现之一。
      完整的JavaScript实现应该包含三个部分:ECMAScript(语言核心)、DOM(文档对象模型)和BOM(浏览器对象模型)。
      JavaScript目前为甲骨文公司在美国的注册商标。

48.3.3 JavaScript特性
      JavaScript脚本语言具有以下特点:
1、脚本语言
      JavaScript是一种解释型的脚本语言。C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
2、基于对象
      JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
3、设计简单紧凑
      JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
4、动态性
      JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行点击或上下移、窗口移动等操作,JavaScript都可直接对这些事件给出相应的响应。
5、跨平台性
      JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。
------------------------------------
      不同于服务器端脚本语言,例如PHP与ASP。JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持。所以早期程序员比较青睐于JavaScript来减少对服务器的负担,而与此同时也带来另一个问题:安全性。
      随着服务器的强壮,虽然程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时,有些特殊功能(比如Ajax)必须依赖Javascript在客户端进行支持。随着引擎(比如V8)和框架(比如Node.js)的发展,及其事件驱动、异步IO等特性,JavaScript逐渐被用来编写服务器端程序。且在近几年中,Node.js的出世,让JavaScript也具有了一定的服务器功能,且在某些方面比PHP的效果更为显著。

努力打造安富莱高质量微信公众号:点击扫描图片关注
回复

使用道具 举报

740

主题

1326

回帖

3546

积分

管理员

春暖花开

Rank: 9Rank: 9Rank: 9

积分
3546
QQ
 楼主| 发表于 2018-1-11 15:54:11 | 显示全部楼层
48.4 HTML中嵌入JavaScript的方法
      HTML 中的脚本必须位于<script>与</script>标签之间。脚本可被放置在HTML页面的<body>和<head>部分中。

48.4.1 <script>标签
      如需在HTML页面中插入JavaScript,需使用<script>标签。<script>和</script>会告诉 JavaScript在何处开始和结束。<script>和</script>之间的代码行包含了JavaScript:
  1. <script>

  2. alert("My First JavaScript");

  3. </script>
复制代码
     浏览器会解释并执行位于<script>和</script>之间的JavaScript。一些老旧的实例可能会在<script> 标签中使用 type="text/javascript",现在已经不必这样做了。JavaScript是所有现代浏览器以及HTML5 中的默认脚本语言。

48.4.2   <head>或<body>中的JavaScript
     用户可以在HTML文档中放入不限数量的脚本。脚本可位于HTML的<body>或<head>部分中,或者同时存在于两个部分中。通常的做法是把函数放入<head>部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
1、<head>中的JavaScript函数
     我们这里把一个JavaScript 函数放置到HTML页面的<head>部分。该函数会在点击按钮时被调用:
  1. <!DOCTYPE html>

  2. <html>

  3.   <head>

  4.     <script>

  5.     function myFunction()

  6.     {

  7.       document.getElementById("demo").innerHTML="My First JavaScript Function";

  8.     }

  9.     </script>

  10.   </head>

  11.   <body>

  12.     <h1>My Web Page</h1>

  13.     <p id="demo">A Paragraph.</p>

  14.     <button type="button" onclick="myFunction()">点击这里</button>

  15.   </body>

  16. </html>
复制代码
将这个代码放在Notepad++里面编辑运行,会看到如下效果:
48.1.png
                              
点击“Try it”按钮后,效果如下:
48.2.png

2、<body>中的JavaScript函数
     同样,我们这里把一个JavaScript函数放置到HTML页面的<body>部分,该函数会在点击按钮时被调用:
  1. <!DOCTYPE html>

  2. <html>

  3.   <body>

  4.    <h1>My Web Page</h1>

  5.    <p id="demo">A Paragraph</p>

  6.    <button type="button" onclick="myFunction()">Try it</button>

  7.   

  8.    <script>

  9.    function myFunction()

  10.    {

  11.      document.getElementById("demo").innerHTML="My First JavaScript Function";

  12.    }

  13.    </script>

  14.   

  15.   </body>

  16. </html>
复制代码
注:我们把 JavaScript 放到了页面代码的底部,这样就可以确保在 <p> 元素创建之后再执行脚本
将这个代码放在Notepad++里面编辑运行,会看到如下效果:
48.3.png
点击“Try it”按钮后,效果如下:
48.4.png

48.4.3   JavaScript脚本放在外部文件
    JavaScrip脚本也可以保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部JavaScript文件的扩展名是 .js。如需使用外部文件,需要在 <script> 标签的 "src" 属性中设置该 .js 文件:
  1. <!DOCTYPE html>

  2. <html>

  3. <body>

  4. <script src="myScript.js"></script>

  5. </body>

  6. </html>
复制代码
在<head>或<body>中引用脚本文件都是可以的,实际运行效果与大家在<script>标签中编写脚本完全一致。
(注:外部脚本不能包含<script>标签。)

努力打造安富莱高质量微信公众号:点击扫描图片关注
回复

使用道具 举报

740

主题

1326

回帖

3546

积分

管理员

春暖花开

Rank: 9Rank: 9Rank: 9

积分
3546
QQ
 楼主| 发表于 2018-1-11 15:54:49 | 显示全部楼层
48.5 总结
      关于本章节,我们这里讲解比较简单,建议初学者务必看48.1小节中推荐的入门学习资料。

努力打造安富莱高质量微信公众号:点击扫描图片关注
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|Archiver|手机版|硬汉嵌入式论坛

GMT+8, 2024-11-1 07:18 , Processed in 0.387460 second(s), 28 queries .

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表