JavaScript(1) -- JS入门

1.   JavaScript介绍

JavaScript是属于HTML与Web的解释性编程语言，也是一种以函数优先的弱类型轻量级的脚本语言，无需进行预编译即可与HTML前端页面进行行为交互，支持跨平台运行，可在多种平台下（如Windows、Linux、Mac、Android、iOS等）。目前JavaScript被广泛地应用于Web前端Html实现页面交互、实现浏览器页面事件响应、前端数据验证、检验访客浏览器信息、控制cookies的创建与修改、基于Node.js技术进行服务器端编程。

2.   JavaScript基本语法

2.1. JavaScript的三种定义方式

JS一般有三种定义的方式：

①    写在<a>标签的href属性内；

②    写在<script>标签内；

③    单独写一个JS文件，使用外连的方式引入；

下面直接给出代码示例以区分这三种方式的不同：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>三种JS的写法</title>
    <!--第二种写法：写在script代码块中-->
    <script type="text/javascript">
        alert("我在块里面！")
    </script>
    <!--第三种写法：单独写一个js文件，在src中引入.js文件-->
    <script type="text/javascript" src="./js/01hello.js"></script>
</head>
<body>
    <!--
        JS的三种写法：
        ①写在标签内；
        ②写在script标签内；
        ③单独写一个JS文件
    -->
<!--第一种写法：表示的是伪协议，给浏览器看，伪协议之后的代码当做JS代码执行-->
<a href="javascript:console.debug(‘点你就点你‘)">点击我</a>
</body>
</html>

2.2.  JavaScript的标识符

JavaScript中的标识符与Java中标识符的定义是一样的，标识符是为了标识程序中诸如类、方法和变量等元素而采用的命名。

所有的标识符必须遵从以下规则：

  • 标识符是由字母、数字、下划线(_)和美元符号($)构成的字符序列。
  • 标识符必须以字母、下划线(_)或美元符号($)开头，不能以数字开头。
  • 标识符不能是JavaScript中的保留字与关键字。
  • 标识符不能是true、false或null。
  • 标识符可以为任意长度。

合法的标识符举例：indentifier、username、user_name、_userName、$username；

非法的标识符举例：int、98.3、Hello World。

JavaScript是严格区分大小写的，所以area、Area和AREA是不同的标识符，使用标识符时应该使用具有描述性的标识符以提高程序的可读性。

2.3.  关键字与保留字

关键字包含：

break  continue  debugger  do … while  for  function  if … else  return  switch

try … catch  var  case  break  case  continue  default  delete  do  finally  in

instanceof  new  return  this  throw  typeof  void  with

保留字包含：

abstract  Boolean  byte  char  class  const   double  enum  export  extendsfinal  float  goto  implements  import  int  interface  long  package  privateprotected  public  short  static  super  synchronized  throws  transient  volatile

2.4.  分割符与注释

JavaScript每条执行语句以分号”;”分隔，以分号分隔在实际执行过程中不是必需的（去除”;”可以执行），但是在实际编写代码过程中强烈建议加上分号！

var a = 5;
var b = 6;
var c = a + b;

如果有分号分隔，允许在同一行写多条执行语句：

var a = 5;b = 6;c = a + b;
console.debug(a);  //5
console.debug(b);  //6
console.debug(c);  //11

JavaScript注释用于解释JavaScript代码，增强其可读性。JavaScript注释也可以用于在测试替代代码时阻止执行。

JavaScirpt中主要有三种注释类型：

单行注释、多行注释、文档注释

单行注释以//开头，任何位于//与行末之间的文本都会被JavaScript忽略（不会执行）。

多行注释以/*开头，以*/结尾，任何位于/*与*/之间的文本都会被JavaScript忽略。

文档注释以/**开头，以*/结尾，任何位于/**与*/之间的文本都会被JavaScript忽略。

//单行注释
var x = 5;      // 声明 x，为其赋值 5
var y = x + 2;  // 声明 y，为其赋值 x + 2

/*
 多行注释
 下面的代码会改变
 网页中
 id = "myH" 的标题
 以及 id = "myP" 的段落：
*/
document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。";

/**
 文档注释
 一般用于公司签名抬头标明产品文件类型
 */

2.5.  空白字符

JavaScript会忽略多个空格，我们可以在脚本语句中添加多个空格间隔语句代码，以增强程序的可读性。

下面这两行是相等的：

var person = "Bill";
var person="Bill";

在运算符旁边（= + - * /）添加空格是个好习惯：

var x = y + z;

3.   JavaScript变量

JavaScript变量是用于存储数据值的一个标识，指向具体的内存地址，保存对应的值或者对象地址值。

变量声明首先要遵循标识符命名原则，并且JavaScript声明变量要使用var关键字，比如：

var name;
console.debug(name);  //打印空字符
console.debug(typeof(name)); //string

声明变量的同时可以为变量赋值，并且在之后改变该变量的值，注意：不能改变变量的类型了，比如：

var name = "张三";
console.debug(name); //张三
console.debug(typeof(name)); //string
name = true;
console.debug(name); //true
console.debug(typeof(name)); //string

此外，JavaScript中还允许不事先声明变量而直接使用，比如：

num = 1234;
console.debug(num); //1234

注意：JavaScript定义变量无需指定变量的类型，任何类型都可以使用var关键字声明。

4.   JavaScript数据类型

JavaScript中数据类型包含：字符串型、数值型、布尔型、数组型、对象类型等。

①    字符串型（string）

字符串（或文本字符串）是一串字符，比如：”Bill Gates”。

字符串被引号包围，你可以使用单引号或者双引号：

var carName = "Porsche 911";   // 使用双引号
var carName = ‘Porsche 911‘;   // 使用单引号

也可以在字符串内使用引号，只要这些引号与包围的字符串的引号不匹配：

var answer = "It‘s alright";             // 双引号内的单引号
var answer = "He is called ‘Bill‘";    // 双引号内的单引号
var answer = ‘He is called "Bill"‘;    // 单引号内的双引号

②    数值型（number）

JavaScript只有一种数值类型。写数值时用不用小数点均可。

var x1 = 34.00;     // 带小数点
var x2 = 34;        // 不带小数点

超大或超小的数值可以用科学计数法来表示。

var num1 = 123e5;      // 12300000
var num2 = 123e-5;     // 0.00123

③    布尔型（boolean）

JavaScript布尔值只有两个值：true或者false。

var res = true;
console.debug(res); //true
console.debug(typeof(res)); //boolean

④   数组型

JavaScript数组用方括号表示，数组项目元素用逗号分隔，如下代码声明了一个名为cars的数组，包含三个元素（汽车品牌）：

var arr = ["Porsche", "Volvo", "BMW"];
console.debug(arr.length); //3
console.debug(arr[0]); //数组索引从0开始，到数组长度-1结束，取值使用arr[索引位置];Porsche
console.debug(arr[arr.length-1]); //BMW

⑤    对象类型

JavaScript对象是使用花括号来表示。

对象属性是name:value键值对，用逗号分隔开。声明一个对象类型并使用：

//对象类型
var person = {
   firstName : "Bill",
   lastName  : "Gates",
   age       : 62,
   eyeColor  : "blue"
};
//对象取值：使用对象.属性取值
console.debug(person.firstName + " is " + person.age + " years old"); //Bill is 62 years old

4.1. typeof运算符

使用typeof可以确定JavaScript变量的类型：

typeof运算符会返回变量或表达式的类型：

typeof运算符可以返回 以下原始类型之一：

  • string
  • number
  • boolean
  • object
  • undefined
var name = "张三";
typeof name; //string
typeof 3.14  // 返回 "number"
typeof true // 返回 "boolean"
typeof x    // 返回 "undefined" (假如 x 没有值)
var arr = ["Porsche", "Volvo", "BMW"];
typeof arr; //object

同时在处理复杂数据时，typeof运算符可用返回以下两种类型之一：

  • function
  • object

typeof运算符会把对象、数组或null返回object；

typeof运算符会把函数返回function

typeof null     // 返回 "object"
typeof function myFunc(){}  // 返回 "function"

4.2. Undefined/Null/空值

①    undefined

在JavaScript中，没有值的变量，即变量初始化没有赋值，那么其值就是undefined。typeof也返回undefined。

var person;
console.debug(person); //返回undefined

②    Null

在JavaScript中，null的数据类型是对象。

var person = null;
console.debug(person); //null
console.debug(typeof person); //object

undefined与null的区别：

undefined与null的值相等，但是类型不相等；

typeof undefined       // undefined
typeof null             // object
null === undefined    // false
null == undefined     // true

③    空值

空值表示字符串变量的值为空字符串，空的字符串既有值也有类型。

var str = "";
console.debug(str); //""
console.debug(typeof str); //string

5.   JavaScript函数

JavaScript函数是被设计为执行特定任务的代码块。JavaScript函数会在某代码调用它时被执行。

5.1. JavaScript函数语法

JavaScript函数通过function关键词进行定义，其后是函数名和括号()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

具体的示例如下：

function 函数名(…参数args){
    方法体—执行代码
}

函数的作用：避免代码在页面加载的时候就执行了，并且一次定义，多次使用（调用）。

5.2. 函数返回值

JavaScript函数方法体中使用return来返回此函数被调用后的执行结果。在函数中通常会计算出执行结果，返回值会由return返回调用者。而在function函数上无需声明函数返回类型（JS的弱类型的灵活性）。

示例：

function getMsg() {
    var msg = "随便返回一个字符串吧";
    return msg;
}
console.debug(getMsg()); //随便返回一个字符串吧
console.debug(getMsg); //ƒ getMsg() { var msg = "随便返回一个字符串吧"; return msg;}

函数返回调用需要使用:函数名()来调用，而单独使用函数名则会返回整个函数体。

5.3. 局部变量与全局变量

在JavaScript函数中声明的变量，会成为函数的局部变量，局部变量只能在函数内部访问。

由于局部变量只能被其函数识别，因此可以在不同函数中使用相同名称的变量。

局部变量在函数开始时创建，在函数完成时被删除。

全局变量是定义在函数体外部的变量，与局部变量无关，可以全局使用，但是如果在函数体内部的局部变量与全局变量名相同，那么在该函数被调用后可能会改变该全局变量的值。

示例如下：

/**
* 1.JS中的全局与局部变量的定义
*/
var str = "全局变量";

function showStr() {
   str = "局部变量";
   console.debug(str);
}

showStr();  //局部变量
console.debug(str); //局部变量，str整体的值进入到showStr()方法中被改变

console.debug("================分割线==================")

var str2 = "全局变量2";

function showStr2() {
   var str2 = "局部变量2";
   console.debug(str2);
}

showStr2();  //局部变量2
console.debug(str2); //全局变量2,定义在showStr2()函数中的str2变量已经执行完毕被销毁

6.   更多

本节JavaScript(1) – JS入门主要针对JS初学知识体系中常用知识进行汇总，省略了JS输出打印、JS运算符、JS流程控制部分的说明（这部分比较简单，和Java语言也大体类型），简单知识就不再一一累述，学习更多完整的JavaScript入门知识体系请详见W3shool网址，本部分知识参考W3school网址：

https://www.w3school.com.cn/js/index.asp

学习章节：JS教程 —— JS函数部分，后续将陆续汇总更新更多JavaScript章节自我学习汇总内容。

原文地址：https://www.cnblogs.com/yif0118/p/12642831.html

时间： 2024-09-28 21:38:17

JavaScript(1) -- JS入门的相关文章

【JavaScript】——JS入门

结束XML之旅,开始JavaScript的学习,看视频,了解了她的前世今生,还是为她捏了把汗啊!看了部分视 频了,简单的总结一下吧! JavaScript是什么? JavaScript是一种基于面向对象和事件驱动,并具有相对安全性的客户端脚本语言. 这是JavaScript的定义,有没有看出很熟悉的概念? 首先是面向对象和事件驱动,这是从VB 6.0那看到的概念:Visual Basic是一种由 Microsoft 公司开发的 结构化的.模块化的.面向对象的.包含协助开发环境的事件驱动为机制的可

JavaScript图表库的新选择！LightningChart JS入门须知了解一下

对于LightningChart JS,可能很多用户并不是很了解这个产品,这是由Arction Ltd公司最新推出的JavaScript图表库工具.LightningChart JS是Web上性能最高的图表库具有出色的执行性能 - 使用高数据速率同时监控数十个数据源. GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用,从而实现高刷新率和流畅的动画.非常适合用于贸易,工程,航空航天,医药和其他领域的应用. 入门视频 LightningChart JS入门视频(一):使用JavaScr

Javascript开发技巧(JS入门、运算符、分支结构、循环结构)

一.Js简介和入门 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript简介</title> <!-- [使用JS的三种方式] 1.HTML标签中内嵌JS(不提倡使用): <button onclick="javascript:alert('小碧池!你真点啊!')">有本事点我呀!!!<

Node.js入门：前后端模块的异同

通常有一些模块可以同时适用于前后端,但是在浏览器端通过script标签的载入JavaScript文件的方式与Node.js不同.Node.js在载入到最终的执行中,进行了包装,使得每个文件中的变量天然的形成在一个闭包之中,不会污染全局变量.而浏览器端则通常是裸露的JavaScript代码片段.所以为了解决前后端一致性的问题,类库开发者需要将类库代码包装在一个闭包内.以下代码片段抽取自著名类库underscore的定义方式. 1 (function () { 2 // Establish the

Node.js入门：异步IO

异步IO 在操作系统中,程序运行的空间分为内核空间和用户空间.我们常常提起的异步I/O,其实质是用户空间中的程序不用依赖内核空间中的I/O操作实际完成,即可进行后续任务. 同步IO的并行模式 多线程单进程    多线程的设计之处就是为了在共享的程序空间中,实现并行处理任务,从而达到充分利用CPU的效果.多线程的缺点在于执行时上下文交换的开销较大,和状态同步(锁)的问题.同样它也使得程序的编写和调用复杂化. 单线程多进程 为了避免多线程造成的使用不便问题,有的语言选择了单线程保持调用简单化,采用启

Node.js入门：包结构

JavaScript缺少包结构.CommonJS致力于改变这种现状,于是定义了包的结构规范(http://wiki.commonjs.org/wiki/Packages/1.0 ).而NPM的出现则是为了在CommonJS规范的基础上,实现解决包的安装卸载,依赖管理,版本管理等问题.require的查找机制明了之后,我们来看一下包的细节. 一个符合CommonJS规范的包应该是如下这种结构: 一个package.json文件应该存在于包顶级目录下 二进制文件应该包含在bin目录下. JavaSc

Node.js入门：模块机制

CommonJS规范  早在Netscape诞生不久后,JavaScript就一直在探索本地编程的路,Rhino是其代表产物.无奈那时服务端JavaScript走的路均是参考众多服务器端语言来实现的,在这样的背景之下,一没有特色,二没有实用价值.但是随着JavaScript在前端的应用越来越广泛,以及服务端JavaScript的推动,JavaScript现有的规范十分薄弱,不利于JavaScript大规模的应用.那些以JavaScript为宿主语言的环境中,只有本身的基础原生对象和类型,更多的对

Node.js入门：事件机制

Evented I/O for V8 JavaScript 基于V8引擎实现的事件驱动IO. 事件机制的实现 Node.js中大部分的模块,都继承自Event模块(http://nodejs.org/docs/latest/api/events.html ).Event模块(events.EventEmitter)是一个简单的事件监听器模式的实现.具有addListener/on,once,removeListener,removeAllListeners,emit等基本的事件监听模式的方法实现

Node.js入门：Node.js&amp;NPM的安装与配置

Node.js安装与配置  Node.js已经诞生两年有余,由于一直处于快速开发中,过去的一些安装配置介绍多数针对0.4.x版本而言的,并非适合最新的0.6.x的版本情况了,对此,我们将在0.6.x的版本上介绍Node.js的安装和配置.(本文一律以0.6.1为例,0.6的其余版本,只需替换版本号即可.从http://nodejs.org/#download可以查看到最新的二进制版本和源代码). Windows平台下的Node.js安装 在过去,Node.js一直不支持在Windows平台下原生