JavaScript基础1
什么是Javascript？
Javascript是一种基于对象和事件驱动的， 与平台无关的 ，具有安全性的 ，弱类型的脚本语言。
为什么要用？
使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。
Javascript的特点：
1.是一种脚本编写语言
JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。
它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。
2.基于对象的语言。
JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
3.简单性
JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。
4.安全性
JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
5.动态性的
JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
6.跨平台性
JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。
JavaScript学习内容：
1.script
2.DOM：文档对象模型（操作HTML CSS代码）
3.BOM:浏览器对象模型（操作浏览器）
JavaScript运行顺序
从html页面的最上面向下运行的.
最佳实践: 将html,css写前面，将js代码写后面.
浏览器加载顺序：
1.HTML解析完成
2.外部脚本和样式加载
3.脚本在文档内解析并执行
4.HTML DOM完全构建
5.图片和外部内容的加载
6.网页完成加载
js可以放在页面的任何地方，不过建议放在head或body中。
示例：
<script> alert("你好1"); </script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js</title>
<script> alert("你好2"); </script>
</head>
<body>
<p>中国</p>
<!-- JS(Javascript)：基于对象的、事件驱动的、与平台无关的(运行环境由浏览器提供)、弱类型的脚本语言 强类型和弱类型 在声明变量时，是否需要指定变量的数据类型 它的执行顺序是从上往下 -->
<script> alert("你好3"); </script>
<h1>中华人民共和国</h1>
</body>
<script> alert("你好4"); </script>
</html>
<script> alert("你好5"); </script>javascript如何加入到html中:
a. // 页面内的js代码.
b. 使用 //引入外部js文件.
c.基于事件的写法:
实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!-- 引入外部的js -->
<script src="外部定义的一个（自己写一个js代码）.js"></script>
<!--内部js-->
<script> var a; document.write("<br />"+typeof(a)+"<br />"); //undefined a=10; //给a赋值为一个整形数据10 document.write(typeof(a)+"<br />"); //number a="string"; //给a赋值为一个字符串string document.write(typeof(a)+"<br />"); //string a=true; //给a赋值为一个布尔类型true document.write(typeof(a)+"<br />"); //boolean //弱类型的语言，变量的数据类型在给它赋值时，才能确定，并且会随着赋值的变化而变化 </script>
</head>
<body>
</body>
</html>javaScript是一种弱类型的语法：
Java中 int x 强类型
js中 var x //var 不知道什么类型 >>弱类型
类型：
undefined: 未定义
number: 数字
string: 字符串
boolean: 布尔型
实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>==和===</title>
<script> var i=10; var j=10; document.write( i==j); //true document.write("<br />"); document.write( i===j); //true document.write("<br />"); var k="10"; document.write( i==k); //true document.write("<br />"); document.write( i===k); //false document.write("<br />"); //==：值相等就行 //===：除值相等外，数据类型也必须相等 </script>
</head>
<body>
</body>
</html>var声明变量时的规则: 变量的作用域:
a. 在函数外用var或在函数内不用var声明的变量为全局
b. 在函数内用var声明的是局部的
c. 在函数的参数中定义的变量为局部的,并且函数的参数不能加 var定义.
实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全局变量和局部变量</title>
<script> var a=10; function add(){ var x=20; alert(x+a); } add(); //30 m=30; function add1(){ var x=20; y=30; alert(x+y+a+m); //90 } add1(); function add2(){ alert(y+a); } add2(); //40 function add3(z){ // 局部 z=90; alert(y+z); //120 } add3(); alert(z); </script>
</head>
<body>
</body>
</html>实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>变量的作用域</title>
<script> function show(){ for(var i=1;i<10;i++){ document.write(i+"<br />"); //1-9 } document.write(i+"<br />"); //10 var i; document.write(i+"<br />"); //10 i="string"; document.write(i+"<br />"); //string } show(); //说明在js中没有块级作用域，即使你重新声明，如果没有重新赋值，则还是会保留原有的值 </script>
</head>
<body>
</body>
</html>js中的函数的定义语法:
a. function 函数名 (参数列表){
return 值; / 无返回值, 直接写 代码
}
b. 函数名=function(参数列表){
return 值; / 无返回值, 直接写 代码
}
调用:
a. 函数名(参数列表);
b. 值变量=function(参数列表){
return 值; / 无返回值, 直接写 代码
}();
实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<script type="text/javascript"> function add(x,y){ return x+y; } add=function(x,y){ return x+y; } alert( add ); // 输出一个字符串 function类型( java的class) "function(x,y){ return x+y; }" alert( eval( '('+ add+'(3,2) ' +')' ) ); alert( add(3,4) );//7 add1=function(x,y){ return x+y; }(3,4); alert( add1 ); //7 </script>
</head>
<body>
</body>
</html>实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script> var a; a=10; document.write(typeof(a)+"<br />"); a=true; document.write(typeof(a)+"<br />"); </script>
<script> var x=1; function add(a){ y=2; //全局的 a=3; //局部的 alert(x+y+a); //6 } add(); alert(a); //true 引用上面那个script中的全局变量a function add1(){ alert(x+y+a); //1+2+1=4 由于此时a=true，对应的值为1 (false=0) } add1(); </script>
</head>
<body>
</body>
</html>注意：js中的方法中没有重载这个概念, 即如果有多个函数，函数名相同，参数不同，最后一个方法会覆盖前面的方法 .
实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<script> function add(x,y){ return x+y; } function add(x,y,z){ return x+y+z; } function add(x,y,z,m){ return x+y+z+m; } function add(x){ return x; } document.write( add(3,4) +"<br />"); //调用函数 3 document.write( add(3,4,5) +"<br />"); //调用函数 3 document.write( add(3,4,5,6) +"<br />"); //调用函数 3 document.write( add(3,4,5,6,7) +"<br />"); //调用函数 3 </script>
</head>
<body>
</body>
</html>结果都是3
改进：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script> /*add(x,y)：说明此函数期望获的两个参数*/ function add(x,y){ //alert(arguments.length); //内置对象arguments是用来获取此函数实际接收到的参数 var num=0; for(var i=0;i<arguments.length;i++){ num=num+arguments[i]; } return num; } document.write( add(3) +"<br />"); //调用函数 document.write( add(3,4) +"<br />"); //调用函数 document.write( add(3,4,5) +"<br />"); //调用函数 document.write( add(3,4,5,6) +"<br />"); //调用函数 document.write( add(3,4,5,6,7) +"<br />"); //调用函数 /*在js中调用方法是根据名字来的，与后面的参数个数无关，如果方法同名，则后面的会把前面的覆盖*/ </script>
</head>
<body>
</body>
</html>结果：
3
7
12
18
25
js中的常见函数
eval() 计算javascript代码串
isNaN() 检测一个值是否是非数字的值
parseInt() 将字符串转换为整数，转换第一个无效字符之前的字符串
parseFloat() 将字符串转换为数字，转换第一个无效字符之前的字符串
alert() 弹出对话框显示消息
confirm() 用对话框询问一个回答为是或否的问题
prompt() 弹出对话框，请求用户输入一个字符串
实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>强制类型转换</title>
<script> var iNum=10; var sNum = iNum.toString(8); //将10转换为8进制 var iNum1= parseInt("12.6"); var iNum2= parseInt("hello"); var iNum3= parseInt("123world"); var fNum4= parseFloat("25.12.6"); var Num= Number("123world"); var b1 = Boolean(""); document.write(sNum); //12 document.write("<br />"); document.write(iNum1); //12 document.write("<br />"); document.write(iNum2); //NaN document.write("<br />"); document.write(iNum3); //123 document.write("<br />"); document.write(fNum4); //25.12 document.write("<br />"); document.write(Num); //NaN document.write("<br />"); document.write(b1); //false document.write("<br />"); document.write(isNaN("12")); //false //带一个确定按钮的提示框 alert("用户名或密码错误..."); //带确定和取消按钮的选择框 confirm("您确定要删除吗?"); //选择确定则返回true,选择取消则返回false //带一个文本输入框的提示框 prompt("请输入您的安全密码","123"); </script>
</head>
<body>
</body>
</html>