一. 初始JavaScript
1.概念
JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言
运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言:不需要编译,直接就可以被浏览器解析执行了
功能:
可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。
2.JS的组成
3. 与html结合方式
1.行内式
<input type="button" value="点我试试" οnclick="alert('Hello World')" />
注:
可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差, 在html中编写JS大量代码时,不方便阅读;
引号易错,引号多层嵌套匹配时,非常容易弄混;
特殊情况下使用
2.内嵌 JS
<script> alert('Hello World~!'); </script>
注:
可以将多行JS代码写到 <’‘script’’> 标签中
内嵌 JS 是学习时常用的方式
3.外部 JS文件
<script src="my.js"></script>
- 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
- 引用外部 JS文件的 script 标签中间不可以写代码
- 适合于JS 代码量比较大的情况
3.JS注释
- 单行注释
// 用来注释单行文字( 快捷键 ctrl + / )
- 多行注释
/* 获取用户年龄和姓名 并通过提示框显示出来 */ 默认快捷键 alt + shift + a ) 快捷键修改为: ctrl + shift + /
4.JS的输入输出语句
注:
- console.dir()可以输出对象的属性.
二. JS基础语法
1. 变量
变量:一小块存储数据的内存空间
Java语言是强类型语言,而JavaScript是弱类型语言。
强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
语法:
var 变量名 = 初始化值;
注:
- typeof运算符:获取变量的类型。
- null运算后得到的是object
2.数据类型
JS 把数据类型分为两类:
简单数据类型 (Number,String,Boolean,Undefined,Null)
复杂数据类型 (object)
1.数字型 Number
数字型三个特殊值
Infinity ,代表无穷大,大于任何数值
-Infinity ,代表无穷小,小于任何数值
NaN ,Not a number,代表一个非数值
注:
isNaN()方法用来判断一个变量是否为非数字的类型,返回 true 或者 false
2.字符串型 String
字符串型可以是引号中的任意文本,其语法为 双引号 “” 和 单引号’’
var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串 var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串 // 常见错误 var strMsg3 = 我爱大肘子; // 报错,没使用引号,会被认为是js代码,但js没有这些语法
注:
因为 HTML 标签里面的属性使用的是双引号,JS 这里我们更推荐使用单引号。
JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号 (外双内单,外单内双)
通过字符串的 length 属性可以获取整个字符串的长度。
多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
3.布尔型 Boolean
布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。
console.log(true + 1); // 2 console.log(false + 1); // 1
4.Undefined 和 Null
- 一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时,注意结果)
var variable; console.log(variable); // undefined console.log('你好' + variable); // 你好undefined console.log(11 + variable); // NaN console.log(true + variable); // NaN
- 一个声明变量给 null 值,里面存的值为空(学习对象时,我们继续研究null)
var vari = null; console.log('你好' + vari); // 你好null console.log(11 + vari); // 11 console.log(true + vari); // 1
5.数据类型转换
- toString() 和 String() 使用方式不一样。
- 三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式, 这一种方式也称之为隐式转换。
- 转换为数字型
3. 运算符
- 一元运算符:只有一个运算数的运算符
- ++,-- , +(正号)
- ++ --: 自增(自减)
- ++(–) 在前,先自增(自减),再运算
- ++(–) 在后,先运算,再自增(自减)
- +(-):正负号
注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的
- 算数运算符
+ - * / % ...
赋值运算符
= += -+…
比较运算符
< >= <= == ===(全等于)
比较方式
类型相同:直接比较
字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。
类型不同:先进行类型转换,再比较
===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
逻辑运算符
&& || !
* 其他类型转boolean:
1. number:0或NaN为假,其他为真 2. string:除了空字符串(""),其他都是true 3. null&undefined:都是false 4. 对象:所有对象都为true
- 三元运算符
? : 表达式
var a = 3;
var b = 4;
var c = a > b ? 1:0;
语法:
表达式? 值1:值2;
判断表达式的值,如果是true则取值1,如果是false则取值2;
4. 流程控制语句:
f…else…
switch:
在java中,switch语句可以接受的数据类型: byte int shor char,枚举(1.5) ,String(1.7)
switch(变量):
case 值:
在JS中,switch语句可以接受任意的原始数据类型
while
do…while
for
5. JS特殊语法:
1. 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议) 2. 变量的定义使用var关键字,也可以不使用 用: 定义的变量是局部变量 不用:定义的变量是全局变量(不建议)
三.基本对象
1.数组
数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式
1.创建数组
- 利用 new 创建数组
var 数组名 = new Array() ; var arr = new Array(); // 创建一个新的空数组
- 利用数组字面量创建数组
//1. 使用数组字面量方式创建空的数组 var 数组名 = []; //2. 使用数组字面量方式创建带初始值的数组 var 数组名 = ['小白','小黑','大黄','瑞奇']
注:
- 声明数组并赋值称为数组的初始化
- 这种字面量方式也是我们以后最多使用的方式
2.遍历数组
var arr = ['red','green', 'blue']; for(var i = 0; i < arr.length; i++){ console.log(arrStus[i]); }
注意:
使用“数组名.length”可以访问数组元素的数量(数组长度)。
当我们数组里面的元素个数发生了变化,这个 length 属性跟着一起变化。
2.函数对象
函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
1.函数的使用
函数在使用时分为两步:声明函数和调用函数。
声明函数
// 声明函数 function 函数名() { //函数体代码 }
- 调用函数
函数名();
注意:声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码。
2.函数的返回值
return 语句的语法格式如下:
// 声明函数 function 函数名(){ ... return 需要返回的值; } // 调用函数 函数名(); // 此时调用函数就可以得到函数体内return 后面的值
注意:
在使用 return 语句时,函数会停止执行,并返回指定的值
如果函数没有 return ,返回的值是 undefined
break ,continue ,return 的区别
break :结束当前的循环体(如 for、while)
continue :跳出本次循环,继续执行下次循环(如for、while)
return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码
3.arguments的使用
JS中所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。
arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:
具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法
4. 函数的两种声明方式
自定义函数方式
利用函数关键字 function 自定义函数方式。
// 声明定义方式 function fn() {...} // 调用 fn();
注:
- 因为有名字,所以也被称为命名函数
- 调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面
- 函数表达式方式(匿名函数)
// 这是函数表达式写法,匿名函数后面跟分号结束 var fn = function(){...}; // 调用的方式,函数调用必须写到函数体下面 fn();
注:
- 因为函数没有名字,所以也被称为匿名函数
- 这个fn 里面存储的是一个函数
3.自定义对象
在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。
属性:事物的特征,在对象中用属性来表示(常用名词)
方法:事物的行为,在对象中用方法来表示(常用动词)
1.创建对象的三种方式
在 JavaScript 中,现阶段我们可以采用三种方式创建对象(object):
- 利用字面量创建对象
- 利用 new Object 创建对象
- 利用构造函数创建对象
- 利用字面量创建对象
对象字面量:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法。
{ } 里面采取键值对的形式表示
var star = { name : 'pink', age : 18, sex : '男', sayHi : function(){ alert('大家好啊~'); } };
- 利用new Object创建对象
var andy = new Obect(); andy.name = 'pink'; andy.age = 18; andy.sex = '男'; andy.sayHi = function(){ alert('大家好啊~'); }
- 利用构造函数创建对象
在 js 中,使用构造函数要时要注意以下两点:
- 构造函数用于创建某一类对象,其首字母要大写
- 构造函数要和 new 一起使用才有意义
function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; this.sayHi = function() { alert('我的名字叫:' + this.name + ',年龄:' + this.age + ',性别:' + this.sex); } } var bigbai = new Person('大白', 100, '男'); var smallbai = new Person('小白', 21, '男'); console.log(bigbai.name); console.log(smallbai.name);
注意:
- 构造函数约定首字母大写。
- 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。
- 构造函数中不需要 return 返回结果。
- 当我们创建对象的时候,必须用 new 来调用构造函数。
2.遍历对象属性
for…in 语句用于对数组或者对象的属性进行循环操作。
其语法如下:
for (变量 in 对象名字) { // 在此执行代码 }
举例:
for (var k in obj) { console.log(k); // 这里的 k 是属性名 console.log(obj[k]); // 这里的 obj[k] 是属性值 }