(1)Javascript基础

一.简介

基于对象和事件驱动的语言，应用于客户端。

基于对象：提供了很多对象，可以拿过来使用
事件驱动：html做网站静态效果，javascript做动态效果
客户端：指的是浏览器

特点

交互性：信息的动态交互
安全性：不能访问本地磁盘的文件
跨平台性：能在各个平台上运行

与JAVA的区别

Java是sun公司开发，现在被Oracle公司收购；Javascript是网景公司
Java是面向对象；Javascript是基于对象
Java是强类型语言；Javascript是弱类型语言（类型不限定）
Java需要先编译成字节码文件，再执行；Javascript解析后就可以运行

Javascript组成
三部份

ECMAscript：由以下组织定义的语法
ECMA：欧洲计算机协会
BOM：Browser Object Model 浏览器对象模型
DOM：Document Object Model 文档对象模型

与html的结合方式
两种

用一个标签<script type="text/javascript"></script>
使用script标签引用外部js文件，在标签中加入src。使用这种方式不会执行内部写的代码，只会执行引入的代码。

 <script type="text/javascript" src="1.js">
   </script>

二.js的原始类型和声明变量

五种原始类型：定义类型都使用关键字var

string：字符串
- var str="abc"; 这就是弱类型语言，不用考虑左边引用的类型。
number：数字
- var m=123;
boolean：布尔
- var b=true;
null：获取当前对象的一个引用，null表示引用为空，所有对象的引用是Object
- var date=new Date(); 获取当前时间
undefined：定义一个变量，没有赋值
- var aa;

那我们又有一个问题，如果赋值一样，那怎么判断数据类型呢？
所以，js提供了typeof(变量名称)来查看当前数据类型

 <script type="text/javascript">
   var date=new Date();
   var str="123"
   //alert(typeof(date));
   alert(typeof(str))
   </script>

Object
string

第一个答案说明了，所有对象的引用都是Object；第二个返回正确的类型

三.js中的条件判断语句

if语句：与java中语法一样
switch语句：js中没有java的数据类型限制，所有都支持；语法和java一样
循环语句
while、do-while：与java一样，条件值不为零就无限循环
for：除了定义语句为var，其他与java一样

i++与++i也是一样的

四.js中的运算符

js中大部分运算符与java中一样，下面我们看看一些不一样的例子。

1.数据类型差别

 <script type="text/javascript">
   var m=123;
   alert(typeof(m/1000*1000));
   </script>

上面问题的答案是多少呢？
在java中 123/1000*100答案为零，因为123为整型，除以1000后变为0，在乘以1000，还是0.
而在javascript里没有整型，浮点型限制，123/1000=0.123 0.123*1000=123,所以答案为123

2.字符串的相加减

数字加一

 <script type="text/javascript">
  var str="123";
  alert(str+1);

弹出1231，与java一样；

数字减一

 <script type="text/javascript">
  var str="123";
  alert(str-1);

弹出122，直接减了一；

字母加一：与数字的一样，在末尾加一
字母减一：弹出NaN，提示你这不是数字
字母与数字混用：也是与字母的加减混用
其他特殊符号：同上

>总结--------字符串的加减相加：做的是字符串的连接；相减：纯数字，数字的减法；有其他字符，提示NaN

3.boolean类型的加减

 <script type="text/javascript">
 /* (1)
  var str=false;
  alert(str+1);
  */
 /* (2)
  var str=true;
  alert(str+1);
  */
  /* (3)
  var str=false;
  alert(str-1);
  */
   /* (4)
  var str=true;
  alert(str-1);
  */
 </script>

答案
(1)：1
(2)：2
(3)：-1
(4)：0

总结：如果为true，就相当于数字1；为false，相当于数字0

4.与=的区别

先看==号

 <script type="text/javascript">
  var a=5;
  var b="5";
  if(a==5){
	  alert("6");
  }else{
	  alert("other");
  }
   </script>

当if里面的变量a换成b时，还是弹出6。证明==判断的是值，与变量的类型无关。

再把改为=

弹出结果为other，所以===比较值和类型。

5.直接在页面上输出

document.write();
注意事项

document.write()里面是双引号，若给标签设置应该为单引号
document.write()可以输出变量和html代码。
document.write()可以输出数字不加双引号

例子：打印一个9*9乘法表

<!doctype html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html ; charset=UTF-8">
  <title>javascript</title>
 </head>
 <body>
   <script type="text/javascript">
		document.write("<table border='1' bordercolor='red'>");
		  for(var i=1;i<10;i++){
			  document.write("<tr>");
			  for(var j=1;j<i+1;j++){
			  document.write("<td>"+j+"*"+i+"="+i*j+"&nbsp&nbsp</td>");
			  }
			  document.write("</tr>");
		  }
	   document.write("</table>");
   </script>
 </body>
</html>

五.js的数组

js数组没有java的类型限制，可以存放不同的数据类型，它的定义方式有三种：

var arr=[1,"3",true];
var arr=new Array(5); //设置长度为5的数组。若Array("5")，意思是长度为1，内容为5的数组
arr[0]="1";
arr[2]=true;
var arr=new Array(3,"4",5);

数组的长度：与java一样，为arr.length

对数组的操作:数组长度是可以变化的
引用：详细操作

遍历数组：可以用for……in遍历数组

var row = ['zhangsan','lisi','wangwu','xiaoqiang'];

for (var i in row){
  document.write(i + ':' + row[i] + '<br>');
}

六.js的符号含义

()表示函数执行
[]表示语法模拟，表示模拟Array类的实例（=new Array()）
{}表示语法模拟，表示模拟Object类的实例（=new Object()）
//表示语法模拟（正则对象），表示模拟RegExp类的实例（=new RegExp()）

七.js的函数

js定义函数不像java那么麻烦，有三种方式可以定义：

1.关键字function

/*
 function 方法名(参数列表){
    方法体；
    返回值，可有可无，根据实际需要
 }
 */
function add(a,b){
		var sum=a+b;
		alert(sum);
	}
function add1(a,b,c){
		var sum=a+b+c;
		return sum;
	}
	//add(3,6);
	alert(add1(2,3,4));

2.匿名函数：想要调用就需要起一个名字

/*
var  方法名 = function(参数列表){
    方法体；
    返回值，可有可无，根据实际需要
 }
 */
  var add=function (a,b){
		var sum=a+b;
		alert(sum);
	}
	add(5,8);

3.Function
也称为动态函数，比较少用

/*
var add=new Function("参数列表","方法体和返回值")
*/
var add=new Function("x,y","var sum=x+y;return sum");
alert(add(3,5));//答案为8

1.js的全局变量与局部变量

全局变量：定义在全局的变量，这个变量在页面中的js部分都可以使用
局部变量：定义在方法内部的变量

  <script type="text/javascript">
	   var aa="44";//全局变量,下面三个都会弹窗
	   alert("在方法外部调用： "+aa);
	   function test(){
		alert("在方法内部调用： "+aa);
	   }
	   test1();
   </script>
   <script type="text/javascript">
		alert("在别的script调用： "+aa);
   </script>

2.script标签放置位置

关于这点网上有很多讨论，鉴于我学习的知识不多，只讨论其中一点：
html文件是自上而下的执行方式，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。
所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞，加快访问速度。
而有一些页面的效果的实现，是需要预先动态的加载一些js脚本，所以这些脚本应该放在<body>之前。
其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效。就是因为这个，在dom没生成好时我就给它添加了方法，才导致这样。

总结：一般放在body后；有预加载的放在body前，不能将需要访问dom元素的js放在body之前。

posted @ 2017-11-05 16:43 ikonon 阅读(184) 评论(0) 编辑收藏举报

刷新页面返回顶部

ikonon

java学习中