JavaScript总结(一)
一、JavaScript 简介
1.1 、什么是 JavaScript?
JavaScript 的简称:JS。
JavaScript 是一个脚本。(不需要经过编译器编译的语言就叫做脚本)
JavaScript 的作用:
1)动态改变网页内容
2)动态改变网页的外观
3)验证表单数据
4)响应事件
1.2、 JavaScript 的特点
1)语法简单,易学易用。
2)解释型语言。
3)动态执行。
4)跨平台,JavaScript是依赖于浏览器本身的,与操作系统无关。
5)基于对象和事件驱动(单击、悬浮、双击、聚焦、失焦...)
6)仅限客户端。
直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,就称为“事件”。比如按下鼠标,移动窗口,选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。
1.3、 JavaScript 与 Java 的区别?
1)Java 需要编译。JavaScript 需要解释。
2)Java 彻底的面向对象
3)Java 是强类型(数据要特别指定类型来存储)。
JavaScript 是弱类型(会根据给定的数据来推算出类型)。
二、 引入方式与引入位置
向HTML页面插入JavaScript的主要方法,就是使用<script元素>。
使用<script>元素的方式有两种:直接在HTML页面中嵌入JavaScript代码和包含外部的JavaScript文件。
- JS代码存放在标签对<script>...</script>中。
- 使用script标签的src属性引入一个js文件。(方便后期维护,扩展)
例:<script src=”test.js” type=”text/javascript”></script>
注:规范中script标签中必须加入type属性。
内部
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>在HTML中使用JavaScript</title> </head> <body> <h1>在页面中嵌入JavaScript</h1> <script type="text/javascript"> window.document.write("hello,world"); </script> </body> </html>
外部
html文件使用src引入外部my.js
JavaScript文件
JavaScript代码
<script>标签的位置
关于<script>标签的位置,<script>一般应该放在页面的<head>元素中。
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>在HTML中使用JavaScript</title> <script type="text/javascript" > window.document.write("世界你好!!!"); </script> </head> <body> <h1>将JavaScrip标签放在head上</h1> </body> </html>
注意:
1、 页面上可以有多个<script>标签
2、 <script>标签按顺序执行
3、 <script>标签可以出现在任意的页面位置
4、<script>标签一定要写</script>关闭,而不能<script/>这样关闭。否则没有任何错误信息,但是没有运行结果。
三、区分大小写
JavaScript区分大小写
四、常用函数
window.alert() 或写为 alert() :显示一个提示框显示内容。
window.document.write() :在网页的当前位置处写内容。
五、变量
JavaScript的变量是弱类型的,定义变量时只用 var 运算符,可以将它初始化为任意值。
//所有的数据都是用var定义
var name = "admin";
var age = 26;
var obj = new Date();
六、数据类型
使用typeof关键字查看变量代表的具体数据类型
var name = "admin";
var age = 26;
var obj = new Date();
alert(typeof(name)+"=="+typeof(age)+"=="+typeof(obj));
弹出:string==number==Object
有4种基本数据类型:
Undefined, Boolean,Number和String
- undefined - 如果一个变量没有初始化值的时候,其类型为undefined类型。表示没有定义
- boolean -布尔是boolean类型
- number - 所有的数值都是number类型
- string -字符和字符串都是string类型
- object - 如果变量是一种引用类型或 Null 类型的
<script type="text/javascript" > var a = 100; var b = 3.14; var c = true; var d = 'a'; var e = "hello"; var f; document.write(a + "<br/>"); //100 document.write(b + "<br/>"); //3.14 document.write(c + "<br/>"); //true document.write(d + "<br/>"); //a document.write(e + "<br/>"); //hello document.write(f + "<br/>"); //undefined document.write("<hr/>"); document.write( typeof a + "<br/>"); //number document.write( typeof b + "<br/>"); //number document.write( typeof c + "<br/>"); //boolean document.write( typeof d + "<br/>"); //string document.write( typeof e + "<br/>"); //string document.write( typeof f + "<br/>"); //undefined </script>
七、类型转换
<script type="text/javascript"> var a = 20; var b = 14; var c = a + b; var d = a + "" + b; alert(c); //输出 34 alert(d); //输出 2014 var x = "20"; var y = "12"; var xy = x + y; alert(xy); //输出 2012 var xy2 = parseInt(x) + parseInt(y); window.document.write(xy2); //输出 32 parseInt将字符串解析为数字 </script>
ECMAScript 提供了两种把非数字的原始值转换成数字的方法,即 parseInt() 和 parseFloat()。只有对 String 类型调用这些方法,它们才能正确运行;对其他类型返回的都是 NaN。
在判断字符串是否是数字值前,parseInt() 和 parseFloat() 都会仔细分析该字符串。
parseInt() 方法首先查看位置 0 处的字符,判断它是否是个有效数字;如果不是,该方法将返回 NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置 1 处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止,此时 parseInt() 将把该字符之前的字符串转换成数字。
例如,如果要把字符串 "12345red" 转换成整数,那么 parseInt() 将返回 12345,因为当它检查到字符 r 时,就会停止检测过程。
<script type="text/javascript"> /* 字符串转数字 parseInt() 可以把一个字符串转换成整数。 parseFloat() 可以把一个字符串转换成小数。 */ var a = "12"; a = 12.64; a = "123abc123"; /* parseInt方法如果接收的字符串含有非数字的字符,那么parseInt方法会从字符串的首个字符开始寻找,一直找到非数字字符为止,然后就使用前面的数字字符转换成数字, */ a = "a123"; // NaN not a number(不是一个数字) a = "012"; /* 12 如果首位是0,那么就想祛除0再进行转换。*/ a = "0x10"; /* 如果一个字符串是以0x开头,那么会把字符串中的内容当成十六进行的数据处理的。 */ var b = parseInt(a); document.write("结果:"+b+"<br/>"); //16 var c= "3.14"; c = "10"; // 如果是一个字符串是整数的,那么使用parseFloat还是转换 成整数 。 c = "100a"; c = "abc123"; c = parseFloat(c); document.write("结果:"+c+"<br/>"); //NaN /* javascript提供一个IsNaN的方法让我们判断该字符串是否是 一个数字。 is not a muber 不是一个数字。 不是一个数字返回true,是一个数字返回false. */ document.write(isNaN("123")+"<br/>"); //false document.write(isNaN("abc123")); //true </script>
八、比较运算符
<script type="text/javascript"> var a = 20; var b = "20"; // 如果用==判断是否相等,JS会尽力把它们搞成同一个类型,然后进行比较 console.log( a == b ); //true "==" 只是比较数值是否相等 console.log( a === b ); //false "==="比较数值和类型是否相等 console.log( a != b ); //false "!=" 比较数值是否不等 console.log( a !== b ); //true "!=="比较类型和数值是否不等 </script>
三目运算
三目运算符
布尔表达式?值1:值2;
*/
var age = 10;
document.write(age>18?"成年人":"未成年人"); //未成年人 //表达式?返回值1:返回值2 如果表达式成立则返回返回值1;如果表达式不成立,则返回返回值2
九、流程控制语句
<script type="text/javascript"> /* 控制流程语句 if语句 格式: if(判断条件){ 符合条件执行的代码 } if语句的特殊之处: 1. 在javascript中的if语句条件不单止可以写布尔表达式,还可以写任何的数据。 number 非0为true, 0为false. string 内容不为空是true, 内容空的时候是false。 undefined:false NaN: false */ var workAge = 1; //为0是false;非0是true var str =""; //为空是false;不为空是true var b; //未定义,为false if(workAge){ document.write("明天过来面试!!"); }else{ document.write("不要在投我们公司了,不要你!"); } /* 选择语句: switch语句 switch(变量){ case 值1: break; case 值2: break; case 值3: break; ..... default: break; } 特殊之处: 1. 在javascript中case后面可以跟常量与变量还可以跟表达式 */ /* var option = "A"; var score =98; switch(option){ case score>=90?"A":"B": document.write("java"); break; case "B": document.write("ps"); case "C": document.write("javascript"); break; case "D": document.write("C++"); break; } */ </script>