javascript零基础入门书籍,javascript基础教程pdf下载

这篇文章主要介绍了javascript零基础入门书籍，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获，下面让小编带着大家一起了解一下。

文章目录

• 1、JavaScript引入方式
• 2、JavaScript基础语法
• • 2.1、书写语法
  • 2.2、输出语句
  • 2.3、变量
  • 2.4、数据类型
  • 2.5、运算符
  • 2.6、类型转换
  • 2.7、流程控制语句
  • 2.8、函数
• 3、JavaScript常用对象
• • 3.1、Array
  • • 3.1.1、 定义格式
    • 3.1.2、元素访问
    • 3.1.3、特点
    • 3.1.4、属性和方法
  • 3.2、String
  • 3.3、自定义对象
• 4、BOM
• • 4.1、 Window对象
  • • 4.1.1、获取window对象
    • 4.1.2、 window对象属性
    • 4.1.3、window对象函数
  • 4.2、History对象
  • • 4.2.1、
  • 4.3、Location对象
  • • 4.3.1、 获取Location对象
    • 4.3.2、Location对象属性
• 5、DOM
• • 5.1 、概述
  • 5.2、获取 Element对象
• 6、事件监听
• • 6.1 事件绑定
  • 6.2、常见事件
• 7、正则表达式

---

1、JavaScript引入方式

• 一、内部脚本：将JS代码定义在HTML页面中。

<>
	alert("Hello world");
</>

在HTML文档中可以在任意地方，放置任意数量的<>Python中的所有运算符号。
一般把脚 本置于元素的底部，可改善显示速度，因为脚本执行会拖慢显示。

• 二、外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

  • 外部文件：demo.js

    alert("Hello world");
    

  • 引入外部js文件

    < src="js/demo.js"></>
    

    注意：

    • 外部脚本不能包含<>标签
    • <>标签不能自闭合

2、JavaScript基础语法

2.1、书写语法

• 区分大小写。
• 每行结尾分号可有可无
• 注释：
  • 单行注释：//注释内容
  • 多行注释：/*注释内容*/
• 大括号表示代码块。

2.2、输出语句

• 使用window.alert(“hello JS”)弹出警告框
• 使用document.write(“hello JS”)写入HTML输出
• 使用console.log(“hello JS”)写入控制台

2.3、变量

JavaScript中用var关键字（variable的缩写）来声明变量。

var test=20;
test="hello world";

• JavaScript是一门弱类型语言，变量可以存放不同类型的值。

• 作用域：全局变量。

  {
  	var test;
  }
  alert(test);
  

• 变量可以重复定义

  var test=10;
  var test=20;
  

• ECMAScript6新增了let关键字来定义变量。定的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有交，且不允许重复声明。

• ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

2.4、数据类型

• JavaScript中分为：原始类型和引用类型
• 5种原始类型：
  • number：数字（整数、小数、NaN(Not a Number)）
  • string：字符、字符串，单双引皆可
  • boolean：布尔。true、false
  • null：对象为空
  • undefined：当声明的变量未初始化时，该变量的默认值是undefinet。
• 使用typeof运算符可以获取数据类型：alert(typeof age);

2.5、运算符

JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的，不同的是 JS 关系运算符中的 == 和 ===

• 一元运算符：++，--

• 算术运算符：+，-，*，/，%

• 赋值运算符：=，+=，-=…

• 关系运算符：>，<，>=，<=，!=，==，===…

• 逻辑运算符：&&，||，!

• 三元运算符：条件表达式 ? true_value : false_value

==和===区别

• ==：

  1. 判断类型是否一样，如果不一样，则进行类型转换

  2. 再去比较其值

• ===：js 中的全等于

  1. 判断类型是否一样，如果不一样，直接返回false
  2. 再去比较其值

var age1 = 20;
var age2 = "20";

alert(age1 == age2);// true
alert(age1 === age2);// false

2.6、类型转换

其他类型转为number

• string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN

• 将 string 转换为 number 有两种方式：

  • 使用 + 正号运算符：

  var str = +"20";
  alert(str + 1) //21
  

  • 使用 parseInt() 函数(方法)：

  var str = "20";
  alert(parseInt(str) + 1);
  

  建议使用 parseInt() 函数进行转换。

• boolean 转换为 number 类型：true 转为1，false转为0

  var flag = +false;
  alert(flag); // 0
  

• 其他类型转为boolean

  • number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
  • string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
  • null类型转换为 boolean 类型是 false
  • undefined 转换为 boolean 类型是 false

2.7、流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句，如下

• if
• switch
• for
• while
• dowhile

2.8、函数

；JavaScript 函数通过 function 关键词进行定义。
函数定义格式有两种：

• 方式一：

  function 函数名(参数1,参数2..){
      要执行的代码
  }
  

• 方式二：

  var 函数名 = function (参数列表){
      要执行的代码
  }
  

• 注意：形式参数不需要类型。因为JavaScript是弱类型语言

  function add(a, b){
      return a + b;
  }
  

  上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义

• 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

函数调用函数：

函数名称(实际参数列表);

如

let result = add(10,20);

• 注意：JS中，函数调用可以传递任意个数参数
  例如 let result = add(1,2,3);
  它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。

3、JavaScript常用对象

3.1、Array

3.1.1、 定义格式

数组的定义格式有两种：

• 方式1

  var 变量名 = new Array(元素列表); 
  

  例如：

  var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据（元素）
  

• 方式2

  var 变量名 = [元素列表];
  

  例如：

  var arr = [1,2,3]; //1,2,3 是存储在数组中的数据（元素）
  

  注意：Java中的数组静态初始化使用的是{}定义，而 JavaScript 中使用的是 [] 定义

3.1.2、元素访问

访问数组中的元素和 Java 语言的一样，格式如下：

arr[索引] = 值;

代码演示：

 // 方式一
var arr = new Array(1,2,3);
// alert(arr);

// 方式二
var arr2 = [1,2,3];
//alert(arr2);

// 访问
arr2[0] = 10;
alert(arr2)

3.1.3、特点

JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。

例如如下代码：

// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]);  //undefined

上面代码在定义数组中给了三个元素，又给索引是 10 的位置添加了数据 10，那么 索引3 到 索引9 位置的元素是什么呢？我们之前就介绍了，在 JavaScript 中没有赋值的话，默认就是 undefined。

如果给 arr3 数组添加字符串的数据，也是可以添加成功的

arr3[5] = "hello";
alert(arr3[5]); // hello

3.1.4、属性和方法

push 函数：给数组添加元素，也就是在数组的末尾添加元素

参数表示要添加的元素。

// push:添加方法
var arr5 = [1,2,3];
arr5.push(10);
alert(arr5);  //数组的元素是 {1,2,3,10}

splice 函数：删除元素
参数1：索引。表示从哪个索引位置删除
参数2：个数。表示删除几个元素

// splice:删除元素
var arr5 = [1,2,3];
arr5.splice(0,1); //从 0 索引位置开始删除，删除一个元素 
alert(arr5); // {2,3}

3.2、String

String对象的创建方式有两种：

• 方式一：

  var 变量名 = new String(s); 
  

• 方式二：

  var 变量名 = "数组"; 
  

属性：length 字符串的长度
方法：
charAt()返回手续费 定位置的字符。
IndexOf()检索字符串。

• String对象还有一个函数 trim() ，该方法在文档中没有体现，但是所有的浏览器都支持；它是用来去掉字符串两端的空格。

3.3、自定义对象

自定义对象的格式：

var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...,
    函数名称:function (形参列表){},
	...
};

调用属性的格式：

对象名.属性名

调用函数的格式：

对象名.函数名()

JavaScript 中自定义对象示例：

var person = {
        name : "zhangsan",
        age : 23,
        eat: function (){
            alert("干饭~");
        }
    };


alert(person.name);  //zhangsan
alert(person.age); //23

person.eat();  //干饭~

4、BOM

• BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
• 我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。
• 比如：我现在想将浏览器地址栏的地址改为 https://www.itheima.com 就可以通过使用 BOM 中定义的 Location 对象的 href 属性，代码： location.href = "https://itheima.com";

BOM 中包含了如下对象：

• Window：浏览器窗口对象
• Navigator：浏览器对象
• Screen：屏幕对象
• History：历史记录对象
• Location：地址栏对象
  下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系
  
  BOM 中的 Navigator 对象和 Screen 对象基本不会使用

4.1、 Window对象

window 对象是 JavaScript 对浏览器的窗口进行封装的对象。

4.1.1、获取window对象

该对象不需要创建直接使用 window，其中 window. 可以省略。比如我们之前使用的 alert() 函数，其实就是 window 对象的函数，在调用是可以写成如下两种。

• 显式使用 window 对象调用

window.alert("abc");

• 隐式调用

alert("abc")

4.1.2、 window对象属性

window 对象提供了用于获取其他 BOM 组成对象的属性。

• history
• Location
• Navigator
• Screen

也就是说，我们想使用 Location 对象的话，就可以使用 window 对象获取；写成 window.location，而 window. 可以省略，简化写成 location 来获取 Location 对象。

4.1.3、window对象函数

window 对象常用函数：

setTimeout(function,毫秒值) : 在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值) :在一定的时间间隔后执行一个function，循环执行

定时器代码演示：

//只调用一次
setTimeout(function (){
    alert("hehe");
},3000);

//循环调用
setInterval(function (){
    alert("hehe");
},2000);

4.2、History对象

4.2.1、

History 对象是 JavaScript 对历史记录进行封装的对象。

• History 对象的获取
  使用 window.history获取，其中window. 可以省略
• History 对象的函数
  

4.3、Location对象

Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。

4.3.1、 获取Location对象

使用 window.location获取，其中window. 可以省略

window.location.方法();
location.方法();

4.3.2、Location对象属性

Location对象提供了很对属性。以后常用的只有一个属性 href

alert("要跳转了");
location.href = "https://www.baidu.com";

3秒后跳转到百度

<>
    document.write("3秒后跳转到首页...")
    setTimeout(function(){
        location.href="https://www.baidu.com"
    },3000);
</>

5、DOM

5.1 、概述

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

• Document：整个文档对象
• Element：元素对象
• Attribute：属性对象
• Text：文本对象
• Comment：注释对象

作用：

JavaScript 通过 DOM， 就能够对 HTML进行操作了

• 改变 HTML 元素的内容
• 改变 HTML 元素的样式（CSS）
• 对 HTML DOM 事件作出反应
• 添加和删除 HTML 元素

DOM相关概念：

DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分：

1. 核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准

   • Document：整个文档对象

   • Element：元素对象

   • Attribute：属性对象

   • Text：文本对象

   • Comment：注释对象

2. XML DOM： 针对 XML 文档的标准模型

3. HTML DOM： 针对 HTML 文档的标准模型

   该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象

   • 例如：<img> 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
   • 例如：<input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。

5.2、获取 Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数

• getElementById()：根据id属性值获取，返回单个Element对象
• getElementsByTagName()：根据标签名称获取，返回Element对象数组
• getElementsByName()：根据name属性值获取，返回Element对象数组
• getElementsByClassName()：根据class属性值获取，返回Element对象数组

6、事件监听

6.1 事件绑定

JavaScript 提供了两种事件绑定方式：

• 方式一：通过 HTML标签中的事件属性进行绑定

  如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性，在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='on（）' 表示该点击事件绑定了一个名为 on() 的函数

  <input type="button" onclick='on()’>
  

  下面是点击事件绑定的 on() 函数

  function on(){
  	alert("我被点了");
  }
  

• 方式二：通过 DOM 元素属性绑定
  如下面代码是按钮标签，在该标签上我们并没有使用 事件属性，绑定事件的操作需要在 js 代码中实现

  <input type="button" id="btn">
  

  下面 js 代码是获取了 id='btn' 的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行

  document.getElementById("btn").onclick = function (){
      alert("我被点了");
  }
  

6.2、常见事件

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

7、正则表达式

概念：

• 正则表达式定义了字符组成的规则。

定义：

• 直接量方式：注意不要加引号

  var reg=/^\w{6,12}$/;
  

• 创建 RegExp 对象

  var reg=new RegExp("^\\w{6,12}$");
  

方法：

• test(str) ：判断指定字符串是否符合规则，返回 true或 false

正则表达式常用的规则如下：

• ^：表示开始

• $：表示结束

• [ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符

• .：代表任意单个字符，除了换行和行结束符

• \w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]

• \d：代表数字字符： 相当于 [0-9]

量词：

• +：至少一个

• *：零个或多个

• ？：零个或一个

• {x}：x个

• {m,}：至少m个

• {m,n}：至少m个，最多n个

    var reg=/^\w{6,12}$/;
    var str="123abc";
    var flag=reg.test(str);
    alert(flag);