JavaScript 的基本使用
JavaScript 基本语法要求:
1、JS的写法是严格区分大小写的。
2、标识符的起名要求跟java的是一样的,第一个位置可以说字母、下划线、美元符号。其他位置可以字母、下划线、美元符号、数字。
如:“daf_$123”这样的类型是合法的,“1135jhsb_$ ”这样的是不合法的。
3、变量就是声明来保存数据的内存空间,Js的变量声明要使用 var 关键字来声明。
声明方式:
声明并且赋值: var 变量名 = 值
先声明再赋值: |-var 变量名 //先声明 |-变量名 = 11111 //赋值
4、注释分为单行注释跟多行注释
单行注释: // 注释内容 多行注释: /* 注释内容 */
5、JS中的每行代码写完后不一定要加上“ ; ”分号,但是为了良好的习惯建议加上分号。
JavaScript 的基本数据类型:
1、 |-Undefined :使用了一个没有赋值的变量或者使用了一个不存在的变量。
2、 |-String : 字符串类型(在java中String 不是基本数据类型)。
3、 |-Number : 数字类型。
4、 |-Null : 表示空类型。
5、 |-Boolean : 布尔类型。
JavaScript 中的变量的数据类型区分:
在java 中变量的类型是在申明变量的时候使用不同的关键字(int/String/double)来定义出变量的类型,而且一个基本数据类型的变量只能保存一种类型数据。
JS中的变量类型是按照变量保存的值的类型来进行划分的,而且在JS中申明了一个变量可以保存任何类型的数据,所以js又叫做弱类型语言。
alert() 是 js 定义好的一个方法,可以直接调用,方法的作用是在页面弹出提示窗口,该方法是属于内置对象 window,还可以在控制台输出信息,使用的方法是 console.log() 。
示例如下:
//使用 alert() 方法
<script>
var temp;
temp = 10;
alert(typeof temp);
temp = "huanying!";
alert(typeof temp);
</script>
//使用 console.log()方法
<script>
var temp;
temp = 10;
console.log(“temp的类型是:” + typeof temp);
temp = "huanying!";
console.log(“temp的类型是:” + typeof temp);
</script>
JS 的三种使用方式:
第一种是在html 代码中使用JS,示例如下:
<a href = "javascript:alert('欢迎光临!')"></a>
第二种是在<script>标签中定义js代码,示例如下:
<script type = "text/javascript">
//定义JS代码
alert("欢迎光临!");
</script>
以上代码当浏览器解析到 <script> 的时候会唤醒浏览器中的 js 解析引擎来解释 js 代码,<script>可以放到页面的任何位置。
第三种是将 js 定义在一个单独的文件中,在需要的地方导入该文件,示例如下:
//调用js文件如下
<head>
<meta charset="utf-8">
<title>欢迎光临!</title>
<!--导入外部js文件-->
<script src="js/domejs.js"></script>
</head>
//创建Dome.js文件,文件名自己定,写入内容如下:
alert("欢迎光临!");
JS的函数使用:
在JS中是没有方法的概念的,而是函数。函数其实也是将一些代码进行封装,之后在需要的地方直接使用函数的名称进行调用,这样解决了重复的代码。
1、js声明需要使用function 进行申明。
2、在声明的方法的时候没有定义返回值。
3、参数没有指定类型,而是直接给出参数名称。
4、返回值可有可无(根据需求)。
js函数声明语法:
function 函数名(参数,参数...) {
//js 代码
[return 返回的数据]
}
示例如下:
//先创建一个js文件然后写入内容如下
//计算两数之和
function addSum(a,b) {
console.log("两数之和为:" (a+b));
return (a+b);
}
//计算矩形面积的函数
function squareAera(len,wid) {
console.log("矩形的面积为:" + (len*wid));
return (len*wid);
}
// 创建第二个js文件 ,在当前的js文件中调用函数库中国的函数
var sum=addSum(5,15);
alert(sum);
//创建html文件写入内容如下然后使用浏览器打开,在控制台输出结果 <head> <meta charset="utf-8"> <title>标题栏,可以自己写什么都行没限制</title>
//导入外部的 js 文件,注意文件导入顺序
<script src = "js/lianxi.js"></script>
<script src = "js/Domejs.js"></script>
</head>
以上第三部分代码中导入js文件注意导入顺序,先是导入以上第一份js文件代码,后是导入第二份js文件代码。
JS的常用方法:
使用parselnt("字符串") 的方式转换之后会将小数部分去掉,如果要保留部分小数则可以使用下一个方法“parseFloat()”实现。在转换的过程如果有非数字的字符出现则只转换第一排非数字字符之前的数字。
例:将一个字符串类型数字转换成整数,示例如下:
var str="10.050505";
var num=parseInt(str);
console.log(num);
输出如下:
转换成小数:
var str="10.050505";
var num=parseFloat(str);
console.log(num);
输出如下:
保留指定小数位:
var str="10.050505";
var num=parseFloat(str);
console.log(num.toFixed(3));
toFixed(指定保留的小数位) 可以指定保留小数位。
输出如下:
实现日期对象的创建,该构造函数就是 Date()。
取得日期,示例如下:
var date=new Date();
console.log(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+":"+date.getHours()+":"+date.getMinutes());
输出如下:
数组的创建和 方法:
创建数组,示例如下:
var arr01 = new Array(["abc"]);
var arr02 = ["a",2,3,undefined];
console.log(arr01.length);
console.log(arr01);
console.log(arr02);
通过ID选取元素
document.getElementById('id');
通过CLASS选取元素
document.getElementsByClassName('class')[0];
通过标签选取元素
document.getElementsByTagName('div')[0];
通过NAME属性选取元素(常用于表单)
document.getElementsByName('name')[0];