2014-08-04|1383阅|作者:jun|举报 摘要:JavaScript的诞生当初是为了解决页面的数据验证,随着网络的不断发展,现在的JavaScript可以做前后台的应程序。
但是仍然以前端为主。
CSS:
html使用标签主要来封装页面上的数据。html不在负责数据的样式,而把样式交给了CSS负责。
1、CSS和html的结合:
a、可以在标签中嵌入style属性,然后书写css代码
b、在head标签中使用
<style type="text/css">
写css代码
</style>
c、可以把CSS代码单独的封装到一个文件中,这个文件一般会是xxx.css
在页面上需要的地方使用@import url(目录);
d、在head标签中使用link标签导入外部的CSS文件
2、CSS中常用的样式:
字体样式
文本样式
边框样式
盒子模型
内边距 padding
外边据 margin
定位和布局
漂浮float
绝对定位 position
1、什么JavaScript
JavaScript的诞生当初是为了解决页面的数据验证,随着网络的不断发展,现在的JavaScript可以做前后台的应程序。
但是仍然以前端为主。
JavaScript称为前端的脚本语言。它不是专门用来前端开发的,只是在前端的数据基础上进行数据的验证。
2、Java和JavaScript的区别:
Java语言是完全面向对象的语言,开发者可以自己定义对象,并且去使用对象。
Java属于Oracle公司的产品。
JS是Netscape公司的产品,前身是LiveScript;Java是Sun公司的产品,现在是Oracle公司的产品。
JS是基于对象,Java是面向对象。
JS只需解释就可以执行,Java需要先编译成字节码文件,再执行。
JS是弱类型,Java是强类型。
Java是强类型:
在使用Java语言开发程序的时候,每个数据都必须明确具体的类型。
JS是弱类型:
在使用JS语言开发前端程序的时候,数据不用明确具体的存储空间类型。不管什么类型的数据都可以给通过一个空间中存放。
3、JS和html代码的结合:
要把JS代码引入到当前的页面中,需要使用标签<script>
可以在这个标签中书写JS代码。
<script type="text/javascript">
function _click(){
document.getElementById("one").value="";
}
</script>
当在页面上使用
<script type="text/javascript" src="js/func.js">
alert("上海");
</script>
引入一个外部的JS文件,那么在当前<script>中书写的js代码是不会被执行的。
同时不建议在其中书写代码。
======================================
JS的语法:
语言应该具备的基本语法规则:
注释:
关键字和标识符:
常量:
变量:
数据类型:
基本的运算:
语句:
函数:
数组:
1、注释:
js中的注释有两种:
单行注释: // 注释内容
多行注释: /* 注释内容 */
2、关键字:
关键字被这门语言赋予了特定含义的单词或者字母的组合。
var for while if break continue typeof
保留字:
3、标识符:
用户根据自己的需求定义一些字母或者单词等字符的组合。可以用作变量名,函数名,数组名等
标识符有自己的规则:
1、只能是由数字、字母、_、$组成
2、不能以数字开头。
4、常量:
一些具体的数据。
这些数据可以按照类型来分类:
number 数字类型
string 字符串类型
null类型
undefined
true false
5、变量:
变量代表的是一个存储空间。这个空间中可以存放常量值。
可以使用typeof这个关键字来检查当前的数据类型。
在JS中不管是单引号还是双引号,引用起来的都是字符串类型
变量的定义:
var 变量名; int num ;错误
6、JS中的基本运算:
算数运算
++ -- + - * / %
注意:由于JS是个弱类型的语言,在把字符串和+号连接的时候,会拼接成一个更长的字符串。
var num = "21";
num = num + 5; 在这里把num这个字符串和5这个数字进行字符串的拼接 所以结果215
alert(num)
var t = "21";
t = t - 1; t本身是个字符串数据,但是这个字符串可以转成number数据,
因此在进行非+运算的时候,就会把这个字符串转成number数据,然后和后面的1进行了减法运算
alert(t)
var t = "x";
t = t - 1; 这里的t变量无法转成number 类型的数据,那么在进行更加复杂的操作时,就会得到一个非正常数据
这个数据在JS中使用NaN
var x = 3;
x = x++; 这里的运算原则和Java一样
alert(x);
4321 / 1000 * 1000 = 4321
赋值运算
= 把右侧的结果赋值到左边的空间中。
+= -= *= /=
关系运算
< > >= <= != == ===
关系运算的结果都是true或false
== 比较两个数据的值是否相同,只要值相同结果就为true
=== 不仅要比较两个数据的值,还要比较两个数据的类型,只有2个都相同的时候,才是true
逻辑运算
&&
||
!
这些运算和Java中的运算原则一样。
不同点:
&& 对于双与而言,当左侧为真的时候,会去计算右侧,如果右侧不是一个布尔值,就会把右侧的这个结果当作整个表达式的结果。
&& 对于左边为false的时候,右侧不算,这个表达式的结果就为false
&& 如果两侧都为真假值,那么左侧是真的时候,看右侧的结果,右侧为真,结果就为真,右侧为假,结果就是假。
如果在逻辑运算中把双与或者双或使用了单与或者单或的时候,
这些符号不是逻辑运算符号,而是位运算符号。
位运算:
& | ^ ~ << >> >>>
var x = 9
var y = 12
alert( x & y);
十进制 二进制
9 0000 1001
12 0000 1100
&
----------------------------
8 0000 1000
alert( x < y & y);
这里x<y成立,那么在js中true默认使用数字1表示
true 0000 0001
12 0000 1100
&
----------------------------
0 0000 0000
JS的语句、函数、数组、JS中的内置对象
三元运算符 :
格式: 表达式1?表达式2:表达式3;
当表达式1为true时,表达式2的结果就是三元运算的结果
当表达式1为false时,表达式3的结果就是三元运算的结果
<script type="text/javascript">
var a = 4;
var b = 5;
var c = a < b ? a : b;
alert(c);
var d = a ? a : b;
alert(d);
</script>
在JS中只要是非零的值,都会认为真值。
1 2 -1 'a' 都可以认为是true
在JS中遇到零、null、undefined这些的数据才会是false
1、JS中的语句
在Java中学习过:
判断语句
第一种格式:
if( 条件 )
{
if判断成立后执行的语句
}
第二种格式:
if( 条件 )
{
if判断成立后执行的语句
}
else //当这个if不成立的时候else就成立
{
if判断不成立后执行的语句
}
第三种格式: 当需要分多个条件进行判断的时候,就可以使用。
if( 条件 )
{
}else if( 条件 )
{
}
else if( 条件 )
{
}
else
{
}
=======================
在JS中可以弹出写消息框:
alert();弹出一个提示框
confirm();弹出的是确定框,上面有两个按钮,点击是会返回true,点击否,返回false
=======================
练习季节:
春季3 4 5
夏季6 7 8
秋季9 10 11
冬季12 1 2
=======================
分支结构语句
switch( 常量 )
{
case 常量1:
语句;
break;
case 常量2:
语句;
break;
case 常量3:
语句;
break;
case 常量4:
语句;
break;
case 常量5:
语句;
break;
default:
语句;
break;
}
switch练习:
划分学生成绩:
90~100 "优秀" 90 ~ 99 9 100 10
80~89 "良好" 80 ~ 89 8
70~79 "一般" 70 ~ 79 7
60~69 "差" 60 ~ 69 6
0~59 "不及格" 0 ~ 59
循环语句:
while( 循环的条件 )
{
}
do
{
}
while( 循环条件 );
for( 表达式1;表达式2;表达式3 )
{
}
循环嵌套:
在循环中嵌套循环。
练习打印九九乘法表
高级for循环:
在Java中学习过foreach,在Java中它主要用于遍历数组或者集合
在JS中也有类似功能的循环。for - in 语句
格式:
for( 变量名 in 容器名 ){
}
使用for-in遍历数组的话,得到数组的角标
语句控制:
break和continue关键字:
break:跳出当前循环,或者跳出当前的是switch
continue:中止本次循环接着进入下次循环。
2、JS中的函数
回顾Java中的函数(方法)的定义格式:
修饰符 返回值类型 方法名( 形参类型 形参名,形参类型 形参名,形参类型 形参名,形参类型 形参名 )
{
方法体
}
JS中函数的定义:
在JS中定义函数需要使用关键字function来定义函数。
函数一般是用来封装多条语句,可以用来完成独立的功能。
JS中函数的第一种定一个格式:
function 函数名()
{
函数体
}
函数在定义好之后,只有被调用才能执行。
在JS中函数如果要接收参数,指定书写变量名,不需要书写var关键字。
在调用函数的时候,可以给函数传递与参数不匹配的实参数据。
在JS中函数没有重载的概念。
在JS的函数中有一个内置的数组(arguments),这个数组负责接收调用函数时传递进来的数据.
因此在使用JS中的函数时,如果在定义函数的时候,没有定义参数,那么我们也可以给这个函数传递数据,
传递进去的数据会被函数中的内置数组接收。
3、JS中的数组
数组是个容器,主要用于存放数据。
var a = 100;
var b = "itcast";
当数据特别多的时候,可以采用数组这个容器统一存放数据,统一管理。
在Java中数组的定义格式:
数据类型[] 数组名 = new 数据类型[数组长度];
int[] arr = {1,2,3,4};
在JS中定义数组:
var 数组名 = [1,3,5];
在JS中数组定义好了,数组也具备基本的特点:
1、就索引(下标)。索引从0开始到长度-1结束
2、可以使用数组的length属性得到数组的长度
JS中数组的遍历:
访问数组中的每个空间。就需要索引,通过数组名+索引的方式来访问数组每个空间。
数组的索引可以通过循环提供。
数组的遍历格式:
for( var i=0;i<arr.length;i++ ){
arr[i] ;这样就能够取出数组的每个空间。
}
JS中的数组简单应用:
1、数组获取最大值:
2、数组排序
3、数组查表法,完成星期的查询
JS中数组的第二种定义方式:
在JS中有个内置的对象,这个对象是Array,使用这个对象,可以创建一个数组出来。
使用new关键字来创建数组对象。
var arr = new Array(); 创建了一个数组对象,这个数组对象空间中没有数据。
JS中有没有二维数组呢?
var arr = [[1,2,3],["abc","bbbb"],[true,false]];
4、JS中的内置对象
在JS中也有自己的内置对象,JS中的内置对象类似于Java中已经存在的类。
1、Array对象
这个对象主要用于创建数组和提供了一些专门用于操作数组的函数和获取数组长度属性
5、自定对象(原型)
JS中的自定义对象,需要使用类似于函数的方式来定义。
定义对象格式:
function 对象名()
{
}
使用prototype给指定原型添加属性和功能
6、DOM:
document object model 的缩写。
文档对象模型。
文档:指的是当前的那个页面。
页面上全部都是标签,标签有属性和标签中封装的数据
对象:把这个文档中的所有标签,属性、数据(文本)全部都给抽象成了对象。
也就是说当一个网页被加载完成之后,网页上的所有内容都是对象。
有了对象之后就可以去操作这个对象。把标签封装成对象之后,就可以动态的去修改、删除、获取、添加标签的属性、封装的文本
7、BOM:
browser object model
浏览器对象模型
当一个浏览器运行之后,会在内存中生产一个window(窗口)对象。在这个窗口中容纳了一个浏览器软件。
DHTML:动态的html,动态的web资源。它不是属于一门技术。它是多门技术结合。
html
css
JS
DOM
AJAX:
html
css
JS
DOM
xmlhttprequest
window对象: