1. bread鸿运国际论坛/
  2. 嵌入式论坛/
    1. 电子论坛综合区
    2. 嵌入式论坛
    3. 电源技术论坛
    4. 硬件设计论坛
    5. 测试测量论坛
    6. 检测技术与质量
    7. EDA设计论坛
    8. 综合技术与应用
    9. 开源硬件
    10. IC设计论坛
    11. 消费电子论坛
    12. 无线通信论坛
    13. 个人版区
    14. 厂商专区
    15. 论坛服务区
    16. 高校联盟
    17. 供求信息发布
  3. 嵌入式系统论坛
    1. ARM技术论坛
    2. Android论坛
    3. Linux论坛
    4. 单片机/MCU论坛
    5. FPGA|CPLD|ASIC论坛
    6. DSP论坛
  4. / 第48章 JavaScript基础知识
    关闭提示
12下一页

[经验] 第48章 JavaScript基础知识

[复制链接]
版主
发表于 2018-1-11 16:58:11   224 查看 29 回复 只看该作者 倒序浏览
分享
转帖
本章节为大家讲解JavaScript基础知识,JavaScript属于网络脚本语言,被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用,是因特网上最流行的脚本语言。
      (本章的知识点主要整理自网络)
      48.1 初学者重要提示
      48.2 JavaScript基础知识参考资料
      48.3 JavaScript基础知识点
      48.4 HTML中嵌入JavaScript的方法
      48.5      总结

评分

参与人数 1积分 +5 收起 理由
star_66666 + 5 资源分享达人,加分鼓励!
查看全部评分
版主
发表于 2018-1-14 04:24:46    楼主|
48.1  初学者重要提示
1、学好JavaScript有举足轻重的作用,如果打算深入Web前端设计,JavaScript必学。

2、通过本章的学习,要为后面章节学习Ajax(异步JavaScript+XML)技术做准备。

3、关于JavaScript的学习资料汇总和快速上手的说明专门放在了此贴里面:

由于涉及到的资料不是我们原创,所以就不往教程中添加了,建议初学者必看!!!

评分

参与人数 1积分 +5 收起 理由
star_66666 + 5 资源分享达人,加分鼓励!
查看全部评分
回复 点赞 举报
版主
发表于 2018-1-14 04:25:08    楼主|
48.2  JavaScript基础知识参考资料
      大家可以从以下地址获得JavaScript基础知识参考资料:

1、wiki百科中文版JavaScript

2、wiki百科英文版JavaScript

3、百度百科JavaScript

      对这些基础知识有个了解后,直接看48.1小节中推荐的入门学习资料即可。

评分

参与人数 1积分 +5 收起 理由
star_66666 + 5 资源分享达人,加分鼓励!
查看全部评分
回复 点赞 举报
版主
发表于 2018-1-14 04:25:28    楼主|
48.3  JavaScript基础知识点
      (这里的知识点整理自上面的参考资料地址和w3school)

      教程这里也对JavaScript的基础知识做个介绍,方便大家先有个大概的认识。

评分

参与人数 1积分 +5 收起 理由
star_66666 + 5 资源分享达人,加分鼓励!
查看全部评分
回复 点赞 举报
版主
发表于 2018-1-14 04:43:06    楼主|
8.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。
回复 点赞 举报
版主
发表于 2018-1-14 04:43:27    楼主|
一般来说,完整的JavaScript包括以下几个部分:
    1、ECMAScript,描述了该语言的语法和基本对象。
    2、文档对象模型(DOM),描述处理网页内容的方法和接口。
    3、浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。
回复 点赞 举报
版主
发表于 2018-1-14 04:43:42    楼主|
它的基本特点如下:
    1、是一种解释性脚本语言(代码不进行预编译)。
    2、主要用来向HTML页面添加交互行为。
    3、可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
回复 点赞 举报
版主
发表于 2018-1-14 04:43:57    楼主|
JavaScript常用来完成以下任务:
      1、嵌入动态文本到HTML页面。
      2、对浏览器事件作出响应。
      3、读写HTML元素。
      4、在数据被提交到服务器之前验证数据。
      5、检测访客的浏览器信息。
      6、控制cookies,包括创建和修改等。
回复 点赞 举报
版主
发表于 2018-1-14 04:44:18    楼主|
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目前为甲骨文公司在美国的注册商标。
回复 点赞 举报
版主
发表于 2018-1-14 04:44:35    楼主|
48.3.3 JavaScript特性
      JavaScript脚本语言具有以下特点:
1、脚本语言
      JavaScript是一种解释型的脚本语言。C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
2、基于对象
      JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
3、设计简单紧凑
      JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
4、动态性
      JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行点击或上下移、窗口移动等操作,JavaScript都可直接对这些事件给出相应的响应。
5、跨平台性
      JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。
回复 点赞 举报
版主
发表于 2018-1-14 04:44:51    楼主|
不同于服务器端脚本语言,例如PHP与ASP。JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持。所以早期程序员比较青睐于JavaScript来减少对服务器的负担,而与此同时也带来另一个问题:安全性。
      随着服务器的强壮,虽然程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时,有些特殊功能(比如Ajax)必须依赖Javascript在客户端进行支持。随着引擎(比如V8)和框架(比如Node.js)的发展,及其事件驱动、异步IO等特性,JavaScript逐渐被用来编写服务器端程序。且在近几年中,Node.js的出世,让JavaScript也具有了一定的服务器功能,且在某些方面比PHP的效果更为显著。
回复 点赞 举报
版主
发表于 2018-1-14 04:45:08    楼主|
48.4 HTML中嵌入JavaScript的方法
      HTML 中的脚本必须位于<script>与</script>标签之间。脚本可被放置在HTML页面的<body>和<head>部分中。
回复 点赞 举报
版主
发表于 2018-1-14 04:45:26    楼主|
48.4.1 <script>标签
      如需在HTML页面中插入JavaScript,需使用<script>标签。<script>和</script>会告诉 JavaScript在何处开始和结束。<script>和</script>之间的代码行包含了JavaScript:
<script>

alert("My First JavaScript");

</script>
回复 点赞 举报
版主
发表于 2018-1-14 04:45:42    楼主|
浏览器会解释并执行位于<script>和</script>之间的JavaScript。一些老旧的实例可能会在<script> 标签中使用 type="text/javascript",现在已经不必这样做了。JavaScript是所有现代浏览器以及HTML5 中的默认脚本语言。
回复 点赞 举报
版主
发表于 2018-1-14 04:46:11    楼主|
48.4.2   <head>或<body>中的JavaScript
     用户可以在HTML文档中放入不限数量的脚本。脚本可位于HTML的<body>或<head>部分中,或者同时存在于两个部分中。通常的做法是把函数放入<head>部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
回复 点赞 举报
版主
发表于 2018-1-14 04:46:36    楼主|
1、<head>中的JavaScript函数
     我们这里把一个JavaScript 函数放置到HTML页面的<head>部分。该函数会在点击按钮时被调用:
<!DOCTYPE html>

<html>

  <head>

    <script>

    function myFunction()

    {

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

    }

    </script>

  </head>

  <body>

    <h1>My Web Page</h1>

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

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

  </body>

</html>
回复 点赞 举报
版主
发表于 2018-1-14 04:46:54    楼主|

将这个代码放在Notepad++里面编辑运行,会看到如下效果:
回复 点赞 举报
版主
发表于 2018-1-14 04:47:22    楼主|

点击“Try it”按钮后,效果如下:
回复 点赞 举报
版主
发表于 2018-1-14 04:47:40    楼主|
2、<body>中的JavaScript函数
     同样,我们这里把一个JavaScript函数放置到HTML页面的<body>部分,该函数会在点击按钮时被调用:
<!DOCTYPE html>

<html>

  <body>

   <h1>My Web Page</h1>

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

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

  

   <script>

   function myFunction()

   {

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

   }

   </script>

  

  </body>

</html>
回复 点赞 举报
版主
发表于 2018-1-14 04:47:58    楼主|

注:我们把 JavaScript 放到了页面代码的底部,这样就可以确保在 <p> 元素创建之后再执行脚本
将这个代码放在Notepad++里面编辑运行,会看到如下效果:
回复 点赞 举报
12下一页
高级模式
您需要登录后才可以回帖 登录 | 注册
关闭

站长推荐 上一条 /7 下一条

快速回复 返回顶部 返回列表
  1. time最新主题
  2. recommend推荐主题
  3. hot热门主题
  4. post 我的帖子
-

推荐专区

技术干货集中营

专家问答

用户帮助┃咨询与建议┃版主议事

工程师杂谈

工程师创意

工程师职场

论坛电子赛事

社区活动专版

发烧友活动

-

嵌入式论坛

ARM技术论坛

Android论坛

Linux论坛

单片机/MCU论坛

FPGA|CPLD|ASIC论坛

DSP论坛

嵌入式系统论坛

-

电源技术论坛

电源技术论坛

无线充电技术

-

硬件设计论坛

PCB设计论坛

电路设计论坛

电子元器件论坛

控制|传感

总线技术|接口技术

-

测试测量论坛

LabVIEW论坛

Matlab论坛

测试测量技术专区

仪器仪表技术专区

-

EDA设计论坛

multisim论坛

PADS技术论坛

Protel|AD|DXP论坛

Allegro论坛

proteus论坛|仿真论坛

EasyEDA-中国人自已的EDA工具

Orcad论坛

-

综合技术与应用

电机控制

智能电网

光电及显示

参考设计中心

汽车电子技术论坛

医疗电子论坛

-

开源硬件

-

无线通信论坛

无线通信技术专区

天线|RF射频|微波|雷达技术

-

IC设计论坛

芯片测试与失效分析

Mixed Signal/SOC[数模混合芯片设计]

Analog/RF IC设计

设计与制造封装测试

-

厂商专区

TI论坛

TI Deyisupport社区

-

检测技术与质量

电磁兼容(EMC)设计与整改

安规知识论坛

检测与认证

-

消费电子论坛

手机技术论坛

平板电脑/mid论坛

音视/视频/机顶盒论坛

-

电子论坛综合区

聚丰众筹官方社区

新人报道区

聚丰供应链

-

论坛服务区

-

供求信息发布

供需广告

招聘┃求职发布区

电子展览展会专区

鸿运国际手机欢迎你