网站开发制作公司简介,永久免费的培训学校管理软件,网站建设规划设计方案,做网站一年百万JavaScript 文章目录 JavaScript组成书写方式行内式内嵌式外部式#xff08;推荐写法#xff09; 输入输出变量创建动态类型基本数据类型数字类型特殊数字值 String转义字符求长度字符串拼接布尔类型undefined未定义数据类型null 运算符条件语句if语句三元表达式switch 循环语…JavaScript 文章目录 JavaScript组成书写方式行内式内嵌式外部式推荐写法 输入输出变量创建动态类型基本数据类型数字类型特殊数字值 String转义字符求长度字符串拼接布尔类型undefined未定义数据类型null 运算符条件语句if语句三元表达式switch 循环语句while循环continuebreakfor循环 数组创建数组获取数组元素新增数组元素1. 通过修改length 新增2.通过下标新增3. 使用 push 进行追加元素 删除数组中的元素 函数语法格式参数个数函数表达式作用域作用域链 对象基本概念创建对象1.使用字面量创建对象[常用]2.使用new Object创建对象3.使用构造函数创建对象基本语法 new关键字对象JavaScript的对象和Java的对象的区别1.JavaScript 没有类的概念2.JavaScript对象不区分属性和方法3.JavaScript对象没有private/public等访问控制机制.4.JavaScript对象没有继承 class关键字static变量继承 JS运行通常是在浏览器上~ 组成 ECMAScript(简称 ES): JavaScript 语法 DOM: 页面文档对象模型, 对页面中的元素进行操作 BOM: 浏览器对象模型, 对浏览器窗口进行操作
书写方式
行内式 input typebutton value这是一个按钮 onclickalert(哈哈哈哈哈) name idinput typebutton value这是一个按钮 onclickalert(哈哈哈哈哈) name id内嵌式
scriptalert(hhhhhhh)
/script外部式推荐写法
bodyscript src./demo02.js/script
/bodyalert(我在学js)输入输出
输入prompt
// 弹出一个输入框
prompt(请输入您的姓名:);输出alert
// 弹出一个输出框
alert(hello);输出console.log
// 向控制台输出日志
console.log(这是一条日志);变量
创建
var name zhangsan;
var age 20;var name guagtouqiang
console.log(name)
let age 30
console.log(age)let比var出现的晚意味着避免了var这块定义变量的时候的一些缺陷如果使用let定义变量此时变量生命周期作用域基本上和Java一样。
JS定义变量的时候不需要对变量指定类型
在JS中对于数字只有一种类型数值类型
动态类型
什么是强类型变量什么是弱类型变量 强类型变量意味着不同类型之间变量进行赋值的时候需要进行一定的手段即强制类型转换 弱类型变量在不同类型之间变量进行赋值的时候可以直接赋值
scripta1bbbaconsole.log(b)
/script什么是动态类型变量什么是静态类型变量
动态类型变量代码在执行过程中变量类型可以随时发生变化静态类型变量意味着定义的时候是什么类型在运行过程中就是什么类型
scripta1console.log(typeof(a))bbabconsole.log(typeof(a))
/script基本数据类型 数字类型
let a 10console.log(typeof(a))a a / 3console.log(a)console.log(typeof(a))特殊数字值 var max Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log(hehe - 10);注意: 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity ‘hehe’ 10 得到的不是 NaN, 而是 ‘hehe10’, 会把数字隐式转成字符串, 再进行字符串拼接. 可以使用 isNaN 函数判定是不是一个非数字.
console.log(isNaN(10)); // false
console.log(isNaN(hehe - 10)); // trueString
var a haha;
var b hehe;
var c hehe; // 运行出错var msg My name is zhangsan; // 出错
var msg My name is \zhangsan\; // 正确, 使用转义字符. \ 来表示字符串内部的引
号.
var msg My name is zhangsan; // 正确, 搭配使用单双引号
var msg My name is zhangsan; // 正确, 搭配使用单双引号转义字符 求长度
使用 String 的 length 属性即可
var a hehe;
console.log(a.length);
//4
var b 哈哈;
console.log(b.length);
//2单位为字符的数量
字符串拼接
使用 进行拼接
var a my name is ;
var b zhangsan;
console.log(a b);数字和字符串也可以进行拼接
var c my score is ;
var d 100;
console.log(c d);认准相加的变量到底是字符串还是数字
console.log(100 100); // 200
console.log(100 100); // 100100布尔类型
表示 “真” 和 “假”
Boolean 参与运算时当做 1 和 0 来看待
console.log(true 1);
console.log(false 1)undefined未定义数据类型
如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型
var a;
console.log(a)undefined 和字符串进行相加, 结果进行字符串拼接
console.log(a 10); // undefined10undefined 和数字进行相加, 结果为 NaN
console.log(a 10);null
null 表示当前的变量是一个 “空值”.
var b null;
console.log(b 10); // 10
console.log(b 10); // null10注意 null 和 undefined 都表示取值非法的情况, 但是侧重点不同. null 表示当前的值为空. (相当于有一个空的盒子) undefined 表示当前的变量未定义. (相当于连盒子都没有
运算符 比较的是变量的内容比较的是内容数据类型
let a 10
let b 10
alert(a b)let a 10
let b 10
alert(a b)条件语句
if语句
基本语法格式
条件表达式为 true, 则执行 if 的 { } 中的代码
// 形式1
if (条件) {语句
}
// 形式2
if (条件) {语句1
} else {语句2
}
// 形式3
if (条件1) {语句1
} else if (条件2) {语句2
} else if .... {语句...
} else {语句N
}三元表达式
是 if else 的简化写法.
条件 ? 表达式1 : 表达式2条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值.
注意, 三元表达式的优先级是比较低的.
switch
switch (表达式) {case 值1:语句1;break;case 值2:语句2:break;default:语句N;
}// 用户输入一个整数, 提示今天是星期几var day prompt(请输入今天星期几)switch (parseInt(day)) {case 1:console.log(星期一);break;case 2:console.log(星期二);break;case 3:console.log(星期三);break;case 4:console.log(星期四);break;case 5:console.log(星期五);break;case 6:console.log(星期六);break;case 7:console.log(星期日);break;default:console.log(输入有误);}循环语句
while循环
while (条件) {循环体;
}continue
结束这次循环
吃五个李子, 发现第三个李子里有一只虫子, 于是扔掉这个, 继续吃下一个李子
var i 1;
while (i 5) {if (i 3) {i;continue;}console.log(我在吃第 i 个李子);i;
}
我在吃第1个李子
我在吃第2个李子
我在吃第4个李子
我在吃第5个李子break
结束整个循环
吃五个李子, 发现第三个李子里有半个虫子, 于是剩下的也不吃了.
var i 1;
while (i 5) {if (i 3) {break;}console.log(我在吃第 i 个李子);i;
}
我在吃第1个李子
我在吃第2个李子for循环
for (表达式1; 表达式2; 表达式3) {循环体
}数组
创建数组
使用 new 关键字创建
// Array 的 A 要大写
var arr new Array();使用字面量方式创建 [常用]
var arr [];
var arr2 [1, 2, haha, false]; // 数组中保存的内容称为 元素注意JS 的数组不要求元素是相同类型
获取数组元素
使用下标的方式访问数组元素(从 0 开始
var arr [小猪佩奇, 小猪乔治, 小羊苏西];
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
arr[2] 小猫凯迪;
console.log(arr);如果下标超出范围读取元素, 则结果为 undefined
console.log(arr[3]); // undefined
console.log(arr[-1]); // undefined注意: 不要给数组名直接赋值, 此时数组中的所有元素都没了.
相当于本来 arr 是一个数组, 重新赋值后变成字符串了.
var arr [小猪佩奇, 小猪乔治, 小羊苏西];
arr 小猫凯迪;新增数组元素
1. 通过修改length 新增
相当于在末尾新增元素. 新增的元素默认值为 undefined
var arr [9, 5, 2, 7];
arr.length 6;
console.log(arr);
console.log(arr[4], arr[5]);2.通过下标新增
如果下标超出范围赋值元素, 则会给指定位置插入新元素
var arr [];
arr[2] 10;
console.log(arr)此时这个数组的 [0] 和 [1] 都是 undefined
3. 使用 push 进行追加元素
代码示例: 给定一个数组, 把数组中的奇数放到一个 newArr 中.
var arr [9, 5, 2, 7, 3, 6, 8];
var newArr [];
for (var i 0; i arr.length; i) {if (arr[i] % 2 ! 0) {newArr.push(arr[i]);}
}
console.log(newArr);删除数组中的元素
使用 splice 方法删除元素
var arr [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]目前这已经用到了数组中的一些属性和方法.
arr.length, length 使用的时候不带括号, 此时 length 就是一个普通的变量(称为成员变量, 也叫属性)
arr.push(), arr.splice() 使用的时候带括号, 并且可以传参数, 此时是一个函数 (也叫做方法)
函数
语法格式
// 创建函数/函数声明/函数定义
function 函数名(形参列表) {函数体return 返回值;
}
// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 函数名(实参列表) // 考虑返回值函数定义并不会执行函数体内容, 必须要调用才会执行. 调用几次就会执行几次.
function hello() {console.log(hello);
}
// 如果不调用函数, 则没有执行打印语句
hello();调用函数的时候进入函数内部执行, 函数结束时回到调用位置继续执行. 可以借助调试器来观察. 函数的定义和调用的先后顺序没有要求. (这一点和变量不同, 变量必须先定义再使用)
// 调用函数
hello();
// 定义函数
function hello() {console.log(hello);
}function helloSb(num, name) {console.log(num hello name)return 1}// hello()let a helloSb(1, sb)console.log(typeof(a))参数个数
实参和形参之间的个数可以不匹配. 但是实际开发一般要求形参和实参个数要匹配
如果实参个数比形参个数多, 则多出的参数不参与函数运算
sum(10, 20, 30); // 30如果实参个数比形参个数少, 则此时多出来的形参值为 undefined
sum(10); // NaN, 相当于 num2 为 undefined.JS 的函数传参比较灵活, 这一点和其他语言差别较大. 事实上这种灵活性往往不是好事
函数表达式
另外一种函数的定义方式
var add function() {var sum 0;for (var i 0; i arguments.length; i) {sum arguments[i];}return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add); // function此时形如 function() { } 这样的写法定义了一个匿名函数, 然后将这个匿名函数用一个变量来表示. 后面就可以通过这个 add 变量来调用函数了.
JS中的arguments是一个特殊的对象在函数内部可以访问到。它包含了函数被调用时传递的所有参数。arguments对象类似于一个数组但它并不是一个真正的数组。它可以用类似于数组的方式访问函数参数的值例如arguments[0]表示第一个参数arguments[1]表示第二个参数以此类推。arguments对象还有一个length属性用于获取传递给函数的参数数量。此外arguments对象还有一些附加的方法和属性例如arguments.callee表示当前正在执行的函数自身arguments.caller表示调用当前函数的函数但在严格模式下访问arguments.callee和arguments.caller会导致错误。JS 中函数是一等公民, 可以用变量保存, 也可以作为其他函数的参数或者返回值
作用域
某个标识符名字在代码中的有效范围.
在 ES6 标准之前, 作用域主要分成两个 全局作用域: 在整个 script 标签中, 或者单独的 js 文件中生效. 局部作用域/函数作用域: 在函数内部生效.
// 全局变量
var num 10;
console.log(num);
function test() {// 局部变量var num 20;console.log(num);
}
function test2() {// 局部变量var num 30;console.log(num);
}
test();
test2();
console.log(num);
// 执行结果
10
20
30
10创建变量时如果不写 var, 则得到一个全局变量.
function test() {num 100;
}
test();
console.log(num);
// 执行结果
100另外, 很多语言的局部变量作用域是按照代码块(大括号)来划分的, JS 在 ES6 之前不是这样的.
if (1 2) {var a 10;
}
console.log(a)作用域链 内部函数可以访问外部函数的变量. 采取的是链式查找的方式. 从内到外依次进行查找.
var num 1;
function test1() {var num 10;function test2() {var num 20;console.log(num);}test2();
}
test1();
// 执行结果
20执行 console.log(num) 的时候, 会现在 test2 的局部作用域中查找 num. 如果没找到, 则继续去 test1 中查找. 如果还没找到, 就去全局作用域查找. 对象
基本概念
对象是指一个具体的事物. “电脑” 不是对象, 而是一个泛指的类别. 而 “我的联想笔记本” 就是一个对象. 在 JS 中, 字符串, 数值, 数组, 函数都是对象.
每个对象中包含若干的属性和方法. 属性: 事物的特征. 方法: 事物的行为. 例如, 你有一个女票. 她的身高体重三围这些都是属性. 她的唱歌, 跳舞, 暖床都是方法. 对象需要保存的属性有多个, 虽然数组也能用于保存多个数据, 但是不够好. 例如表示一个学生信息. (姓名蔡徐坤, 身高 175cm, 体重 170斤) var student [‘蔡徐坤’, 175, 170]; 但是这种情况下到底 175 和 170 谁表示身高, 谁表示体重, 就容易分不清 JavaScript 的对象 和 Java 的对象概念上基本一致. 只是具体的语法表项形式差别较大.
创建对象
1.使用字面量创建对象[常用]
var a {}; // 创建了一个空的对象
var student {name: 蔡徐坤,height: 175,weight: 170t,sayHello: function() {console.log(hello);}
};使用 { } 创建对象 属性和方法使用键值对的形式来组织. 键值对之间使用 , 分割. 最后一个属性后面的 , 可有可无 键和值之间使用 : 分割. 方法的值是一个匿名函数.
使用对象的属性和方法:
// 1. 使用 . 成员访问运算符来访问属性 . 可以理解成 的
console.log(student.name);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(student[height]);
// 3. 调用方法, 别忘记加上 ()
student.sayHello();2.使用new Object创建对象
var student new Object(); // 和创建数组类似
student.name 蔡徐坤;
student.height 175;
student[weight] 170;
student.sayHello function () {console.log(hello);
}
console.log(student.name);
console.log(student[weight]);
student.sayHello();注意, 使用 { } 创建的对象也可以随时使用 student.name “蔡徐坤”; 这样的方式来新增属性.
3.使用构造函数创建对象
前面的创建对象方式只能创建一个对象. 而使用构造函数可以很方便 的创建 多个对象.
function Prople(name,height,weight){this.name namethis.height heightthis.weight weightthis.Say function(){console.log(name fuck you)}}let ikun new Prople(ikun, 1, 1)let cxk new Prople(cxk, 2, 2)let xhz new Prople(xhz, 3, 3)console.log(ikun)ikun.Say()console.log(cxk)cxk.Say()例如: 创建几个猫咪对象
var mimi {name: 咪咪,type: 中华田园喵,miao: function () {console.log(喵);}
};
var xiaohei {name: 小黑,type: 波斯喵,miao: function () {console.log(猫呜);}
}
var ciqiu {name: 刺球,type: 金渐层,miao: function () {console.log(咕噜噜);}
}此时写起来就比较麻烦. 使用构造函数可以把相同的属性和方法的创建提取出来, 简化开发过程.
基本语法
function 构造函数名(形参) {this.属性 值;this.方法 function...
}var obj new 构造函数名(实参);使用构造函数重新创建猫咪对象
function Cat(name, type, sound) {this.name name;this.type type;this.miao function () {console.log(sound); // 别忘了作用域的链式访问规则}
}
var mimi new Cat(咪咪, 中华田园喵, 喵);
var xiaohei new Cat(小黑, 波斯喵, 猫呜);
var ciqiu new Cat(刺球, 金渐层, 咕噜噜);
console.log(mimi);
mimi.miao();new关键字
new 的执行过程: 先在内存中创建一个空的对象 { } this 指向刚才的空对象(将上一步的对象作为 this 的上下文) 执行构造函数的代码, 给对象创建属性和方法 返回这个对象 (构造函数本身不需要 return, 由 new 代劳了)
new关键字文档
对象
JavaScript的对象和Java的对象的区别
1.JavaScript 没有类的概念
对象其实就是 “属性” “方法” .
类相当于把一些具有共性的对象的属性和方法单独提取了出来, 相当于一个 “月饼模子”
在 JavaScript 中的 “构造函数” 也能起到类似的效果.
而且即使不是用构造函数, 也可以随时的通过 { } 的方式指定出一些对象 在 ES6 中也引入了 class 关键字, 就能按照类似于 Java 的方式创建类和对象了. 2.JavaScript对象不区分属性和方法
JavaScript中的函数是一等公民和普通的变量一样.存储了函数的变量能够通过()来进行调用执行.
3.JavaScript对象没有private/public等访问控制机制.
对象中的属性都可以被外界随意访问
4.JavaScript对象没有继承
继承本质就是让两个对象建立关联”.或者说是让一个对象能的够重用另一个对象的属性方法 JavaScript中使用原型机制实现类似的效果
class关键字
class People {constructor(name, height, weight) {this.name namethis.height heightthis.weight weight }Say(){console.log(this.name 唱跳rap篮球)}}let ikun new People(ikun,175,75)console.log(ikun)ikun.Say()static变量
class People {constructor(name, height, weight) {this.name namethis.height heightthis.weight weight}Say() {console.log(this.name 唱跳rap篮球)}static other other}let ikun new People(ikun, 175, 75)console.log(ikun)ikun.Say()alert(People.other)class People {constructor(name, height, weight) {this.name namethis.height heightthis.weight weight}Say() {console.log(this.name 唱跳rap篮球)}static other otherstatic Sum(){return 100;}}let ikun new People(ikun, 175, 75)console.log(ikun)ikun.Say()alert(People.other)alert(People.Sum())但是这里不能ikun.Sum(),因为Sum()没有定义 继承
class People {constructor(name, height, weight) {this.name namethis.height heightthis.weight weight}Say() {console.log(this.name 唱跳rap篮球)}static other otherstatic Sum(){return 100;}}let ikun new People(ikun, 175, 75)console.log(ikun)ikun.Say()alert(People.other)alert(People.Sum())class Student extends People{constructor(name, height, weight,number){super(name,height,weight)this.number number}}let student new Student(cxk,188,70,22202012)console.log(student)class People {constructor(name, height, weight) {this.name namethis.height heightthis.weight weight}Say() {console.log(this.name 唱跳rap篮球)}static other otherstatic Sum() {return 100;}}let ikun new People(ikun, 175, 75)console.log(ikun)ikun.Say()alert(People.other)alert(People.Sum())class Student extends People {constructor(name, height, weight, number) {super(name, height, weight)this.number number}Say() {alert(this.name)}}let student new Student(cxk, 188, 70, 22202012)console.log(student)student.Say() 至此前端三件套的基本知识到此完结接下来还会更新JavaScript的webAPI敬请期待~
