本文共 3061 字，大约阅读时间需要 10 分钟。

JavaWeb学习——简单学习JavaScript基础

JavaScript是一种动态的、弱类型的脚本语言。JS语言可以操作HTML和CSS，可以让我们的网页动起来。那我们就来学习一下传说中的JS语言。

1.JavaScript的组成

2.JavaScript基础语法和引入方式

• 语法

  我们要写JavaScript语法，可以在HTML代码中写入< Script >标签，然后将JavaScript代码写入标签中。而且HTML5标签中的属性type如果不写的话默认为text/javascript，所以我们可以省略不写：

• 外部引入JavaScript

  在我们日常编码中，最常用的是外部引入。外部引入方法：

  src中写入外部JS文件路径，然后将< script >标签写入< head >标签里即可

  • 标签中引入JS代码

3.JavaScript的三种常用打印方式

• window.document.write()

  我们可以使用文档操作对象将文本打印在网页上：

  document.write("Hello JavaScript！");

  显示效果：

  

• console.log()

  也可以将其打印在控制台里：

  console.log("Hello JavaScript");

  显示效果：

  
  • alert()
    alert()是弹窗的一种，在平时的测试中也是用的比较多的：

  alert("Hello JavaScript");

  显示效果：

  

4.JS核心语法

• 数据类型

  JS的几中数据类型：
  (1).undefined：未定义的，没有被赋初始值的变量就是undefined
  (2).null：表示空值，与undefined相等
  (3).number：数字类型（整数、浮点数）
  (4).boolean：true、false
  (5).String：一组被单引号或者双引号印起来的文本

• 变量

  (1)先声明在赋值：

  var width;//var用于声明关键字width = 5;//width为变量名

  (2)同时声明和赋值：

  var catName= "张三";var x, y, z = 19;//x和y未定义，z为19

  (3)不声明直接赋值：

  a=10;

• Typeof运算符

  typeof返回的是变量的类型，用来检测变量类型。

  效果展示：

  

• String对象

  (1)属性length

  效果显示：

  
  (2)方法
  charAt(index) ：返回在指定位置的字符

  indexOf(str，index) ：查找某个指定的字符串在字符串中首次出现的位置

  substring(index1，index2)：返回位于指定索引index1和index2之间的字符串，[index1,index2)

  split(str) 将字符串分割为字符串数组

• 数组

  (1)创建数组与给数组赋值
  var arr = new Array(5);//创建一个大小为5，数组名为arr的数组。
  需要注意的是JS中的数组是可以自动扩容的，加入我们要给arr[5]赋值是不会报错的。

  效果展示：

  
  (2)数组常用方法：
  - length()：返回数组长度
  - join()：将数组的所有元素放入一个字符串，通过一个分隔符进行分隔

  效果展示：

  
  - sort()：对数组排序

  效果展示：

  
  - push()：向数组尾部添加一个或更多元素，并返回新的长度

  效果展示：

  

• 运算符号

1. 算术运算符 ：+ 、 - 、 * 、/ 、 % 、 ++ 、 –
2. 赋值运算符 ：= 、 += 、 -=
3. 比较运算符：>、<、>=、<=、、!=、=、!==
4. 逻辑运算符：&&、 || 、！
   注意：与java语言相比，===的比较是先比较类型是否相等，再去比较值是否相等。因为JavaScript语言中的变量定义都是用var，所以三等号在不确定变量类型的时候是非常好用的。

• 逻辑语句

1. if条件

   if (条件)  {  条件为 true 时执行的代码；  }else{  条件为false是执行的代码；  }

2. swith多分支语句

   switch(n){case 1:  执行代码块 1  break;case 2:  执行代码块 2  break;default:  n 与 case 1 和 case 2 不同时执行的代码}

3. for、while循环语句

   for (变量=开始值;变量<=结束值;变量=变量+步进值) {         需执行的代码 ；    }

   while (条件) {  	执行语句；}

   do {   执行语句;}while (条件);

4. for-in

   var languages=new Array(); languages[1]='JS'; languages[3]='C#'; languages[5]='JAVA'; for(i in languages) {   console.log(languages[i]);  }

效果展示：

• 中断循环

4. break
   跳出代码块
5. continue
   跳出本次循环

• 注释

1. 单行注释

   单行注释以 // 开始，以行末结束

   //这是一行注释！

2. 多行注释

   多行注释以 /* 开始，以 / 结束，符号 /…… */ 指示中间的语句是该程序 中的注释

   /*这是多行注释这是多行注释这是多行注释*/

• 弹窗

1. alert()

   alert("Hello");

   效果展示：
   
2. prompt()
   语法：prompt(“提示信息”, “输入框的默认信息”);

   prompt("请输入你喜欢的颜色","红色");

   效果展示：
   

• 语法约定

8. 代码区分大小写
9. 变量 , 对象 和函数的名称
10. JavaScript的关键字小写
11. 内置对象大写字母开头
12. 对象的名称通常是小写
13. 方法命名规则和Java相同
14. 分号

5.函数

• 概念：JavaScript中的函数类似于Java中的方法。但是在JavaScript中没有类的概念，所以JavaScript在使用函数时更加方便，可以直接使用。函数可以分为自定义函数和系统函数。

• 常用系统函数

• parseInt (“字符串”) ：将字符串转换为整数数字

  function f() {            var num1 = parseInt("86");            console.log(num1)        }        f();

  效果展示：

  

• parseFloat(“字符串”)：将字符转换为浮点类型数字

  function f() {            var num2 = parseFloat("3.1415926");            console.log(num2)        }        f();

  输出结果：

  

• 自定义函数

• 定义函数

  function 函数名(参数列表){     //JavaScript语句        [return 返回值] }；

• 函数调用

  格式：事件名＝ “函数名( )” ;

  点我

  效果展示：

  
  点击后：
  

• 变量的作用于

• 全局变量：定义在方法外部，只要在方法之前都可以访问到

• 局部变量：定义在方法内部，只有该方法可以调用到

6.事件

• onload：一个页面或一幅图像完成加载
• onlick：鼠标单击某个对象
• onmouseover：鼠标指导移到某元素上
• onkeydown：某个键盘按键被按下
• onchange：域的内容被改变

7.jQuery万能公式

$(选择器).事件.(...参数)

转载地址：http://iaiwi.baihongyu.com/