JS基础语法部分
什么是JavaScript
- JavaScript是运行在浏览器上的脚本语言. 简称JS
- JavaScript是网景公司 (NetScape) 的布兰登艾奇 (JS之父) 开发的, 最初叫LiveScript
- LiveScript的出现让浏览器更加的生动, 不再是单纯的静态页面了. 页面更具有交互性
- 在历史的某个阶段, SUN公司和网景公司他们之间有合作关系, SUN公司把LiveScript的名字修改为JavaScript
- JavaScript这个名字中虽然带有Java, 但是和Java没有任何关系, 只是语法上有点类似
- Java运行在JVM中, JavaScript运行在浏览器的内存当中
- JavaScript程序不需要我们程序员手动编译, 编写完源代码之后, 浏览器直接打开解释执行
- JavaScript的"目标程序"以普通文本形式保存, 这种语言都叫做"脚本语言"
- Java的目标程序以.class形式存在, 不能使用文本编辑器打开, 不是脚本语言
- 网景公司目前被美国在线收购
- 网景公司最著名的是领航者浏览器, Navigator浏览器
- LiveScript的出现, 最初的时候是为Navigator浏览器量身定做的一门语言, 不支持其他浏览器
- 当Navigator浏览器使用非常广泛的时候, 微软害怕了, 于是微软在最短的时间内组建了一个团队开始研发只支持IE浏览器的脚本语言, 叫做 JScript
- JavaScript和JScript并存的年代, 程序员是很痛苦的, 因为程序员要写两套程序, 在这种情况下, 有一个非营利性组织站出来了, 叫做ECMA组织 (欧洲计算机协会) ,ECMA根据JavaScript制定了ECMA-262号标准, 叫做ECMA-Script, 现代的JavaScript和JScript都实现了ECMA-262规范
- 以后大家会学习JSP技术, 与JS无半毛钱关系
在HTML中嵌入JavaScript代码的三种方式
- HTML中嵌入JS代码的第一种方式
要实现的功能: 用户点击以下按钮, 弹出消息框
<!doctype html>
<html>
<head>
<title>HTML中嵌入JS代码的第一种方式</title>
</head>
<body>
<input type="button" value="hello" onclick="window.alert('hello js')"/>
<input type="button" value="hello" onclick="alert('第一次弹窗')
alert('关掉我还会有弹窗')
alert('第三次弹窗')"/>
</body>
</html>
-
input表单, type类型为button, value值为hello
-
JS是一门事件驱动型的编程语言, 依靠事件去驱动, 然后执行对应的程序, 在JS中有很多事件, 其中有单击click, 事件都会对应一个事件句柄onclick, 事件句柄是以HTML标签的属性存在的
-
页面打开的时候, JS代码并不会执行, 只是把这段JS代码注册到按钮click事件上, 等这个按钮发生click事件之后, 注册在onclick后面的JS代码会被浏览器自动调用
-
怎么使用JS代码弹出消息框? 在JS中有一个内置的对象叫做window, 全部小写, 可以直接拿来使用, window代表的是浏览器对象, window对象有一个函数叫做alert, 用法是window.alert(消息), 这样就可以弹窗了
-
window. 可以省略不写
- HTML中嵌入JS代码的第二种方式
<!doctype html>
<html>
<head>
<title>HTML中嵌入JS代码的第二种方式</title>
</head>
<body>
<script type="text/javascript">
window.alert("hello world!");
window.alert("嘿嘿嘿你关不掉我");
</script>
<input type="button" value="我是一个按钮">
</body>
</html>
- 脚本块方式
- 暴露在脚本块当中的程序, 在页面打开的时候执行, 并遵守自上而下的顺序依次执行
- JavaScript脚本块在一个页面中可以出现多次, 没有要求, 脚本块的位置也没有要求, 随意
- alert会阻塞页面的加载
- HTML中嵌入JavaScript代码的第三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中嵌入JavaScript代码的第三种方式</title>
</head>
<body>
<script type="text/javascript" src="JS/1.js"></script>
<script type="text/javascript">
alert("hi");
</script>
</body>
</html>
[1.js代码]
window.alert("hello");
window.alert("你关不掉我");
- 一个JS文件可以被引入多次, 但实际开发中这种需求很少
- 结束的< /script>标签必须有
- 如果是引入文件, 在script里面不能再写代码
- 没有src的可以写脚本块
关于JS中的变量
-
怎么声明变量?
var 变量名
-
怎么给变量赋值?
变量名 = 值
-
JavaScript是一种弱类型语言,没有编译阶段, 一个变量可以随意赋值
-
undefined在JS中是一个具体存在的值
-
一个变量没有声明/定义直接访问, 就会undefined
-
ctrl+shift+c直接检查
JS函数初步
-
JS中的函数,等同于Java语言中的方法,函数也是一段可以被重复利用的代码片段,函数一般都是可以完成某个特定功能的
-
JS中的函数不需要指定返回值类型,返回什么类型都可以
函数声明的两种方式
- 第一种方式
function 函数名(形式参数表){
函数体;
}
//写函数
function sum(a,b){
alert(a+b);
}
//调函数
sum(1,2);
- 第二种方式
函数名 = function(形式参数表){
函数体;
}
hello = function (user){
alert("hello "+user+"!")
}
hello("小黑");
- 扩展: 在按钮中使用自己的函数
<input type="button" value="点我" onclick="hello('哈哈')">
函数的奇怪几种传参
[传入参数的不同]
首先准备一个函数, 这里是求和函数, 函数有两个参数, 返回两个参数的和
function sum(a, b){
return a + b;
}
- 传入两个数字
这个情况应该很容易就能想到答案, 就是返回两个数字的和
var retVal1 = sum(1,2);
alert(retVal1);//3
- 传入一个字符串
这时字符串赋值给第一个参数a, b变量没有赋值系统默认undefined
var retVal2 = sum("嘿");//嘿赋值给a
alert(retVal2);//嘿undefined
- 啥也不传入
此时两个东西相加, 应该得到一个数字, 但是这个地方结果不是数字, 所有返回NaN(Not a Number 不是数字)
var retVal3 = sum();
alert(retVal3);//NaN Not A Number
- 传入参数过多
俺顺序一对一, 多余的弃之, 这里也就是1给a, 2给b, 3作废
var retVal4 = sum(1, 2, 3);
alert(retVal4);//3
[函数的重载?其实不是重载]
首先需要两个参数不同的同名函数, 第一个函数无参, 第二个函数有一个参数
function test(){
alert("无参数");
}
function test(name){
alert("一个参数")
}
给函数丢一个参数看看
test("比丢");//一个参数
丢入一个函数, 出来的是一个参数的结果, 这里并不是你想象的重载~
在JavaScript中, 同名参数, 后来声明的函数会把之前声明的函数覆盖, 在这个例子中也就是, 第二个函数把第一个函数顶替了, 第一个函数作废了, 嘿嘿嘿
局部变量和全局变量
- 全局变量
- 在函数体之外声明的变量,
- 全局变量的声明周期是: 浏览器打开时声明, 浏览器关闭时销毁,
- 尽量少用, 因为全局变量会一直在浏览器当中, 耗费内存空间
var i = 100;
function accessI(){
//访问的是全局变量
alert("i = " + i);
}
accessI();//i = 100
- 局部变量
- 在函数体中声明的变量, 包括一个函数的形参都属于局部变量
- 局部变量的声明周期是: 函数开始执行时局部变量的内存空间开辟, 函数执行结束之后, 局部变量的内存释放
- 局部变量生命周期较短
- 局部变量和全局变量重名时, 是就近原则
//全局变量
var name = "嘿咻";
function username(){
//局部变量
var name = "阿根";
//就近原则:访问局部变量
alert("name = " + name);//name = 阿根
}
//调用函数
username();
//访问全局变量
alert("name = " + name);//name = 嘿咻
- 奇怪的语法
当一个变量声明的时候,不管是在哪里声明的,都是全局变量
function myfun(){
myName = "不知";
}
myfun();
alert("myName = " + myName );//myName = 不知
数据类型
-
虽然JS的变量在声明的时候不需要指定数据类型, 但是在赋值, 每一个数据还是有类型的
JS中数据类型有: 原始类型, 引用类型
原始类型: Undefined, Number, String, Boolean, Null
引用类型: Object, Object的子类
-
ES规范(ECMAScript规范), 在ES6之后, 又基于以上6种类型之外添加了一种新的类型: Symbol
-
JS中有一个运算符叫做typeof, 这个运算符可以在程序的运行阶段动态地获取变量的数据类型
typeof运算符的语法格式: typeof 变量名
typeof运算符的运算结果是以下6个字符串之一,注意字符串全部小写
"undefined", “number”, “string”, “boolean”, “object”, "function" -
在JS中比较字符串是否相等用**==**
- [例子] 要求a变量和b变量将来的数据类型必须是数字, 不能是其他类型
function sum(a,b){
if (typeof a == "number" && typeof b == "number"){
return a + b;
}
alert(a + "," + b + "必须都为数字");
}
//调用
var retVal1 = sum(false, "abc");
alert(retVal1);//false,abc必须都为数字(函数内的alert) undefined(alert(retVal1))
var retVal2 = sum(1, 2);
alert(retVal2);//3
- typeof
var i;
alert(typeof i);//"undefined"
var k = 10;
alert(typeof k);//"number"
var f = "abc";
alert(typeof f);//"string"
var d = null;
alert(typeof d);//"object"
var flag = false;
alert(typeof flag);//"boolean"
var obj = new Object();
alert(typeof obj);//"object"
fun = function () {}
alert(typeof fun);//"function"
Undefined
- Undefined类型只有一个值, 这个值就是undefined
- 当一个变量没有手动赋值, 系统默认赋值undefined
- 或者也可以给一个变量手动赋值undefined
var i;//没有赋值
var k = undefined;//赋值undefined
var y = "undefined";//字符串
alert(i == k)//true
alert(i == y)//false
Number
- Number类型包括哪些值?
整数, 小数, 整数, 负数, 不是数字(NaN), 无穷大(Infinity)
var v1 = 1;
var v2 = 3.14;
var v3 = -100;
var v4 = NaN;//不是数字
var v5 = Infinity;//无穷大
alert(typeof v1);//"number"
alert(typeof v2);//"number"
alert(typeof v3);//"number"
alert(typeof v4);//"number"
alert(typeof v5);//"number"
- NaN
- 表示Not a Number, 不是一个数字, 但属于Number类型
- 运算结果本来应该是一个数字, 最后算完不是一个数字的时候, 结果是NaN. (加法: 如果加号一边为字符串, 则结果是字符串)
var a = 100;
var b = "嘿嘿";
alert(a/b);//NaN
- Infinity (无穷大)
当除数为0时, 规定结果为无穷大
var a = 100;
var b = 0;
alert(a/b);//Infinity
- 在JS中10/3不取整
alert(10/3);//3.3333333333333335
- isNaN
判断是不是不是一个数字. 哈哈哈绕蒙圈了. 判断是否 isn’t a number
function sum(a,b){
if (isNaN(a) || isNaN(b)){
alert("参与运算的必须是数字");
return;
}
return a + b;
}
alert(sum(1,3));//4
sum(2,"嘿嘿");//参与运算的必须是数字
- parseInt()函数
可以将字符串自动转换成数字,并且取整数位
alert(parseInt("3.99"));//3
alert(parseInt(3.99));//3
- parseFloat()函数
可以将字符串自动转换成数字
alert(parseFloat("3.2") + 1);//4.2
- Math.ceil()函数
Math是数学类,数学类当中有一个函数叫做ceil(),作用是向上取整
alert(Math.ceil(2.1));//3
Boolean
- JS中的布尔类型永远都只有两个值: true和false
- Null类型只有一个值: null, 但是
alert(typeof null); //object
- Boolean()函数
将非布尔类型转换为布尔类型
alert(Boolean(1));//true
alert(Boolean(-1));//true
alert(Boolean("abc"));//true
alert(Boolean(Infinity));//true
alert(Boolean(0));//false
alert(Boolean(""));//false
alert(Boolean(null));//false
alert(Boolean(NaN));//false
alert(Boolean(undefined));//false
- 举个栗子
var name = "";
if (name){ //------->字符串自动转换成Boolean类型
alert("欢迎你"+name);
}else {
alert("姓名不能为空");
}
//结果为:姓名不能为空
String
- 在JS当中字符串可以使用单引号, 也可以使用双引号
- 无论是大String还是小String,他们的属性和函数是通用的
- 创建方式一
小string属于原始类型String
var s1 = "abc";
alert(typeof s1);//string
- 创建方式二
大String属于Object
String是一个内置的类, 可以直接用, String的父类是Object
var s2 = new String("abc");
alert(typeof s2);//object
Object (创建类)
Object类型是所有类型的超类, 自定义的任何类型, 默认继承Object
定义类, new类的方式
- 第一种
function 类名(形参){
}
…太像函数了, 不是像, 简直就是一模一样, 所有可以假装当成函数调用一下
先一个函数栗子来搞搞
function Student(){
alert("Student");
}
//当作普通函数调用
Student();//Student
//当作类来创建对象
var stu = new Student();//Student
alert(stu);//[object Object]
这次是正经栗子
function User(a, b, c){
//声明属性(this表示当前对象)
//User类中有三个属性:sno/sname/sage
this.sno = a;
this.sname = b;
this.sage = c;
}
//创建对象
var u1 = new User(111, "张三", 30);//不允许以0打头的number数字,类似001
//搞属性
alert(u1.sno);//111
alert(u1.sname);//张三
alert(u1.sage);//30
//或者这样子搞属性
alert(u1["sno"]);//111
alert(u1["sname"]);//张三
alert(u1["sage"]);//30
- 第二种
类名 = function(形参){
}
Emp = function (ename, sal){
this.ename = ename;
this.sal = sal;
}
var e1 = new Emp("SMITH", 800);
alert(e1["ename"] + "," +e1["sal"]);
扩展属性prototype
- 给自定义类扩展
先定义一个类, 类中有一个方法, 并调用
Product = function (pno, pname, price){
//属性
this.pno = pno;
this.pname = pname;
this.price = price;
//函数
this.getPrice = function (){
return this.price;
}
}
var pro = new Product(111, "西西", 4.0);
var pri = pro.getPrice();//不要写成var pri = pro.getPrice;少带了括号
alert("单价" + pri + "元/斤");//单价function ()return this.price;}元/斤
可以通过prototype这个属性来给类动态扩展属性以及属性
Product.prototype.getPname = function (){
return this.pname;
}
//调用后期扩展的getPname()函数
var pname = pro.getPname();
alert(pname)
- 给String扩展一个函数
String.prototype.suiyi = function (){
alert("这是给String类型扩展的一个函数,叫做随意")
}
"abc".suiyi();//这是给String类型扩展的一个函数,叫做随意
NullNaNUndefined的区别
- 数据类型不一致
alert(typeof null);//object
alert(typeof NaN);//number
alert(typeof undefined);//undefined
- 比较
alert(null == NaN);//false
alert(null == undefined);//true
alert(NaN == undefined);//false
- ==等同运算符, ===全等运算符 (比较值, 比较数据类型)
alert(null === NaN);//false
alert(null === undefined);//false
alert(NaN === undefined);//false
alert(1 == true);//true
alert(1 == true);//false