讲给后台程序员看的前端系列教程(27)——JavaScript简介


C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

JavaScript概述

绝大部分人头一回看到JavaScript的时候都会觉得JavaScript是Java的一个分支。然而,非也;两者之间并没有多大的关系。JavaScript与Java的关系就像“大熊猫”与“小熊猫"、“雷峰塔”与“雷锋”它们本质上是两种不同的编程语言。其实,在这门语言设计之初Netscape将其命名为LiveScript,之后才改成了现在的名字JavaScript。嗯哼,化解这个小误解之后我们来瞅瞅JavaScript的真正面目。

  • JavaScript是一种广泛应用于浏览器的编程语言;入门容易,功能强大,操作简单,即使是程序设计新手也可以快速地使用JavaScript进行简单的编程。

  • JavaScript可被嵌入到HTML文件中,使网页更好地与用户交互,提升用户体验

  • JavaScript是一种基于对象和事件驱动,并具有安全性能的脚本语言。

概括地讲:JavaScript是一门运行在浏览器的脚本编程语言

JavaScript特性

JavaScript是脚本语言

脚本(Script)简单地说就是一条条的文本命令,按照程序流程执行。常见的脚本语言有 JavaScript、VBScript、Perl、PHP、Python 等,而 C、C++、Java、C#这些语言不属于脚本语 言。它们的区别在于,非脚本语言一般需要编译、链接,生成独立的可执行文件后才能运行;而脚本语言依赖于解释器,只在被调用时自动进行解释或编译。脚本语言缩短了传统语言“编写— 编译—链接—运行”的过程。
脚本语言通常都有简单、易学、易用的特点,语法规则比较松散,使开发人员能够快速完成 程序的编写工作,但其缺点是执行效率不如编译型的语言快。不过,由于计算机的运行速度越来越快,脚本语言的效率问题几乎可以忽略不计。

JavaScript可以跨平台

JavaScript语言不依赖操作系统,仅需要浏览器的支持。目前,几乎所有的浏览器都支持 JavaScript。在移动互联网时代,利用手机等各类移动设备上网的用户越来越多,JavaScript的跨平台性使其在移动端也承担着重要的职责。例如,JavaScript可以搭配CSS3编写响应式的网页,或者将网页模仿成移动APP的交互方式使APP开发和更新的周期变短。JavaScript还可搭配HTML5中的Canvas 技术进行动画和游戏制作。

JavaScript支持面向对象

面向对象是软件开发中的一种重要的编程思想,其优点众多。例如,基于面向对象思想诞生了许多优秀的库和框架,可以使JavaScript开发变得快捷和高效,降低了开发成本。近几年, Web前端开发技术曰益受到重视,除了经典的JavaScript库jQuery又诞生了 Bootstrap、 AngularJS、Vue.js、React、webpack等框架和工具。

JavaScript的组成

JavaScript可大概分成三部分:

  • ECMAScript:JavaScript的语法标准

  • DOM:JavaScript操作网页上元素的API

  • BOM:JavaScript操作浏览器的部分功能的API

JavaScript常见写法

JavaScript有两种常见的写法,分别介绍如下

外链式写法




<html lang="en">

<head>
    <meta charset="utf-8">
    <title>JS的写法title>
    <script type="text/javascript" src="test.js">
    script>
head>

<body>
body>

html>
  • 将JavaScript相关代码写在.js文件中
  • 请以分号";"结束每一行JavaScript代码
  • 利用的src属性链接.js文件
  • 为提高浏览器的解析效率,尽量将多个js文件合并成一个js

内嵌式写法

示例如下:

<html>
    <script type="text/javascript">
    //此处为JS代码
    script>
html>
  • 置于HTML中
  • 标签内写JavaScript的相关代码
  • 请以分号";"结束每一行JavaScript代码

在开发中为便于代码的修改和维护推荐大家采用外链式写法书写JavaScript代码。但是,在本教程中为了方便,我更多地采用内嵌式写法。

JavaScript注释

在JavaScript中常用注释方式有:单行注释和多行注释,示例如下:

// 单行注释

/* 
多行注释
多行注释
*/

JavaScript入门程序

好了,在对JavaScript有了最朦胧的初步了解之后;按照国际惯例,我们写一个JavaScript的Hello World程序

利用alert( )弹出信息

代码如下:




<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Hello Worldtitle>
head>

<body>
    <script type="text/javascript">
    alert("Hello World");
    script>
body>

html>

运行后,效果如下图所示:

讲给后台程序员看的前端系列教程(27)——JavaScript简介_第1张图片

在此,利用alert( )在网页中弹出提示消息。

利用confirm( )显示确认对话框

代码如下:




<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Hello Worldtitle>
head>

<body>
   <script type="text/javascript">
      confirm("您真的要关闭此网页么?");
   script>
body>

html>

运行后,效果如下图所示:
在这里插入图片描述

在此,利用confirm( )显示一个带有指定消息和确定及取消按钮的对话框。

利用prompt( )接收用户输入

代码如下:




<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Hello Worldtitle>
head>

<body>
   <script type="text/javascript">
      prompt("请输入您的会员卡号");
  script>
body>

html>

运行后,效果如下图所示:
讲给后台程序员看的前端系列教程(27)——JavaScript简介_第2张图片

在此,利用prompt( )接收用户的输入信息。

利用console.log( )输出日志

代码如下:




<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Hello Worldtitle>
head>

<body>
    <script type="text/javascript">
       console.log("This is log message");
    script>
body>

html>

运行后,效果如下图所示:
讲给后台程序员看的前端系列教程(27)——JavaScript简介_第3张图片

在此,利用console.log( )输出日志进行代码的调试。

类似地,我们还常用console.dir( )输出对象的所有属性和方法。

利用document.write( )向输出流写信息

代码如下:




<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Hello Worldtitle>
head>

<body>
    <script type="text/javascript">
       document.write("本文作者:谷哥的小弟 
博客地址:http://blog.csdn.net/lfdfhl"
);
script> body> html>

运行后,效果如下图所示:
讲给后台程序员看的前端系列教程(27)——JavaScript简介_第4张图片

在此,利用document.write( )向输出流写信息,输出信息可以是纯文本也可包含HTML标签

你可能感兴趣的:(讲给后台程序员看的前端系列教程)