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>