整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript的基本语法

节我们简单的来学习一下 JavaScript 的语法。我们知道 JavaScript 是一种脚本语言,脚本语言又被称为扩建的语言,或动态的语言,是一种编程语言,用来控制软件应用程序,脚本通常以文本保存,只有在被调用的时候进行解释或编译。JavaScript 语言是一套规则,它定义了 JavaScript 的语言结构。

基本语法

  • JavaScript 中必须严格区分大小写,例如变量 myVariable 和 MyVariable 是不同的,test 和 Test 是不同的。
  • JavaScript 语句中每一行代码都要以英文的分号 ; 结尾,如果不写分号,浏览器会自动添加,但是会消耗一些系统资源。
  • JavaScript 中会自动忽略多个空格和换行,所以可以使用空格和换行对代码进行格式化。
  • JavaScript 是弱类型语言,声明变量时可以不需要指定变量的类型。

JavaScript 注释

注释顾名思义就是对代码的解释和说明,可以让我们能够轻松的了解代码。注释可以提高代码的可读性,且注释不会被计算机编译。每个语言中的注释格式可能不太一样,我们来看一下 JavaScript 语言的注释。

JavaScript 语言中的注释其实很简单,在需要注释的语句前面添加双斜杠// 即可,例如:

// 这是一行注释

双斜杠后面的内容会被浏览器忽略,且一般我们写注释时,双斜杠与内容之间会有一个空格。

上面的双斜杠是我们最常用的注释方法,我们可以称之为单行注释,除此之外,还有一种注释叫做多行注释,格式如下所示:

/*
这是多行注释
侠课岛欢迎你
这是多行注释
*/

通常我们会使用注释来进行一些说明,例如说明某段代码是用来做什么的,或者注释一写可能有用但是暂时用不上的代码等。

示例:

执行下面代码:

// 定义一个变量
var a = 1;
// console.log(a);
var b = 10;
console.log(b);

输出:

10

什么是字面量

JavaScript 中的字面量是指不可以改变的值,如数字 1、2、3 等。字面量都是可以直接使用的,但是我们一般都不会直接使用字面量的。

  • 数字(Number)字面量可以是整数或者是小数,或者是科学计数。例如:
12

1.26

187e1
  • 字符串(String)字面量可以使用单引号''或双引号""包围,例如:
'xkd'

"hello xkd"
  • 表达式字面量可以用于计算:
1 + 2

10 - 7

3 * 6
  • 数组(Array)字面量定义一个数组:
[1, 2, 3, 4, 5]
  • 对象(Object)字面量定义一个对象:
{name: "xkd", age:18}
  • 函数(Function)字面量定义一个函数:
function myFun(x, y) { return x + y;}

什么是变量

JavaScript 中变量可以用来保存字面量,变量的值是可以任意改变的,在开发中通常都是使用变量来保存一个字面量。

在 JavaScript 中我们可以使用关键字 var 来声明一个变量,例如:

var name

name = "xkd"

上面这个 name 就是我们声明的变量的变量名,在声明一个变量以后要对变量进行赋值,即上面的“xkd”,而 xkd

就是一个字符串字面量。

或者变量的声明和赋值也可以同时进行,如下所示:

var name = "xkd"
var age = 20

JavaScript 关键字

JavaScript 的关键字用于标识要执行的操作。和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。

下面是 JavaScript 中重要的保留字:

abstractelseinstanceofsuperbooleanenumintswitchbreakexportinterfacesynchronizedbyteextendsletthiscasefalselongthrowcatchfinalnativethrowscharfinallynewtransientclassfloatnulltrueconstforpackagetrycontinuefunctionprivatetypeofdebuggergotoprotectedvardefaultifpublicvoiddeleteimplementsreturnvolatiledoimportshortwhiledoubleinstaticwith

JavaScript程序

  • 计算机程序是由计算机执行的指令的列表,在编程语言中,这些编程指令称为语句。大多数时候 JavaScript 程序会包含多数的 JavaScript 语句。
  • JavaScript 程序是编程语句的列表,在 HTML 中,JavaScript 程序是由 web 浏览器执行的。

JavaScript语句

在HTML中,JavaScript 语句是发给浏览器的命令。这些命令会告诉浏览器要做的事。

JavaScript 语句可以由值、运算符、表达式、关键字和注释等部分组成。

示例:

JavaScript 语句之间都是用分号分隔:

var a, b, c;
a = 19;
b = 79;
c = a + b;

JavaScript 语句通常以一个语句标识符为开始,并执行该语句。

注意语句标识符是保留关键字不能作为变量名使用,例如:

var break = 10;
console.log(break);  // SyntaxError: Unexpected token 'break'

上述中的 break 是一个标识符,不能作为变量名,这样写代码会报错。

JavaScript的语法和Java语言类似,每个语句以;结束,语句块用{...}。但是,JavaScript并不强制要求在每个语句的结尾加;,浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。

注意:让JavaScript引擎自动加分号在某些情况下会改变程序的语义,导致运行结果与期望不一致。在本教程中,我们不会省略;,所有语句都会添加;。

例如,下面的一行代码就是一个完整的赋值语句:

var x = 1;

下面的一行代码是一个字符串,但仍然可以视为一个完整的语句:

'Hello, world';

下面的一行代码包含两个语句,每个语句用;表示语句结束:

var x = 1; var y = 2; // 不建议一行写多个语句!

语句块是一组语句的集合,例如,下面的代码先做了一个判断,如果判断成立,将执行{...}中的所有语句:

if (2 > 1) { x = 1; y = 2; z = 3; }

注意花括号{...}内的语句具有缩进,通常是4个空格。缩进不是JavaScript语法要求必须的,但缩进有助于我们理解代码的层次,所以编写代码时要遵守缩进规则。很多文本编辑器具有“自动缩进”的功能,可以帮助整理代码。

{...}还可以嵌套,形成层级结构:

if (2 > 1) { x = 1; y = 2; z = 3; if (x < y) { z = 4; } if (x > y) { z = 5; } }

JavaScript本身对嵌套的层级没有限制,但是过多的嵌套无疑会大大增加看懂代码的难度。遇到这种情况,需要把部分代码抽出来,作为函数来调用,这样可以减少代码的复杂度。

注释

以//开头直到行末的字符被视为行注释,注释是给开发人员看到,JavaScript引擎会自动忽略:

// 这是一行注释alert('hello'); // 这也是注释

另一种块注释是用/*...*/把多行字符包裹起来,把一大“块”视为一个注释:

/* 从这里开始是块注释 仍然是注释 仍然是注释 注释结束 */

大小写

请注意,JavaScript严格区分大小写,如果弄错了大小写,程序将报错或者运行不正常。

、HTML表单


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8. <!-- 1.表单元素
  9. 用来声明数据提交的范围
  10. 只有在此元素内的数据可以提交给服务器 -->
  11. <!-- action属性用来声明数据提交的目标 -->
  12. <form action="http://www.baidu.com">
  13. <!-- 2.表单控件
  14. 用来让用户输入数据的
  15. 1)input元素(9个 ),它们之间用type元素区分-->
  16. <!-- 文本框
  17. value:设置默认值 maxlength:设置最大长度 readonly:设置只读 -->
  18. <p>
  19. 账号:<input type="text" value="lcz" maxlength="10"/>
  20. </p>
  21. <!-- 密码框 属性同上 -->
  22. <p>
  23. 密码:<input type="password">
  24. </p>
  25. <!-- 单选框 name:组名。同一组名互相排斥
  26. checked设置默认选中-->
  27. <p>
  28. 性别:
  29. <input type="radio" name="sex" checked="checked"/>男
  30. <input type="radio" name="sex"/>女
  31. </p>
  32. <!-- 多选框 checked:设置默认选中 -->
  33. <p>
  34. 兴趣爱好:
  35. <input type="checkbox" checked="checked"/>音乐
  36. <input type="checkbox" checked="checked"/>看书
  37. <input type="checkbox"/>打球
  38. </p>
  39. <!-- 文件框 -->
  40. <p>
  41. 头像上传:<input type="file"/>
  42. </p>
  43. <!-- 隐藏框 -->
  44. <p>
  45. <input type="hidden" value="abc"/>
  46. </p>
  47. <!-- 按钮
  48. submit:提交表单中的数据
  49. reset:将表单中的数据重置为初始值
  50. button:没有任何功能,需通过js定义功能 -->
  51. <p>
  52. <!-- 提交按钮 -->
  53. <input type="submit" value="注册">
  54. <!-- 重置按钮 -->
  55. <input type="reset" value="重置">
  56. <!-- 普通按钮 -->
  57. <input type="button" value="按钮">
  58. </p>
  59. <!--2)其他元素(3个) -->
  60. <!-- label:用来管理表单中的文本 id:是元素的唯一标志,相当于元素的身份证号,任何元素都可以由id,程序员有义务保证元素的id不重复
  61. 可以将文本与空间绑定在一起,从而增加了控件的受力面积。-->
  62. <p>
  63. <input type="checkbox" id="xieyi"/>
  64. <label for="xieyi">我已阅读并且自愿遵守此协议!</label>
  65. </p>
  66. <!-- select:下拉选 selected:设置默认选中 -->
  67. <p>
  68. 城市:
  69. <select>
  70. <option>请选择</option>
  71. <option selected="selected">北京</option>
  72. <option>上海</option>
  73. <option>广州</option>
  74. <option>深圳</option>
  75. <option>杭州</option>
  76. </select>
  77. </p>
  78. <!-- textarea:文本域 -->
  79. <p>
  80. 简介:<br>
  81. <textarea rows="10" cols="100">这是文本域的默认值</textarea>
  82. </p>
  83. </form>
  84. </body>
  85. </html>