JS的功能
1.直接写入 HTML 输出流
如果你在 HTML 文档加载完成后,比如在一个按钮的点击事件中使用 document.write() ,那么它会清空整个文档,只显示你写入的内容。
因为 document.write() 会自动调用 document.open() ,打开一个新的文档流,覆盖原来的文档
2.对事件的反应
alert()函数弹出页面提示
3.改变 HTML 内容
4.改变 HTML 图像
5.改变 HTML 样式
6.验证输入
用法格式
HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间,放置在 HTML 页面的 和 ** 部分中。
通常的做法是把函数放入 部分中,或者放在页面底部(格式好看
如需使用外部文件,在
<script src="myScript.js"></script>
外部脚本不能包含
输出
JavaScript 没有任何打印或者输出的函数(没懂这句话的意思)
1.使用 window.alert()
弹出警告框来显示数据:<script> window.alert(content) </script>
2.操作 HTML 元素
使用 document.getElementById(id) 方法
使用 "id" 属性来标识 HTML 元素, innerHTML 来将id标签的内容改为其后的内容
3.写到HTML文档
使用 document.write() 可以向文档写入内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
在点击按钮后会刷新页面显示日期
4.写到控制台
使用 console.log() 方法在浏览器中显示 JavaScript 值。浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
语法
1.字面量
数字:可以是整数或者是小数,或者是科学计数(e)
字符串:可以使用单引号或双引号
表达式
数组:中括号,里面逗号
对象:大括号,里面 name:value,逗号
函数:function 函数名(传入参数) {函数体}
2.变量
使用关键字 var 来定义变量, 使用等号来为变量赋值(const表示常量)
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
- 变量名称对大小写敏感(y 和 Y 是不同的变量
区分数字和字符串的依据是是否含有引号
如果重新声明 JavaScript 变量,该变量的值不会丢失:
var carname="Volvo";
var carname; //变量 carname 的值依然是 "Volvo"
3.其他
语句用分号分隔
单行注释用//,多行注释以 /* 开始,以*/结尾
大小写敏感
JavaScript 会忽略多余的空格
在文本字符串中使用反斜杠对代码行进行换行(注意只是方便阅读,输出时不添加换行!)
JavaScript 是脚本语言,浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
数据类型
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。
引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型
变量的数据类型可以使用 typeof 操作符来查看
字符串中使用引号,只要不匹配包围字符串的引号即可(双里面用单,单里面用双),也可以在字符串添加转义字符来使用引号
布尔(逻辑)只能有两个值:true 或 false。注意小写!
创建数组的三种方法:
//1
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
//2
var cars=new Array("Saab","Volvo");
//3
var cars=["Saab","Volvo","BMW"];
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
声明新变量时,可以使用关键词 "new" 来声明其类型
对象
对象只是带有属性和方法的特殊数据类型。js的所有事物都是对象,允许自定义对象
1.对象属性
name:value键值对
访问属性的方法:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};//对象
//1.
person.lastName;
//2.
person["lastName"];
2.对象方法
创建对象方法:methodName : function() { // 代码 }
访问:objectName.methodName()
对象方法访问对象内部属性,需要用到this指针
创建对象
1.使用 Object
- 如果给定值是 null 或 undefined,将会创建并返回一个空对象。
- 如果传进去的是一个基本类型的值,则会构造其包装类型的对象。
- 如果传进去的是引用类型的值,仍然会返回这个值,经他们复制的变量保有和源对象相同的引用地址。
- 当以非构造函数形式被调用时,Object 的行为等同于 new Object()。
语法格式:new Object([value]) //以构造函数形式来调用
也可以使用对象字面量来创建对象:
par={ name1 : value1, name2 : value2,...nameN : valueN }
2.使用对象构造器
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;//不能省略!!!
function changeName(name)
{
this.lastname=name;
}
}
用对象构造器创建新的对象实例:var myFather=new person("John","Doe",50,"blue");
一个已存在构造器的对象中不能通过构造器名添加新的属性(如person.nation=UK这样),需要在在构造器函数中添加
可以通过为对象赋值,向已有对象添加新属性
对象是==可变的==,它们是通过引用来传递的!!!
var x = person; 修改 x ,person 的属性也会改变
for...in 语句循环
遍历对象的属性
for (variable in object)
{
执行的代码……
}
prototype
所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。
使用 prototype 属性就可以给对象的构造函数添加新的属性
也可以使用 prototype 属性就可以给对象的构造函数添加新的方法
格式:构造函数名.prototype.新属性或者新方法
前面的基础:
一个已存在构造器的对象中不能通过构造器名添加新的属性(如
person.nation="UK"这样),需要在在构造器函数中添加可以通过为对象赋值,向已有对象(如myFather.nation="UK")添加新属性
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;//不能省略!!!
function changeName(name)
{
this.lastname=name;
}
}
var myFather=new person("John","Doe",50,"blue");
//添加属性:
person.prototype.nationality = "English";//可
myFather.nationality = "English";//可
//person.nationality = "English";//不可!
//添加方法:
person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};
函数
function functionname(var1,var2,...)
{
// 执行代码
//若需返回值:return ...
}
如果把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
在 HTML 中, 全局变量是 window 对象,所以window 对象可以调用函数内的局部变量。
所有数据变量都属于 window 对象
全局变量或者函数,可以覆盖 window 对象的变量或者函数。
局部变量,包括 window 对象,可以覆盖全局变量和函数。
函数表达式
可以用变量=函数(无函数名,形式为function (var) {};)的形式将函数表达式存储在变量中,调用的时候直接调用变量名
函数提升
函数可以先调用后声明。使用表达式定义函数时无法提升。
自调用函数
需要是没有声明的函数(无函数名),表达式后面紧跟 () ,则会自动调用。(function () { var x = "Hello!!"; // 我将调用自己 })();
函数作为对象
arguments.length 属性:函数内部调用该属性,获取接收到的参数个数
toString() 方法:在函数外部用,函数名.toString(),将函数整体作为字符串返回
箭头函数
当我们使用箭头函数的时候,箭头函数会默认帮我们绑定外层 this 的值,所以在箭头函数中 this 的值和外层的 this 是一样的。
箭头函数是不能提升的,所以需要在使用之前定义。
使用 const 比使用 var 更安全,因为函数表达式始终是一个常量。
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式(单一)
单一参数 => {函数声明}
() => {函数声明}
函数参数
隐式参数在函数调用时传递给函数真正的值。(形参?)
如果函数在调用时未提供隐式参数,参数会默认设置为undefine,但是建议最好为参数设置一个默认值:y=y||0;如果函数调用时设置了过多的参数,参数将无法被引用,因为无法找到对应的参数名。 只能使用 arguments 对象来调用。
支持函数带有默认参数
arguments 对象:arguments 对象包含了函数调用的参数数组。例如:
在函数内部修改对象的属性就会修改其初始的值。修改对象属性可作用于函数外部(全局变量)。
函数调用
this指向函数执行时的当前对象。
1.仅单独作为一个函数调用:此函数不属于任何对象,始终是默认的全局对象。全局变量,方法或函数容易造成命名冲突的bug。
当函数没有被自身的对象调用时 this 的值就会变成全局对象。
2.函数作为对象方法调用:会使得 this 的值成为对象本身。
3.使用构造函数调用:函数调用前使用 new 关键字, 则是调用了构造函数,重新创建对象。e.g.:
// 构造函数:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
var x = new myFunction("John","Doe");
4.作为函数方法调用:JavaScript 函数是对象,有自己的属性、方法。
call() :第一个参数必须是对象本身,从第二个参数开始是函数的参数
apply():第一个参数必须是对象本身,第二个参数是函数的参数组合成的数组。
在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。
在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。
function myFunction(a, b) {
return a * b;
}
//call
myObject = myFunction.call(myObject, 10, 2); // 返回 20
//apply
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray); // 返回 20
总结
今天学习了javascript有关的基本概念,了解了其语法、数据类型、对象和函数,收获颇丰。