JavaScript(行为层)
1、JavaScript介绍
JavaScript是一种轻量级的脚本语言,是一种用于客户端web开发的脚本语言。
2、JavaScript创建方式
JavaScript代码块可以嵌在任何地方,但一般放在<head>中。
(1)内嵌式
(2)外链式
(3)事件定义 (JS区分大小写)
嵌入在html标签的属性中,onclick点击事件
作为标签的属性出现,属性值就是JS代码。
3、JavaScript输出方式
(1)alert (window.alert) 警告 不识别标签
(2)document.write(123); 可以识别标签,内容写到了body里。
document也是window对象的属性,本身也是一个对象。
方法:方法名()
(3)console.log() 控制台日志,工作中调试常用。
alert()函数会阻断JavaScript程序的执行。
(4)console.error() 报错
(5)console.warn() 警告
(6)console.info() 信息级别
4、onclick ,当鼠标点击一下时执行一次
onmouseover ,当鼠标放上去时执行一次
onmouseout ,当鼠标移出去时执行一次
onmousedown ,当鼠标按下时执行一次
onmouseup ,当鼠标在上面松开(弹起)时执行一次
ondblclick ,当鼠标双击时执行一次
onload ,当对象加载完成时执行一次
5、JS中常用对话框
(1)警示对话框alert() window.alert() 无返回值
(2)确认对话框confirm() window.confirm() 有返回值,返回值是布尔型
(3)提示输入对话框prompt() window.prompt() 有返回值,返回值是输入框中的值(字符串),点击取消返回是null。
6、JS数据类型
基本数据类型
(1)字符串 string
(2)数字 number
(3)布尔 boolean
(4)null 一个“空”的字,可用来清空变量,表示对象为空。
(5)undefined 表示变量不含有值
复合数据类型
数组 对象
7、变量命名规则
(1)必须以字母、下划线或$开头。
(2)变量名区分大小写。
(3)不允许使用关键字和保留字做变量名。
如:break,default,else,void,int,double,public等等。
8、变量的声明
语法:var 变量名;
9、算数运算符 +-*/%
b=a++;先赋值再自增
b=++a;先自增再赋值
JS是弱数据类型的语言,如果数字与字符串相加,数字就会被同化为字符串;如果数字与字符串相减,乘,除,取余,字符串会被同化为数字,转化数字成功(字符串为由数字组成的字符串)直接做运算,失败显示NAN(not a number)。
10、检测数据类型
alert(typeof(sum));或者alert(typeof sum);
11、比较操作符
== 值相等 ===恒相等 值相等,类型也一样
!=不等 !==不恒等
12、逻辑运算符
&& || !
运算符的优先级
! > 算术运算符(+-*/%)> 关系运算符(>= <= == === !=)> && > ||(逻辑运算符)> 赋值运算符(=)
特殊例子:
0.1+0.2== 0.3 false
0.1+0.2=0.3000...4
13、a.tostring() 转化为字符串
a.tostring(2) 转化为对应的进制 该例子为转化为二进制
14、类型转换
(1)var bool = true;
alert(bool*1);//输出1 ,布尔值true转换成数字为1,事实上将其它值转换在数字最简单的方法就是将其乘以1
另一种方法:
转化为整型:var num =parseInt(prompt(“请输入一个数”));
转化为浮点型:var num =parseFloat(prompt(“请输入一个数”));
(2)bool = false;
alert(bool*1);//输出0
alert(bool+"");//输出"flase",将其它类型转换成字符串的最简单的方法就是将其写一个空字符串相连
(3)var str = "some string";
str ="";
alert(!!str);//输出false,只有空字符串转换成布尔值时会是false,非空字符串转换成布尔值都会返回true
(4)var num =0;
alert(!!num);//false
num=-123.345;
alert(!!num);//true,除0以外的任何数字转换成布尔值都会是true
//还有一个非常重要的是,空字符串转换成数字将会是0
alert(""*1);//输出0
15、分支与循环
<1>Javascript中的程序结构分为:
1.顺序结构:没有任何结构就是顺序,所有语句从上到下,逐条执行
顺序结构主要包括注释语句、赋值语句、输入输出等语句
2.分支结构
(1)单分支{}语句体
要么做,要么不做;如果if(条件)条件为true,那么执行if(){}所有语句,否则直接跳过if结构
(2)双分支或多分支
if…else if…elseif…else if…elseswitch
3.循环结构
for循环
while循环
do…while循环
for…in循环
<2>switch和多重if的异同
相同点:都可以实现多分支结构
不同点:
Switch:只能处理等值的条件判断,且条件是整型变量或字符变量的等值判断
多重if:处理在else部分还包含其它if结构,特别适合某个变量处于某个区间时的情况
<3>循环
while循环:先判断后执行 至少执行0次
do-while循环:先执行后判断 至少执行1次
for循环:先判断后执行
for(参数初始化;条件判断;更新循环变量){
循环体
}
执行顺序:<1>参数初始化<2>条件判断<3>循环体<4>更新循环变量
<4>跳转语句
1.break
可跳出循环执行循环外面的语句
2.continue
跳出本次循环 continue后面的语句不执行,执行下一次循环。
16、函数
(1)函数特点:封装代码,代码的重用性强。
(2)函数是为完成某一功能的程序指令(语句)的集合,是执行特定任务的语句块。
(3)分类:自定义函数,系统函数(内置函数,包括预定义函数)。
(4)全局函数包括:
1.eval()将字符串数字转换成数字,可进行直接执行js代码;
2.isNaN()用来计算一个参数以确定它是否为非数字;
不是数字返回true,是数字返回false。
3.parseInt()/parseFloat()将数字字符串强制转化为一个数值;
4.isFinite()用来确定参数是否是一个有限数值.也就是说,如果该参数为非数字NaN,正无穷数,或负无穷数,则返回false,否则返回true;如果是字符串类型的数字,将会自动关转化为数字型;
5.escape函数/unescape()将字符串进行编码和解码,这样就可以在所有的计算机上读取该字符串。
(5)函数定义
function 函数名(){
函数体;
}
函数名必须是唯一的!
(6)函数调用
1.函数名()在JS里写。
2.onclick=”函数名()”通过事件来触发调用函数
注意:如果局部变量不是先声明再赋值,就会默认为局部变量。
eg:var j = 5; 与 j = 5;的区别。
(7)作用域
1.全局作用域 2.局部作用域(函数作用域)
(8)DOM
(Document Object Model)文档对象模型
获取元素对象的方法:
document.getElementById(“id值”);
获取非form表单标签的内容:
元素对象.innerHTML; (能识别标签)
设置非form表单标签的内容:
元素对象.innerHTML=内容;
获取form表单里的值:
元素对象.value; (不能识别标签)
设置form表单里的值:
元素对象.value=值;
17、变量前置
所有变量会先设置为undefined,如果赋值才有值。
eg:var a=5,b=6;
if(a>b){var c =7;} 输出c是undefined