javascript基础
目录
一、概述
1、概念
2、作用
二、用法
1、html页面中的javascript
2、外部的javascript
3、标签中的javascript
4、javascript显示数据
5、javascirpt注释
三、javascript基本语法
1、javascript变量
2、javascript的语句
3、javascript数据类型
3.1 值类型
3.2 引用数据类型
3.3 javascript拥有动态类型
4、javascript中运算符
四、javascript对象
1、javascript的string对象
1.1 String对象属性
1.2 String对象方法
2、javascript的Array对象
2.1、声明数组
2.2、数组的长度length
2.3、Array对象的方法
3、javascript的date对象
3.1、创建日期对象
3.2、日期对象的常用方法
4、javascript的Math对象
4.1、常用属性
4.2、常用方法
五、javacript函数
1、常用全局函数
1.1 isNaN(param)
1.2 parseFloat(String)
1.3 parseInt(string,radix)
2、自定义函数
2.1 语法
2.2 自定义函数实例
3、匿名函数
六、javascript变量作用域
1、局部javascript变量
2、全局javascript变量
3、变量的声明周期
七、javascript自定义对象
1、定义对象
2、对象属性
3、访问对象的属性
4、访问对象的方法
八、javascript window 浏览器对象模型
1、window对象
2、window对象的属性
3、history对象
4、location对象
5、window对象方法
6、案例
6.1 打开和关闭浏览器
6.2 弹框
6.3 定时器
九、javascript事件
1、html事件
2、常用html事件
一、概述
1、概念
javascript是脚本语言，是一种解释性脚本语言（代码不进行预编译）。
javascript是一种轻量级编程语言。
javascript是可插入html页面的编程语言。
javascript插入html页面后可由所有的现代浏览器执行。
javascript很容易入门。
2、作用
1、为网页添加各种各样的动态功能。
2、为用户提供更流畅美观的浏览效果。
通常javascript脚本是通过嵌入在html中来实现自身功能的。
二、用法
1、html页面中的javascript
html页面中的脚本必须位于script围堵标签之间，script标签放到head标签可以，body也可以，放到最后也可以，对位置要求不严格。
我们可以在html这种放入不限数量的script标签，通常的做法是把内容统一放入head或者页面底部。这样可以把它们安置到同一位置，不干扰页面内容。
PS：有些案例中会出现type="text/javascript"。现在可以完全忽略，javascript已经是现代浏览器以及html5的默认脚本语言。
javascript用法
2、外部的javascript
可以把脚本保存在外部文件中。外部文件通常包含被多个网页使用的代码。外部的javasript文件的扩展名是.js。
当我们使用外部文件时，在html页面的script标签的src属性中设置该.js文件。
myScript.js
function fun1(){ alert("hello javascript"); }html页面：
ps：外部脚本不能包含script标签。
3、标签中的javascript
直接写在HTML标签中的一些属性，用于简单的javascript代码编写，用的较少。
登录4、javascript显示数据
4.1 windows.alert()弹出框
这里的windows可以省略，等价于alert('hello world');
4.2 document.write()将内容写入到html文档
4.3 使用innerHTML写入到html元素
4.4 使用console.log写入到浏览器控制台
js显示数据的方式
div1
5、javascirpt注释
javascript注释与java的单行多行注释相同。
单行注释以//开始，
多行注释以/*开始，*/结束。
三、javascript基本语法
javascript是一个脚本语言，它是一个轻量级但功能强大的编程语言。
javascript与java语言相似，但也有不同。javascript是弱语言类型，即有时候有些错误不影响运行，但是我们还是需要按照标准语法来书写，语言可以弱，程序员不能弱。
1、javascript变量
语法：var 变量名称
var myCompany; //声明变量
myCompany="开课吧"; //为变量赋值
var x=5;//声明变量同时赋值
var y=6;
var z=x+y;//变量可以存储表达式变量的命名规则：
- 变量必须以字母开头
- 变量也可以以$或者_开头
- 变量名称对大小写敏感(y和Y是不同的变量)
- 不能使用关键保留字
变量的命名规范：
- 见名知义。例如：breadPrice、userService，避免无意义的a,b,c
- 推荐小驼峰命名法，即第一个单词首字母小写，以后的每个单词首字母大写。例如：lastName
2、javascript的语句
javascript语句向浏览器发出指令，告诉浏览器应该做什么。
javascript是脚本语言，浏览器在执行javascript语句时候逐行读取，传统的语言在执行前会对所有代码进行编译。
javascript也存在分支和循环语句，与java语言类似。
3、javascript数据类型
3.1 值类型
字符串String
字符串类型存储字符类型数据，字符串可以是引号中的任意文本，必须使用单引号或者双引号。
var gameName="英雄联盟";
var hairstylist='tony';
//PS:注意引号嵌套
var message1='我的发型师是"tony"老师';
var message2="我的发型师是'tony'老师";数字number
javascript只有一种数字类型，可以带有小数也可以不带小数。
var breadPrice=15.9;
var gameLevel=66;
//极大或者极小的数字可以通过科学计数法来书写
var myMoney1=666e5; //6600000
var myMoney2=666e-5布尔值boolean
只有两个值：true或者false
var isUnderstand=true;
var isSingle=false;空值Null
var email=null;未定义Undefined
表明变量不含有值，可以通过将变量值设为null来清空变量。
有四种情况会出现Undefined值。
1、变量声明没有赋值
var obj;
alert(obj); //undefined2、获取对象中不存在的属性
var obj;
alert(obj.name); //报错信息：Uncaught TypeError:Can not read Property 'name' of undefined3、函数需要实参，但调用的时候没有传值，形参值为undefined
4、函数调用后没有返回值或者return后没有数据，接收函数返回值变量是undefined
3.2 引用数据类型
对象Object 数组Array 函数Function
3.3 javascript拥有动态类型
var param;
param=5;
param="John";
PS:虽然JavaScript支持这种写法，但是我不推荐这种写法。大家尽量开始声明变量的时候就确定好将要
盛放什么类型的值，以后尽量不随意改变。4、javascript中运算符
算术运算符：+、-、*、/ 、%、++、--
赋值运算符：=、+=、-=、*=、/=、%=
字符串连接符：+
逻辑运算符：&& 、|| 、 !
条件运算符：?:
比较运算符：==、!=、>、<、>=、<=
以上运算符与java中运算符一样，除此之外javascript新的运算符：
===：绝对相等，值和类型都相等
!==：不绝对相等，值和类型只要有一个不相等
var x=5;
var res=(x===5); //true
res=(x==='5'); //false
res=(x!==5);//false
res=(x!=='5');//true四、javascript对象
1、javascript的string对象
1.1 String对象属性
var str="我喜欢看NBA，最喜欢的球员是\'小学生\'库里";
//注意：字符串中出现的\'是一个字符串，转义为一个单引号
console.log(str);
//获取字符串的长度：切记，所有转移符号的长度都算一个，即\'长度为1
console.log("字符串的长度="+str.length);//1.2 String对象方法
javascript的对象方法与java的对象方法一样。
方法 / 描述
charAt()
返回在指定位置的字符。
charCodeAt()
返回在指定的位置的字符的 Unicode 编码。
concat()
连接两个或更多字符串，并返回新的字符串。
fromCharCode()
将 Unicode 编码转为字符。
indexOf()
返回某个指定的字符串值在字符串中首次出现的位置。
includes()
查找字符串中是否包含指定的子字符串。
lastIndexOf()
从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match()
查找找到一个或多个正则表达式的匹配。
repeat()
复制字符串指定次数，并将它们连接在一起返回。
replace()
在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。
search()
查找与正则表达式相匹配的值。
slice()
提取字符串的片断，并在新的字符串中返回被提取的部分。
split()
把字符串分割为字符串数组。
startsWith()
查看字符串是否以指定的子字符串开头。
substr()
从起始索引号提取字符串中指定数目的字符。
substring()
提取字符串中两个指定的索引号之间的字符。
toLowerCase()
把字符串转换为小写。
toUpperCase()
把字符串转换为大写。
trim()
去除字符串两边的空白
toLocaleLowerCase()
根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase()
根据本地主机的语言环境把字符串转换为大写。
valueOf()
返回某个字符串对象的原始值。
toString()
返回一个字符串。
2、javascript的Array对象
array对象用于在变量中存储多个值，即数组。
2.1、声明数组
var names=new Array();
names[0]="宝玉1";
names[1]="宝玉2";
names[2]="宝玉3";
names[3]="宝玉4";
//获取数组的长度：数组名称.length
for (var i=0;i2.2、数组的长度length
PS:注意length是数组的属性，不是方法。
var nameArr=["宝玉","黛玉","湘云"];
var len=nameArr.length; //获取数组的长度2.3、Array对象的方法
方法 / 描述
concat()
连接两个或更多的数组，并返回结果。
copyWithin()
从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries()
返回数组的可迭代对象。
every()
检测数值元素的每个元素是否都符合条件。
fill()
使用一个固定值来填充数组。
filter()
检测数值元素，并返回符合条件所有元素的数组。
find()
返回符合传入测试（函数）条件的数组元素。
findIndex()
返回符合传入测试（函数）条件的数组元素索引。
forEach()
数组每个元素都执行一次回调函数。
from()
通过给定的对象中创建一个数组。
includes()
判断一个数组是否包含一个指定的值。
indexOf()
搜索数组中的元素，并返回它所在的位置。
isArray()
判断对象是否为数组。
join()
把数组的所有元素放入一个字符串。
keys()
返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf()
搜索数组中的元素，并返回它最后出现的位置。
map()
通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()
删除数组的最后一个元素并返回删除的元素。
push()
向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()
将数组元素计算为一个值（从左到右）。
reduceRight()
将数组元素计算为一个值（从右到左）。
reverse()
反转数组的元素顺序。
shift()
删除并返回数组的第一个元素。
slice()
选取数组的一部分，并返回一个新数组。
some()
检测数组元素中是否有元素符合指定条件。
sort()
对数组的元素进行排序。
splice()
从数组中添加或删除元素。
toString()
把数组转换为字符串，并返回结果。
unshift()
向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()
返回数组对象的原始值。
3、javascript的date对象
3.1、创建日期对象
3.2、日期对象的常用方法
方法 / 描述
getDate()
从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()
从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()
从 Date 对象以四位数字返回年份。
getHours()
返回 Date 对象的小时 (0 ~ 23)。
getMinutes()
返回 Date 对象的分钟 (0 ~ 59)。
getMonth()
从 Date 对象返回月份 (0 ~ 11)。
getSeconds()
返回 Date 对象的秒数 (0 ~ 59)。
setDate()
设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()
设置 Date 对象中的年份（四位数字）。
setHours()
设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()
设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()
设置 Date 对象中的秒钟 (0 ~ 59)。
setMonth()
设置 Date 对象中月份 (0 ~ 11)。
4、javascript的Math对象
4.1、常用属性
var pi=Math.PI; //圆周率
E
返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2
返回 2 的自然对数（约等于0.693）。
LN10
返回 10 的自然对数（约等于2.302）。
LOG2E
返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。
LOG10E
返回以 10 为底的 e 的对数（约等于0.434）。
PI
返回圆周率（约等于3.14159）。
SQRT1_2
返回 2 的平方根的倒数（约等于 0.707）。
SQRT2
返回 2 的平方根（约等于 1.414）。
4.2、常用方法
var num=Math.random(); //返回0-1之间的随机数
var max=Math.max(12,34,-90,9); //返回n个数值中的最大值
var min=Math.min(12,34,-90,9); //返回n个数值中的最小值abs(x)
返回 x 的绝对值。
acos(x)
返回 x 的反余弦值。
asin(x)
返回 x 的反正弦值。
atan(x)
以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)
返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)
对数进行上舍入。
cos(x)
返回数的余弦。
exp(x)
返回 Ex 的指数。
flfloor(x)
对 x 进行下舍入。
log(x)
返回数的自然对数（底为e）。
max(x,y,z,...,n)
返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n)
返回 x,y,z,...,n中的最低值。
pow(x,y)
返回 x 的 y 次幂。
random()
返回 0 ~ 1 之间的随机数。
round(x)
四舍五入。
sin(x)
返回数的正弦。
sqrt(x)
返回数的平方根。
tan(x)
返回角的正切。
五、javacript函数
1、常用全局函数
javascript有一个常用全局属性NaN,即非数值(not a number),NaN属性用于引用特殊的非数字值，该属性指定的并不是不合法数字。
1.1 isNaN(param)
用于检查其参数是否是非数字值。
是数值返回false，不是返回true。
console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN('hello'));//true1.2 parseFloat(String)
可解析一个字符串，并返回一个浮点数。该函数指定字符串首个字符是否是数字，如果是则对字符串进行解析，直到达到数字的末端。然后以数字返回该字符串。
console.log(parseFloat('66'));//66
console.log(parseFloat('199.99'));//199.99
console.log(parseFloat('1024 2048 4096'));//1024
console.log(parseFloat(' 128 '));//128
console.log(parseFloat('10年'));//10
console.log(parseFloat('今天是8号'));//NaN- 字符串只返回第一个数字
- 开头和结尾的空格是允许的
- 如果字符串的第一个字符不能被转换为数字，那么parseFloa()t返回NaN。
1.3 parseInt(string,radix)
可解析一个字符串，并返回一个整数。
| 参数 |
描述 |
| string |
必选。要被解析的字符串 |
| radix |
可选。表示要解析的数字的基数，该值介于2~36之间。 |
当参数radix为0，或者没有设置该参数时，parseInt()会根据string来判断数字的基数。
当忽略参数radix时，javascript默认数字的基数如下：
- 如果string以'0x'开头，parseInt()会把string的其余部分解析为十六进制的整数。
- 如果string以'0'开头，那么ECMAScript v3允许 parseInt()的一个实现把其后的字符解析为八进制或者十六进制的数字。
- 如果string以1-9数字开头，parseInt()把它解析为十进制整数。
console.log(parseInt('66'));//66
console.log(parseInt('199.99'));//199
console.log(parseInt('1024 2048 4096'));//1024
console.log(parseInt(' 128 '));//128
console.log(parseInt('10年'));//10
console.log(parseInt('今天是8号'));//NaN
console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16- 只有字符串中第一个数字会被返回
- 开头和结尾的空格是被允许的
- 如果字符串的第一个字符不能被转换为数字，那么将会返回NaN
- 在字符串以"0" 开始时旧浏览器默认使用八进制基数，ECMAScript 5，默认是十进制基数。
2、自定义函数
2.1 语法
function 自定义函数名称(参数列表){
//函数体
}2.2 自定义函数实例
注意：1、函数的形参直接写参数名称，不需要声明类型，即不需要写var
2、函数的返回取决于函数体中是否有return关键字
//函数：类似java语言中的方法
//function 声明函数的关键字
//声明无参无返回值的函数
function print(){
document.write('helloWorld--function');
}
//声明有参数有返回值的函数
/**
* 参数：参数：直接写参数名称即可，不能有类型var
* 返回值：有return关键字，而且return后面有内容，则认为函数有返回值，否则没有返回值
*/
function getSum(a,b){
var he=a+b;
return he;
}
//调用函数-无参无返回值，直接函数名称()调用
print();
//调用函数-有参数有返回值,var 变量=函数名称(实际参数列表);
var res=getSum(1,2.3);
document.write("
结果是"+res+"
");3、匿名函数
//匿名函数
var fun=function(){
document.write("helloWorld--fun------------------
");
}
var fun2=function(a,b){
document.write(a+"--------fun2----------"+b+"
");
}
var fun3=function(a,b){
document.write(a+"----------fun3------------"+b+"
");
return a+b;
}
//调用匿名函数
fun();
fun2(1,3);
var result=fun3(10,10);
alert(result);六、javascript变量作用域
1、局部javascript变量
在javascript内部声明的变量(使用var )是局部变量，所以只能在函数内部访问。
在不同函数中可以声明相同名称的变量，因为局部变量出了该函数就失效了。
2、全局javascript变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
3、变量的声明周期
javascript变量的生命周期从它们被声明的时间开始
局部变量会在函数运行之后被删除，全局变量会在页面被关闭后删除。
七、javascript自定义对象
对象也是一个变量，但对象可以包含多个值(多个变量)。
1、定义对象
对象中可以有属性，也可以有方法。
//定义对象
var student={name:"宝玉",age:18,height:178.5}
//定义javascript 对象可以跨多行，空格跟换行不是必须的
var student2={
name:"宝玉",
age:18,
height:178.5,
study:function(){
alert("好好学习天天向上");
}
}2、对象属性
javascript是变量的容器。
但是，我们通常认为"javascript对象是键值对容器"。
键值对通常写法为 name:value(键与值以冒号分割)
键值对在javascript对象通常称为对象属性。
3、访问对象的属性
//访问对象的属性
//方式1：
var n=student.name;
//方式2：
var n2=student["name"];
alert(n+"---"+n2);4、访问对象的方法
//javascript对象可以跨域多行，空格跟换行不是必须的
var student2={
name:'宝玉',
age:18,
height:178.5,
study:function(){
alert('好好学习天天向上');
}
}
//访问对象的方法
student2.study();八、javascript window 浏览器对象模型
浏览器对象模型(BOM)使javascript有能力与浏览器"对话"。
BOM:Browser Object Model 中文浏览器对象模型
虽然现在BOM暂无正式标准，但是由于现代浏览器已经实现了javascript交互性方面的相同属性和方法，因此window常被认为是BOM的方法和属性。
1、window对象
所有的浏览器都支持window对象，它代表浏览器窗口。（没有应用于window对象的公开标准，不过所有浏览器都支持该对象）
所有javascript全局对象、函数及变量均自动成为window对象成员。
全局变量是window对象的属性，全局函数是window对象的方法。
window对象代表的是浏览器打开的窗口。
2、window对象的属性
常用属性/描述
document
对 Document 对象的只读引用。
history
对 History 对象的只读引用。
location
用于窗口或框架的 Location 对象。
name
设置或返回窗口的名称
3、history对象
window.history对象包含浏览器历史。
window.history对象在编写时可以不写window前缀。
常用方法：
前进
后退
前进
后退4、location对象
window.location对象用于获取当前页面地址(URL)，并把浏览器重定向到新页面。
常用属性和方法：
window.location 对象在编写时可以不使用window这个前缀。
href 当前窗口正在浏览的网页地址。
replace(url) 转向到url网页地址
reload() 重新载入当前网址，如同按下刷新按钮。
获取当前页面url
刷新
跳转到index
跳转到百度 5、window对象方法
常用方法/描述
alert()
显示带有一段消息和一个确认按钮的警告框。
confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()
显示可提示用户输入的对话框。
open()
打开一个新的浏览器窗口或查找一个已命名的窗口。
close()
关闭浏览器窗口。
setTimeout()
在指定的毫秒数后调用函数或计算表达式。
setInterval()
按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()
取消由 setInterval() 设置的 timeout。
clearTimeout()
取消由 setTimeout() 方法设置的 timeout。
6、案例
6.1 打开和关闭浏览器
打开百度
打开index
关闭当前页面6.2 弹框
6.3 定时器
div--显示时间1
停止定时器clearInterval
div--显示时间2
停止定时器clearTimeout
九、javascript事件
html事件是发生在html元素的事情。在html页面中使用javascript，javascript可以触发这些事件。
1、html事件
html事件可以是浏览器行为，也可以是用户行为。
例如：页面加载完成、点击按钮、文本框输入完成等等
通过当前事件发生时，我们希望可以做些事情。例如：点击按钮之后希望跳转页面、文本框输入完成之后进行验证等等，这些事件可以通过javascript对象实现。
2、常用html事件
事件/描述
onchange
HTML 元素改变
onclick
用户点击 HTML 元素
onmouseover
用户在一个HTML元素上移动鼠标
onmouseout
用户从一个HTML元素上移开鼠标
onkeydown
用户按下键盘按键
onload
浏览器已完成页面的加载
onfocus
元素获取焦点时触发
onblur
元素失去焦点时触发