JavaScript 基础1
来源:互联网 发布:淘宝的数字证书在哪里 编辑:程序博客网 时间:2024/04/27 22:10
1.JavaScript 认识
上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。
由于网景公司希望能在静态HTML页面上添加一些动态效果,于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错,这哥们只用了10天时间。
为什么起名叫JavaScript?原因是当时Java语言非常红火,所以网景公司希望借Java的名气来推广,但事实上JavaScript除了语法上有点像Java,其他部分基本上没啥关系。
2.使用
JavaScritp的基本元素是语句。一条语句代表着一条命令。通常以分号(;)结尾。 实际上分号用不用都行,只是为了增加阅读性。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>标题</title> </head> <body> <script type="text/javascript"> document.writeln("hello world"); </script> </body> </html> document.writeln("hello"); 仅仅是在文档中添加了一些文字,并没有什么明显的效果, 我们这么演示其实是告诉大家,js的作用就是这样通过代码去控制界面的呈现效果。
3.数据类型
我们学习编程语言大多数都是概述 → 数据类型 → 语法 → 类 JavaScript也是一样的,定义变量要使用到var关键字,在定义的同时可以为其初始化赋值。
- 局部变量:定义在函数中的变量称为局部变量,只能在该函数范围内使用。
全局变量:直接在script元素中定义的变量称为全局变量,可在任意地方使用。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>标题</title> </head> <body> <script type="text/javascript"> <!-- 定义字符串 --> var str = "abc"; <!-- 定义数值 --> var num = 1; <!-- 定义布尔 --> var status = false; </script> </body> </html>
注意:
JavaScript是一种弱类型的语言,所谓弱类型,指的是他不需要明确的声明变量的类型,可以随意的赋值自己想声明类型的变量,还可以根据场景在类型间自由转换。字符类型:string类型就是java中的字符串,
var str = "abc";
- 布尔类型:boolean类型由两个值,true和false。
数值类型:整数和浮点数都用number类型便是。
var num = 5; var pi = 3.14; var color = 0x123456;
4.定义函数
定义函数其实就是我们需要用到的一些API封装起来,这样的话我们就不用每次使用都重新写一遍,只需要调用函数即可。 例:定义有参函数,无参函数,有返回值函数 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>标题</title> </head> <body> <script type="text/javascript"> <!-- 定义无参函数 --> function hello(){ document.writeln("hello"); } hello(); <!-- 定义有参函数 --> function add(num1,num2){ document.writeln(num1+num2); } var num1 = 2; var num2 = 3; add(num1,num2); <!-- 定义有返回值函数 --> function getSum(num1,num2){ return (num1+num2); } document.writeln(getSum(num1,num2)); </script> <hr/> <script type="text/javascript"> hello(); </script> </body> </html>
5.创建对象
创建对象:通过new Object的方式来创建对象。
<body> <script type="text/javascript"> var persion = new Object(); persion.name = "xioaming"; persion.age = 12; document.writeln(persion.name); document.writeln(persion.age); </script> </body>
对象字面量:用这个可以直接定义对象及其属性。
<body> <script type="text/javascript"> var persion = { name : "xiaoli", age : 1 }; document.writeln(persion.name); document.writeln(persion.age); </script> </body> <!-- 注意: 属性的名称和值时间用冒号分隔(:) 多个属性之间用逗号分隔(,) 大括号之后必须用分号结尾(;) -->
对象函数:使用上面的方式可以为对象添加变量,也可以为对象添加函数。
<body> <script type="text/javascript"> var persion = { name : "xiaoli", age : 1, getSum : function(){ return 1+2; } }; document.writeln(persion.name); document.writeln(persion.age); document.writeln(persion.getSum()); </script> </body> <!-- 注意:方法内部使用对象属性时,要使用this关键字 -->
6.使用对象
读取和修改对象属性值:一种是直接
对象.属性名称
,一种是对象["属性名称"]
<body> <script type="text/javascript"> var persion = { name : "xiaoli", age : 1, getSum : function(){ return 1+2; } }; persion.name= "haha"; persion["name"] = "hehe"; document.writeln(persion.name); document.writeln(persion["name"]); </script> </body>
枚举对象属性:使用for …in 语句。
<body> <script type="text/javascript"> var persion = { name : "xiaoli", age : 1, getSum : function(){ return 1+2; } }; persion.name= "haha"; persion["name"] = "hehe"; document.writeln(persion.name); document.writeln(persion["name"]); for(var prop in persion){ document.writeln("name="+prop+",value="+persion[prop]+"<br>"); } </script></body><!-- 注意:对象.[变量名] 中括号里面的变量名不需要加双引号 -->
增删对象的属性和方法
注意:
判断对象中是否存在某属性用:
var hasName = “name” in persion;<body> <script type="text/javascript"> var persion = { name : "xiaoli", }; <!--增加属性和函数--> persion.age = 12; persion.getSum = function(){ return 1+2; }; for(var prop in persion){ document.writeln("name="+prop+",value="+persion[prop]+"<br>"); } <!-- 删除属性和函数--> delete persion.name; delete persion["age"]; delete persion.getSum; for(var prop in persion){ document.writeln("name="+prop+",value="+persion[prop]+"<br>"); } </script> </body>
7.运算符
注意: a:== 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 。 b:而 === 和 !== 只有在相同类型下,才会比较其值。
8.显示类型转换
- 数值转换为字符串:可以使用toString方法
var str = (123).toString();
toString(8)
toString(16)
以二、八、十六进制表示数值 字符串 toFixedn() 以小数点后有n为数字的形式表示实数 字符串 toExponential(n) 以指数表示法表示数值,
尾数的小数点前后分别有1位数字和n位数字 字符串 toPrecision(n) 用n个有效数字表示数值 字符串
- 将字符串转换为数值:使用Number函数。
var num = Number("123");
parseFloat(str) 生成一个整数或实数值 parseInt(str) 生成一个整数值
9.使用数组
注意:
a:创建数组的时候不需要声明数组中元素的个数,JS数组会自动调整大小以便容纳所有的元素。b:不必声明数组所含数据的类型,JS中的素组可以混合包含各种类型的数据。
使用New创建数组
<body> <script type="text/javascript"> var array = new Array(); array[0] = "a"; array[1] = 12; array[2] = false; </script> </body>
使用数组字面量
<body> <script type="text/javascript"> var array = ["a",12,false]; </script> </body>
枚举数组内容
<body> <script type="text/javascript"> var array = new Array(); array[0] = "a"; array[1] = 12; array[2] = false; for(var i = 0;i<array.length;i++){ document.writeln("array["+i+"]="+array[i]) } </script> </body>
内置的数组方法:这些方法是js对Array对象封装好的直接调用就可以了。
10.异常处理
JS中用trry....catch语句处理错误。 <body> <script type="text/javascript"> try{ var array; document.writeln("num="+array[4]); }catch(e){ document.writeln("Error:"+e); }finally{ document.writeln("请检查你的代码"); } </script> </body>
11.比较undefined和null值
JS中有两个特殊的值:undefined和null,在视图读取未赋值的变量或对象没有属性时就是undefined值。 <body> <script type="text/javascript"> var array = [1,2,3]; var persion = { name:"xiaoming", }; document.writeln("age=" + persion.age); document.writeln("num=" + array[4]); </script> </body>
输出结果:age=undefined num=undefined
null与undefined略有不同,undefined是在未定义的情况下得到的值。 null是用于表示已经赋值了一个值但是该值不是一个有效的object、string、number或boolean。 如果想检查某个属性是否为null或undefined,时需要用!非运算符就可以。 Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。 Null类型也只有一个值,即null。null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。
Web笔记首页目录
- javascript 基础(1)
- javaScript基础学习1
- JavaScript 基础技巧(1)
- javaSCript基础1
- javaScript基础1
- javascript 基础1
- javascript基础1
- javascript基础篇 1
- javascript 基础总结1
- javascript基础(1)
- javascript复习1:基础
- javascript基础---语法1
- JavaScript基础(1)
- javascript基础语法1
- javascript基础1语法
- 【JavaScript】(1)基础语法
- JavaScript基础1
- javascript基础1
- linux下调用opencv接口函数创建矩阵,并初始化
- Spring Batch + Spring TaskScheduler example
- 无边界IT与移动化安全
- 解决vue2.0路由跳转未匹配相应用路由避免出现空白页面
- Java空对象模式
- JavaScript 基础1
- TEST
- 第三季10.Set的实现类HashSet与TreeSet等
- Mybatis 属性配置文件 application.properties
- 使用Maven创建Web工程
- Java之美[从菜鸟到高手演变]之设计模式
- c#学习笔记整理2
- Redis实现分布式session功能的共享
- Postgres中oid alias别名的使用