定义:基于事件和对象驱动,并具有安全性能的脚本语言
Javascript文件在客户端运行。
浏览器(客户端)的主要组件中包括渲染引擎和JS解释器等。
渲染引擎 - 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来。
JS解释器 - 用来解释执行JS代码。
引入:
|---内嵌:<script type=”text/javascript”>具体js代码</script>
|---外部:<script type=”text/javascript” src=”js文件”></script>
注意:代码大小写敏感:例如:A与a是两个不同的东东
注释:// 单行注释
/*多行注释*/
js的输出语法
|---弹窗式:alert()
alert(123)
|---控制台输出:;一般作为调试输出语句
console.log()
|---prompt() 方法用于显示可提示用户进行输入的对话框
prompt(222)
document.write() 在html文档中打印出来
变量:其值可以发生改变的量就是变量。
变量是用于存储信息的"容器"
|---命名:var 变量名 =
|---命名规范:js里边:字母、数字、下划线、$符号 等4个组成部分,数字不能作为名字的开始内容。
驼峰法命名
数据类型:
|---javascript(6种): number(int/float) string boolean undefined object(数组是对象的一部分)
null类型:空对象类型。可以理解为对象的占位符,初始化时,给它赋值null
undefined未定义类型
object对象类型:window document 数组
typeOf():输出变量的类型
|--- var name = “”; //声明一个变量,后期要使用一个“字符串”进行赋值
var age = 0; //声明一个变量,后期要使用一个“数字”进行赋值
var obj = null; //声明一个变量,后期要使用一个“对象”进行赋值
|---数据类型的相互转换:
a:转数字:
1)Number转换:
代码:
?
1
2
3
var a = “123”;
a = Number(a);
注意:
a) 如果转换的内容本身就是一个数值类型的字符串,那么将来在转换的时候会返回自己。
b) 如果转换的内容本身不是一个数值类型的字符串,那么在转换的时候结果是NaN.
c) 如果要转换的内容是空的字符串,那以转换的结果是0.
d) 如果是其它的字符,那么将来在转换的时候结果是NaN.
2)parseInt():
代码:
var a = “123”; a = parseInt(a);
a) 忽略字符串前面的空格,直至找到第一个非空字符,还会将数字后面的非数字的字符串去掉。
b) 如果第一个字符不是数字符号或者负号,返回NaN
c) 会将小数取整。(向下取整)
3)parseFloat();//浮点数(小数)
与parseInt一样,唯一区别是parseFloat可以保留小数。
b.转字符串
可以将其它的数据类型转成字符串。
1)String():
代码:
?
1
2
3
var a = 123;
a = String(a);
2)toString()的方法来进行转换(包装类)。
代码:
?
1
2
3
var a = 123; a = a.toString();
undefined,null不能用toString。
数学函数
|---定义:执行普通的算数任务。
|---随机数:Math.random();:random() 方法可返回介于 0 ~ 1 之间的一个随机数。
|---最大数:Math.max(5,4,8,10);:返回指定的数中带有较大的值的那个数
|---最小数:Math.min(5,2,4,5,10):返回指定的数中带有较大的值的那个数
|---圆周率:Math.PI
日期时间函数
|---获取当前时间:var myDate = new Date();//获取系统当前时间
|---获取年月日:1 myDate.getYear(); //获取当前年份-1900的值(2位)
2 myDate.getFullYear(); //获取完整的年份(4位,1970-????)
3 myDate.getMonth(); //获取当前月份(0-11,0代表1月)
4 myDate.getDate(); //获取当前日(1-31)
5 myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
6 myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
7 myDate.getHours(); //获取当前小时数(0-23)
8 myDate.getMinutes(); //获取当前分钟数(0-59)
9 myDate.getSeconds(); //获取当前秒数(0-59)
10 myDate.getMilliseconds(); //获取当前毫秒数(0-999)
11 myDate.toLocaleDateString(); //获取当前日期
12 var mytime=myDate.toLocaleTimeString(); //获取当前时间
13 myDate.toLocaleString( ); //获取日期与时间
=========================================================================================================================================
运算符
|---算术运算符
|-----运算符
|------- + :1数字求和
2字符串的拼接
3将数值转换成字符串 数值+空字符串
|------- - 1数字减法
2对数字取相反数
3将字符串转换成数值 数字型字符串-数值
|------- * 乘
|------- / 除
|------- % 取余数
|-----复合赋值运算符
|---自增与自减
|-----功能
|------ ++ 对运算数进行递增操作
|------ -- 对运算数进行递减操作
|-----位置
|------在运算数之前,先递增或递减,再赋值:
var i = 1; var a = i++; //a = 1; 此时i为2,但赋给a的是1 var b = ++i; //b = 3
|------在运算数之后,先赋值,再递增或递减
|---关系运算符
|-----大小关系检测
|------> >= < <=:满足返回true,不满足返回false
|------等值关系检测
|-------- == !=:判断返回值是否相等或者不等
|-------- === !==:判断返回值及返回类型是否相等或者不等
var aa = 10; var bb = "10"; alert(aa === bb);
|---逻辑运算符
|-----逻辑非 ! not
|-----逻辑与 && and
|-----逻辑 或 || or
var x = 10; var y = 20; alert(!(x==y)); alert(x<15 && y>15);alert(x==10|| y==10);
|---三元运算符:var max = a>b?a:b;
=========================================================================================================================================
流程语句
|---选择语句
|----if
|-----语法
if(条件1){ 代码1 }else if(条件2){ 代码2 }else{ 代码3 }
|-----流程
|-----特性:可处理复杂的逻辑关系
|----switch
|-----语法
switch(条件表达式){ case 标签1: 代码1; break; case 标签2: 代码2; break; }
|-------流程:1判断条件表达式中的值
2与标签做比对
|-------特性:处理简单的逻辑
|---------例子
switch(1==1){ case true: alert(111) break; case false: alert(222) break; } var aa = prompt("请输入姓名"); switch(aa){ case "zhangsan": alert(111) break; case "lisi": alert(222) break; }
|---循环语句
|-----while
|-------语法
while(条件表达式){ 循环执行的代码 }
|-------流程:
1判断条件表达式的值
2当值为true时 循环执行代码
3当值为false时 退出循环
|-------特性
1先检查条件,再执行循环
2条件不满足则循环一次也不执行
|-------时机:一个动作被重复执行到满足某个条件时
|-----do-while
|-------语法
do{ 循环执行的代码 }while(条件表达式);
|-------流程
1先执行循环体内代码 再进行判断
2如果表达式为true 则重复执行代码
3如果表达式为false 退出循环
|-------特性
1先执行循环体,再进行条件判断
2循环体内代码至少执行一次
|-------时机:希望一个动作至少被执行一次
|-----for
|-------语法
for(定义循环变量的初始值;循环条件;递增递减计数器){ 循环的代码 }
|-------流程
1循环变量初始值与循环条件做比较,确定返回值
2返回true时 执行循环体
3执行完一次循环体后进行递增或递减运算
4将运算结果与循环条件做比较
5返回true 再执行循环体
返回false 退出循环
|-------时机:重复一个动作到一定次数时
|-----跳转语句
|-------break:终止整个循环,不再进行判断
|-------continue:终止本次循环,接着去判断是否执行下次循环
===========================================================================================================================================
|---数组中对数组的内置操作函数
|---js的入口函数:
window.onload=function(){ }
|---函数
|-----定义:有一定功能代码体的集合:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
|---基本结构
function functionname() { 执行代码 }
|---分类
|-----基础函数:
function hanshu () { alert("这是我第一个函数"); } hanshu();//调用函数
|-----带有参数的函数
|------一个参数
function hanshu (a)// a是形参,形式参数 { alert(a); } hanshu("测试参b数");// 测试参数b是实参,实际参数*/ /*function sum(a,b) { alert(a+b); } sum(2,3);*///调用时,要给形参赋值
|------多个参数
/*function chengji(a,b,c,d,e) { alert(a*b*c*d*e); } chengji(1,2,3,4,5);*/
|-----带有返回值的函数
/*function sum(a,b) { return a+b; } sum(10,5);//程序执行完这句话,sum(10,5)变成了15; var c=sum(10,5); alert(c);*///c是15
|---变量的作用域
|-----全局变量
var carName = " Volvo"; // 此处可调用 carName 变量 function myFunction() { // 函数内可调用 carName 变量 }
|-----局部变量
// 此处可调用 carName 变量 function myFunction() { carName = "Volvo"; // 此处可调用 carName 变量 }
|---变量的生命周期:JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁
|---闭包:是指内部函数可以使用外部函数的变量
document.getElementById("demo").innerHTML = add(); function add() { var counter = 0; function plus() {counter += 1;} plus(); return counter; }