第一章 JavaScript基础

第一章 JavaScript基础

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

特点：

向HTML页面中添加交互

行为脚本语言，语法和Java类似

解释性语言，边执行边解释

组成：ECMAScript、DOM、BOM

1.基本结构

<script type="text/javascript">
    <!—
          JavaScript 语句;
    —>
</script >
<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可
JavaScript 会忽略多个空格

执行原理:

浏览器输入、IE发送包含JS的请求页面、应用服务器解析HTML和Javascript、从服务器端下载含js的页面、返回IE响应

2.网页中引用JavaScript的方式

• 使用<script>标签

• 外部JS文件

  <script src="export.js"  type="text/javascript"></script>
  

• 直接在HTML标签中

  <input name="btn" type="button" value="弹出消息框"   
     onclick="javascript:alert('欢迎你');"/>
  

3.核心语法：

变量、数据类型、数组、运算符号、控制语句、注释、输入输出、语法约定

1.变量

变量用于存储数据值。

先声明变量在赋值

var width;
width = 5;
var:用于声明变量

同时声明和赋值变量

var catName= "皮皮";
var x, y, z = 10;

不声明直接赋值

width=5;

变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用

关键词：

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do … while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if … else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try … catch	对语句块实现错误处理。
var	声明变量。

JavaScript 关键词指的是保留的单词。保留词无法用作变量名。

标识符：

所有 JavaScript 变量必须以唯一的名称的标识。

通用规则：

• 名称可包含字母、数字、下划线和美元符号
• 名称必须以字母开头
• 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
• 名称对大小写敏感（y 和 Y 是不同的变量）
• 保留字（比如 JavaScript 的关键词）无法用作变量名称

let： 可以使用 let 关键词声明拥有块作用域的变量

在块中重新声明变量不会重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

在循环中使用 let：

var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10
在循环中使用的变量使用 var 重新声明了循环之外的变量。

let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7
在循环中使用的变量使用 let 并没有重新声明循环外的变量。

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。在 HTML 中，全局作用域是 window 对象。通过 var 关键词定义的全局变量属于 window 对象：

var carName = "porsche";
// 此处的代码可使用 window.carName

let carName = "porsche";
// 此处的代码不可使用 window.carName

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的

在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的

在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的

在不同的作用域或块中，通过 let 重新声明变量是允许的

通过 var 声明的变量会提升到顶端。

// 在此处，您可以使用 carName
var carName;

const：

通过 const 定义的变量与 let 变量类似，但不能重新赋值

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

const 变量必须在声明时赋值

const PI = 3.14159265359;

更改常量对象的属性

// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";

car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const

在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的

在另外的作用域或块中重新声明 const 是允许的

2.数据类型

undefined

var width;

变量width没有初始值，将被赋予值undefined

null：表示一个空值，与undefined值相等

Undefined 与 Null 的区别：

Undefined 与 null 的值相等，但类型不相等
typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

number

var iNum=23; //整数

var iNum=23.0; //浮点数

boolean：true和false

string

一组被引号（单引号或双引号）括起来的文本

var string1=“This is a string”;

3.typeof运算符

检测变量的返回值：

undefined：变量被声明后，但未被赋值

string：用单引号或双引号来声明的字符串

boolean：true或false

number：整数或浮点数

object：javascript中的对象、数组（因为在 JavaScript 中数组即对象）和null

function：函数

typeof ""                  // 返回 "string"
typeof "Bill"              // 返回 "string"
typeof "Bill Gates"          // 返回 "string"

4.String对象

属性：

• 字符串对象.length

  var str="this is JavaScript";
  var strLength=str.length;    //长度是18
  

• 方法

• 字符串对象.方法名();

方法名称	说 明
charAt(index)	返回在指定位置的字符
indexOf(str，index)	查找某个指定的字符串在字符串中首次出现的位置
substring(index1，index2)	返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符
split(str)	将字符串分割为字符串数组

<script>
var width = "this is JavaScript";
console.log(width.charAt(0));
console.log(width.indexOf("is"));
console.log(width.substring(8,12));
console.log(width.split(" "));
</script>
t
2
Java
['this', 'is', 'JavaScript']

5.数组

创建数组：

var  数组名称 = new Array(size);
size:表示数组中可存放的元素总数

为数据元素赋值：

var fruit= new Array("apple", "orange", " peach","banana");

var fruit = new Array(4);
fruit [0] = " apple ";
fruit [1] = " orange ";
fruit [2] = " peach ";
fruit [3] = " banana ";

**访问数组：**数组名[下标]

数组的常用属性和方法：

类别	名称	描述
属性	length	设置或返回数组中元素的数目
方法	join( )	把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
方法	sort()	对数组排序
方法	push()	向数组末尾添加一个或更多 元素，并返回新的长度

var fruit = ["apple","orange","peach","banana"];
console.log(fruit.length);
console.log(fruit.join("*"));
console.log(fruit.sort());
var x = fruit.push("pear");
console.log(x);

4
apple*orange*peach*banana
['apple', 'banana', 'orange', 'peach']
5

6.运算符号

类型	运算符
算术运算符	+ - ***** / % ++ –
赋值运算符	= += -=
比较运算符	> < >= <= == != === !==
逻辑运算符	&& || !

== ：等于

===：值相等并且类型相等

!==：值不相等或类型不相等

7.逻辑控制语句

if 条件语句

if(条件)
{
    //JavaScript代码;
}
else
{
    //JavaScript代码;
}

switch 语句

switch (表达式)
{    case 常量1 : 
        JavaScript语句1;
        break;
    case 常量2 : 
        JavaScript语句2;
        break;
        ...
        default : 
        JavaScript语句3;    
}

for 循环

for(初始化;  条件;  增量){
    JavaScript代码; 
}

while循环

while(条件)
{
    JavaScript代码;
}

8.循环中断

• break

var i=0;
for(i=0;i<=5;i++){
    if(i==3){
        break;
    }
    document.write("这个数字是："+i+"<br/>");
}//0,1,2

• continue

var i=0;
for(i=0;i<=5;i++){
    if(i==3){
        continue;
    }
    document.write("这个数字是："+i+"<br/>");
}//0,1,2,3,4,5

9.注释

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

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

10.常用的输入/输出

alert()：弹出警示框

输入：

prompt()

prompt("提示信息", "输入框的默认信息");
prompt("请输入你喜欢的颜色","红色");
prompt("请输入你喜欢的颜色","");

输出：

• 使用 window.alert() 写入警告框

• 使用 document.write() 写入 HTML 输出，仅用于测试

• 使用 innerHTML 写入 HTML 元素

  document.getElementById("demo").innerHTML = "Hello Kitty.";
  

• 使用 console.log() 写入浏览器控制台

11.语法约定

• 代码区分大小写
• 变量、对象和函数的名称
• 分号

4.程序调试

• Chrome开发人员工具
  • 停止断点调试
  • 单步调试，不进入函数体内部
  • 单步调试，进入函数体内部
  • 跳出当前函数
  • 禁用所有的断点，不做任何调试
• alert()方法

5.函数

语法：

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

函数调用：

• 当事件发生时（当用户点击按钮时）
• 当 JavaScript 代码调用时
• 自动的（自调用）

函数返回：

当 JavaScript 到达 return 语句，函数将停止执行。

常用系统函数：

var str = "86.1";
console.log(typeof(str));
console.log("是否是非数字:"+isNaN(str));
str = parseInt(str);
console.log("将字符串转换为整型数字:"+typeof(str)+str);
var str1 = "86.1";
str1 = parseFloat(str1);
console.log("将字符串转换为浮点型数字:"+typeof(str1)+str1);
var content = "你好";
console.log("是否是非数字:"+isNaN(content));

string
是否是非数字:false
将字符串转换为整型数字:number86
将字符串转换为浮点型数字:number86.1
是否是非数字:true

自定义函数：

• 定义函数

  function 函数名( 参数1,参数2,参数3,…){
      //JavaScript语句
      [return 返回值]
  }
  无参函数、有参函数
  

• 调用函数

  函数调用一般和表单元素的事件一起使用，调用格式

  事件名＝ “函数名( )” ;

  调用无参函数：

  //无参函数
  function study(){
      for(var i=0;i<5;i++){
          document.write("<h4>欢迎学习JavaScript</h4>");
      }
  }
  
  <input name="btn" type="button" value="显示5次欢迎学习JavaScript"  onclick="study( )" />
  

  调用有参函数：

  //有参函数
  function study(count){
      for(var i=0;i<count;i++){
          document.write("<h4>欢迎学习JavaScript</h4>");
      }
  }
  
  <input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数"
    onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />
  

6.变量的作用域

• 全局变量

• 局部变量

//变量作用域
//成员变量，作用域是全局的
var i=20;
function first( ){
    //局部变量，只能在函数内使用
    var i=5;
    for(var j=0;j<i;j++){
        document.write("&nbsp;&nbsp;&nbsp;&nbsp;"+j);
    }
}
function second( ){
    var t=prompt("输入一个数","")
    if(t>i)
        document.write(t);
    else
        document.write(i);
    first( );
}

7.事件

属性	当以下情况发生时，出现此事件
onload	一个页面或一幅图像完成加载
onlick	鼠标单击某个对象
onmouseover	鼠标指导移到某元素上
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下或按住
onkeyup	某个键盘按键被松开
onchange	域的内容被改变
onblur	元素失去焦点
onfocus	元素获得焦点
onsubmit	提交按钮被点击