1.javascript简介
* 基于对象和事件驱动的语言,应用于客户端。
-基于对象:
**提供好了很多的对象,可以直接拿过来使用
-事件驱动:
**html做网站静态效果,javascript动态效果
-客户端:专门指的就是浏览器
*js的特点
(1)交互性
-信息的动态交互
(2)安全性
-js不能访问本地磁盘的文件
(3)跨平台性
-java里面的跨平台性,虚拟机
-只要能够支持js的浏览器,都可以运行
*javascript和java的区别(雷锋和雷峰塔)
(1)java是sun公司,现在oracle;js是网景公司
(2)javascript是基于对象,java是面向对象
(3)java是强类型的语言,js是弱类型的语言
-比如java里面 int i = "10"
-js: var i = 10; var m = "10";
(4)javascript只需要解析就可以执行,而java需要编译成字节码文件再执行。
*javascript的组成(下面js)
三部分组成、
(1)ECMAScript
-ECMA:欧洲计算机协会
-有ECMA组织制定的js语法,语句
(2)BOM
-browser object model:浏览器对象模型
(3)DOM
-document object model:文档对象模型
2.js和html的结合方式(两种)
第一种:
-使用一个标签<script type="text/javascript">js代码</script>
第二种:
-使用script标签,引入一个外部的js的文件
***创建一个js文件,写js代码
- <script type="text/javascript" src="1.js"></script>
***使用第二种方式的时候:就不要再script标签里面写js代码了,不会执行。
3.js的原始类型和声明变量
**java的基本数据类型 byte short int long float double char boolean
**定义变量 都使用关键字 var
**js的原始类型(五个)
-string:字符串
var str = "abc"
-number:数字类型
var m = "123"
-boolean:true和false
var flag = true;
-null
***var date = new Date();
***表示获取一个对象的引用,null表示对象引用为空,所有对象的引用也是object
-undifined
***定义一个变量,没有赋值
***var aa;
**typeof();查看当前变量的数据类型
4.js的语句
-java里面的语句
**if判断
**switch语句
**循环 for while do-while
-js里面的这些语句
**if判断语句
**** =:表示赋值
**** ==:表示判断
**switch语句
-java里面支持数据类型 string支持么?再jdk1.7开始支持
-js里面都支持
-switch(a){
case 5:
break;
case 6:
break;
default:
.....
}
**循环语句 for while do-while
-while
var i = 5;
while(i>1){
alert(i);
i--;
}
-for循环
for(var i = 0;i<=10;i++){}
**i++ ++i和java里面一样
5.js的运算符
** += : x+=y ;==>x=x+y;
** js里面不区分整数和小数
var j = 123;
alert(j/1000*1000); // j/1000*1000 在java里面是0 在js里面是123
//在js里面是不区分整数和小数,123/100=0.123 *1000 = 123
** 字符串的相加和相减的操作
**如果相加的时候,做的是字符串连接’
**如果相减,做的是相减的运算
*//字符串的操作
var str = "456";
//alert(str+1); //在java里面操作的结果是4561,在js里面还是4561
alert(str-1); //相减的时候,执行减法运算
*提示NaN表示不是一个数字
**boolean类型也可以操作
***如果设置成true,相当于这个值是1
***如果设置成false,相当于这个值是0
**==和===区别
**做判断
**==比较的只是值
**===比较的是值和类型
**引入知识
直接向页面输出的语句(可以把内容显示在页面上)
* document.write("aaa");
document.write("<hr/>");
**可以向页面输出变量,固定值和html代码
6.实现99乘法表(输出到页面上)
<script type="text/javascript">
document.write("<table border='1' boedercolor='blue'>");
for(var i = 1;i<=9;i++){
document.write("<tr>");
for(var j = 1;j<=i;j++){
document.write("<td>");
document.write(i+"*"+j+"="+i*j);
document.write("<td/>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
- document.write里面是双引号,如果设置标签的属性需要使用单引号
- document.write可以输出变量,可以输出html代码
7.js的数组
*什么是数组?
-使用变量:var m = 10;
-java里面的数组的定义 int[] arr = {1,2,3};
*js数组的定义方式(三种)
第一种:var arr = [1,"40",3,true];
第二种:使用内置对象 Array对象
var arr1 = new Array(5); //定义一个数组数组的长度是5
arr1[0] = "1";
第三种:使用内置对象 Array
var arr2 = new Array(3,4,5); //定义一个数组,数组里面的元素是 3 4 5
*数组里面有一个属性length:可以获取数组的长度
var arr3 = new Array(5);
alert("arr3的长度:"+arr3.length);
*数组里面可以存放不同的数据类型的数据
8.js的函数
**在java里面想要定义方法
public 返回类型 void/int 方法名称(参数列表){
方法体;
返回值;
}
public int add(int a,int b){
int sum = a+b;
return sum;
}
**在js里面定义函数(方法)有三种方式
*****函数的参数列表里面,不需要写var,直接写参数的名称
第一种方法:
******使用到一个关键字 function
******function 方法名(参数列表){
方法体;
返回值可有可无(根据实际需要)
}
******第一种方式
function test(){
alert("qqqq");
}
//调用方法
test();
//定义一个有参数的方法 实现两个数相加
function add1(a,b){
var sum = a+b;
alert(sum);
}
add1(2,3);
function add2(a,b,c){
var sum1 = a+b+c;
return sum1;
}
alert(add2(3,4,5));
******第二种方式:
****匿名函数
var add = function(参数列表){
方法体和返回值;
}
var add3 = function(m,n){
alert(m+n);
}
//调用方法
add3(5,6);
*******第三种方式:(用的少,了解)
***动态函数
***使用js里面的一个内置对象 Function
var add = new Function("参数列表","方法体和返回值");
//第三种方式创建函数
var canshu = "x,y";
var fangfati = "var sum;sum = x+y;return sum;";
//var add4 = new Function("x,y"," var sum;sum = x+y;return sum;");
var add4 = new Function(canshu,fangfati);
alert(add4(3,2));
9.js的全局变量和局部变量
**全局变量:在script标签里面定义一个变量,这个变量在页面中js部分都可以使用
-在方法外部使用,在方法内部使用,在另外一个script标签使用。
**局部变量:在方法内部定义一个变量,只能在方法内部使用
-如果在方法得外部调用这个变量,提示出错
Uncaught ReferenceError: nn is not defined
at 12-js得局部变量.html:16
**ie自带了一个调试工具,ie8及其以上得版本中,键盘上F12
10.script标签应该放在的位置
*建议把script标签放在</body>后面
*如果现在有这样一个需求:
在js里面需要获取到input里面的值,如果把script标签放在head里面会出现问题。
html解析是从上到下解析的,script标签放到的是head里面的,直接放在里面取input里面的值,以为页面还没有解析到input那一行,肯定取不到。
11.js的重载
*什么是重载?方法名相同,参数列表不同
--java里面有重载,肯定有
*js里面是否有重载?
12.今天内容的重载
*css
**css和html的四种结合方式
**css的基本选择器
*标签选择器 div{css代码}
*class选择器 .名称{}
*id选择器 #名称{}
**css的扩展选择器
*关联选择器
***嵌套标签的样式的设置
*组合选择器
***不同标签设置的样式
*伪元素选择器
**a标签的状态
lv ha link visited hover active
**盒子模型
*边框 border
上下左右
*内边距 padding
上下左右
*外边距 margin
上下左右
**漂浮
float:left right
**定位
position:absolute relative
*javascript
**什么是javascript
-基于对象和事件驱动的语言,应用于客户端。
-特点:
交互性 安全性 跨平台性
-javascript和java的区别
-组成(3部分)
*ECMAScript
*bom
*dom
**js和html的结合方式(两种)
第一种<script type="text/javascript"></script>
第二种<script type="text/javascript" src="js的路径"></script>
**js的数据类型
*五种原始类型
string number boolean null undifined
*定义变量使用 var
**js的语句
*if
*switch
*for while do-while
**js的运算符
*字符串的操作
***字符串相加:连接
***字符串相减:执行相减运算
*boolean类型相加
true:1
false:0
*==和===的区别
** ==:判断值
** ===:判断值和类型
**js的数组
三种定义方式
** var arr = {1,2,"3"};
** var arr1 = new Array(9); //长度9
** var arr2 = new Array(1,2,3); //元素是1,2,3
**属性 length:数组的长度
**js的函数
***function add(a,b){方法体和返回值;}
***var add1 = function(m,n){方法体和返回值;}
***var add2 = new Function("a,b","方法体和返回值");
****不要忘记调用,不然不起作用
**js的全局变量和局部变量
**全局变量:在页面中任何的js的部分,都可以使用
**局部变量:在方法内部定义一个变量,这个变量只能在方法内部使用
**script标签的位置
**建议放在</body>后面
**js的重载
* 基于对象和事件驱动的语言,应用于客户端。
-基于对象:
**提供好了很多的对象,可以直接拿过来使用
-事件驱动:
**html做网站静态效果,javascript动态效果
-客户端:专门指的就是浏览器
*js的特点
(1)交互性
-信息的动态交互
(2)安全性
-js不能访问本地磁盘的文件
(3)跨平台性
-java里面的跨平台性,虚拟机
-只要能够支持js的浏览器,都可以运行
*javascript和java的区别(雷锋和雷峰塔)
(1)java是sun公司,现在oracle;js是网景公司
(2)javascript是基于对象,java是面向对象
(3)java是强类型的语言,js是弱类型的语言
-比如java里面 int i = "10"
-js: var i = 10; var m = "10";
(4)javascript只需要解析就可以执行,而java需要编译成字节码文件再执行。
*javascript的组成(下面js)
三部分组成、
(1)ECMAScript
-ECMA:欧洲计算机协会
-有ECMA组织制定的js语法,语句
(2)BOM
-browser object model:浏览器对象模型
(3)DOM
-document object model:文档对象模型
2.js和html的结合方式(两种)
第一种:
-使用一个标签<script type="text/javascript">js代码</script>
第二种:
-使用script标签,引入一个外部的js的文件
***创建一个js文件,写js代码
- <script type="text/javascript" src="1.js"></script>
***使用第二种方式的时候:就不要再script标签里面写js代码了,不会执行。
3.js的原始类型和声明变量
**java的基本数据类型 byte short int long float double char boolean
**定义变量 都使用关键字 var
**js的原始类型(五个)
-string:字符串
var str = "abc"
-number:数字类型
var m = "123"
-boolean:true和false
var flag = true;
-null
***var date = new Date();
***表示获取一个对象的引用,null表示对象引用为空,所有对象的引用也是object
-undifined
***定义一个变量,没有赋值
***var aa;
**typeof();查看当前变量的数据类型
4.js的语句
-java里面的语句
**if判断
**switch语句
**循环 for while do-while
-js里面的这些语句
**if判断语句
**** =:表示赋值
**** ==:表示判断
**switch语句
-java里面支持数据类型 string支持么?再jdk1.7开始支持
-js里面都支持
-switch(a){
case 5:
break;
case 6:
break;
default:
.....
}
**循环语句 for while do-while
-while
var i = 5;
while(i>1){
alert(i);
i--;
}
-for循环
for(var i = 0;i<=10;i++){}
**i++ ++i和java里面一样
5.js的运算符
** += : x+=y ;==>x=x+y;
** js里面不区分整数和小数
var j = 123;
alert(j/1000*1000); // j/1000*1000 在java里面是0 在js里面是123
//在js里面是不区分整数和小数,123/100=0.123 *1000 = 123
** 字符串的相加和相减的操作
**如果相加的时候,做的是字符串连接’
**如果相减,做的是相减的运算
*//字符串的操作
var str = "456";
//alert(str+1); //在java里面操作的结果是4561,在js里面还是4561
alert(str-1); //相减的时候,执行减法运算
*提示NaN表示不是一个数字
**boolean类型也可以操作
***如果设置成true,相当于这个值是1
***如果设置成false,相当于这个值是0
**==和===区别
**做判断
**==比较的只是值
**===比较的是值和类型
**引入知识
直接向页面输出的语句(可以把内容显示在页面上)
* document.write("aaa");
document.write("<hr/>");
**可以向页面输出变量,固定值和html代码
6.实现99乘法表(输出到页面上)
<script type="text/javascript">
document.write("<table border='1' boedercolor='blue'>");
for(var i = 1;i<=9;i++){
document.write("<tr>");
for(var j = 1;j<=i;j++){
document.write("<td>");
document.write(i+"*"+j+"="+i*j);
document.write("<td/>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
- document.write里面是双引号,如果设置标签的属性需要使用单引号
- document.write可以输出变量,可以输出html代码
7.js的数组
*什么是数组?
-使用变量:var m = 10;
-java里面的数组的定义 int[] arr = {1,2,3};
*js数组的定义方式(三种)
第一种:var arr = [1,"40",3,true];
第二种:使用内置对象 Array对象
var arr1 = new Array(5); //定义一个数组数组的长度是5
arr1[0] = "1";
第三种:使用内置对象 Array
var arr2 = new Array(3,4,5); //定义一个数组,数组里面的元素是 3 4 5
*数组里面有一个属性length:可以获取数组的长度
var arr3 = new Array(5);
alert("arr3的长度:"+arr3.length);
*数组里面可以存放不同的数据类型的数据
8.js的函数
**在java里面想要定义方法
public 返回类型 void/int 方法名称(参数列表){
方法体;
返回值;
}
public int add(int a,int b){
int sum = a+b;
return sum;
}
**在js里面定义函数(方法)有三种方式
*****函数的参数列表里面,不需要写var,直接写参数的名称
第一种方法:
******使用到一个关键字 function
******function 方法名(参数列表){
方法体;
返回值可有可无(根据实际需要)
}
******第一种方式
function test(){
alert("qqqq");
}
//调用方法
test();
//定义一个有参数的方法 实现两个数相加
function add1(a,b){
var sum = a+b;
alert(sum);
}
add1(2,3);
function add2(a,b,c){
var sum1 = a+b+c;
return sum1;
}
alert(add2(3,4,5));
******第二种方式:
****匿名函数
var add = function(参数列表){
方法体和返回值;
}
var add3 = function(m,n){
alert(m+n);
}
//调用方法
add3(5,6);
*******第三种方式:(用的少,了解)
***动态函数
***使用js里面的一个内置对象 Function
var add = new Function("参数列表","方法体和返回值");
//第三种方式创建函数
var canshu = "x,y";
var fangfati = "var sum;sum = x+y;return sum;";
//var add4 = new Function("x,y"," var sum;sum = x+y;return sum;");
var add4 = new Function(canshu,fangfati);
alert(add4(3,2));
9.js的全局变量和局部变量
**全局变量:在script标签里面定义一个变量,这个变量在页面中js部分都可以使用
-在方法外部使用,在方法内部使用,在另外一个script标签使用。
**局部变量:在方法内部定义一个变量,只能在方法内部使用
-如果在方法得外部调用这个变量,提示出错
Uncaught ReferenceError: nn is not defined
at 12-js得局部变量.html:16
**ie自带了一个调试工具,ie8及其以上得版本中,键盘上F12
10.script标签应该放在的位置
*建议把script标签放在</body>后面
*如果现在有这样一个需求:
在js里面需要获取到input里面的值,如果把script标签放在head里面会出现问题。
html解析是从上到下解析的,script标签放到的是head里面的,直接放在里面取input里面的值,以为页面还没有解析到input那一行,肯定取不到。
11.js的重载
*什么是重载?方法名相同,参数列表不同
--java里面有重载,肯定有
*js里面是否有重载?
12.今天内容的重载
*css
**css和html的四种结合方式
**css的基本选择器
*标签选择器 div{css代码}
*class选择器 .名称{}
*id选择器 #名称{}
**css的扩展选择器
*关联选择器
***嵌套标签的样式的设置
*组合选择器
***不同标签设置的样式
*伪元素选择器
**a标签的状态
lv ha link visited hover active
**盒子模型
*边框 border
上下左右
*内边距 padding
上下左右
*外边距 margin
上下左右
**漂浮
float:left right
**定位
position:absolute relative
*javascript
**什么是javascript
-基于对象和事件驱动的语言,应用于客户端。
-特点:
交互性 安全性 跨平台性
-javascript和java的区别
-组成(3部分)
*ECMAScript
*bom
*dom
**js和html的结合方式(两种)
第一种<script type="text/javascript"></script>
第二种<script type="text/javascript" src="js的路径"></script>
**js的数据类型
*五种原始类型
string number boolean null undifined
*定义变量使用 var
**js的语句
*if
*switch
*for while do-while
**js的运算符
*字符串的操作
***字符串相加:连接
***字符串相减:执行相减运算
*boolean类型相加
true:1
false:0
*==和===的区别
** ==:判断值
** ===:判断值和类型
**js的数组
三种定义方式
** var arr = {1,2,"3"};
** var arr1 = new Array(9); //长度9
** var arr2 = new Array(1,2,3); //元素是1,2,3
**属性 length:数组的长度
**js的函数
***function add(a,b){方法体和返回值;}
***var add1 = function(m,n){方法体和返回值;}
***var add2 = new Function("a,b","方法体和返回值");
****不要忘记调用,不然不起作用
**js的全局变量和局部变量
**全局变量:在页面中任何的js的部分,都可以使用
**局部变量:在方法内部定义一个变量,这个变量只能在方法内部使用
**script标签的位置
**建议放在</body>后面
**js的重载