JavaScript学习笔记(第一天)

时间:2021-07-24 15:03:01

关于对JavaScript的介绍我就不多加述说了,因为我的理解肯定没有大佬们表述的清晰,JavaScript在我的印象里是一种很流行的脚本语言,至于为何流行?因为所有的网页,浏览器都是由js来驱动的,H5,跨手机,电脑,pad等多种平台。

工具:webstorm

快速入门:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascrip 入门1</title>
<script>
var abc='Hello world'
alert(abc);
</script>
</head>
<body>
</body>
</html>

为什么这么写?因为js是驱动h5与用户进行交互的,所以必须在html界面上进行操作。

这里创建一个局部字符串变量abc,赋值’Hello world’,将abc内容弹出到窗口上。

JavaScript学习笔记(第一天)

JavaScript除了可以将js代码直接写在

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascrip 入门1</title>
<script src="js/alert.js">
</script>
</head>
<body>
</body>
</html>

我在js文件夹创建了alert.js文件,内容如下:

/**
* Created by WangChang on 2017/5/31.
*/

var abc='520'
alert(abc);

效果:

JavaScript学习笔记(第一天)

这里路径一定要写正确,alert.js是放置在js文件夹下的文件。

基本语法:


JavaScript语法跟java类似,这给Android开发的我带来一些便利。

JavaScript每个语句以;结束,语句块也用{},没啥说的,当然本文所述都是在规范的前提下,因为不加;,也不会报错,但是容易引起问题,所以这里不在讲这些。

赋值语句

var age=22;
var name='张三';
var sex='男';

不建议跟java一样一个var申明多个变量。

语句块:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascrip 入门1</title>
<script >
var a=2;
if(a>1){
alert('a=2');
}else {
alert('a=1');
}

</script>
</head>
<body>
</body>
</html>

语句块感觉和java一样,可以内嵌多个判断逻辑,不过原则上建议将逻辑以单一功能封装调取,这样便于理解。

注释:

跟Java一样,略,//单行注释,/多行注释/

数据类型和变量


Javascript定义的数据类型有Number,字符串,布尔值,比较运算符等,看起来比java要简单的多。

Number:

javascript不区分java中的int,double和float等,统一用Number表示。

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000,等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number,当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity

运算跟java一样采用四则运算。

字符串:

字符串可以用单引号”和双引号”“来表示,都行,看起来比java要包容的多。

布尔值:

跟java一样,true/false,&&,||,!与或非也没啥可说的。

比较运算符:

2 > 5; // false
5 >= 2; // true
7 === 7; // true

这里采用===而不采用==,原因就是js支持不同类型的数据比较,==会将类型转换在比较,===则不会转换,如果不是同类型则false,同类型在比较。

NaN(not a number)它和所有数值均不相等,包括他自己。NaN===NaN(false)。它需要通过isNaN(NaN);来判断,返回true。

浮点数的比较

1/3===(1-2/3) false,因为浮点数在运算过程中会产生误差

null和undefined:

表示空(不算”)和未定义,跟java一样,略。

数组:

var arr=[1,2,3,4,5];
alert(arr[0]);

跟java一样,[],下标查找。

对象:

js的对象是由键值对来表示,类似java中的hashmap

        var persion={
name:'Bob',
age:'20',
tags:['js','web','mobile'],
city:'beijing',

};
alert(persion.name)

键是字符串,值可以是任意类型,包括null。

变量:

变量名是大小写英文、数字、$和_的组合,且不能用数字开头。变量名也不能是JavaScript的关键字,没啥可说的。

同一个变量可以赋值多次,而且可以是不同类型的值。

函数:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascrip 入门1</title>
<script >
function myFunction() {
alert("js函数");
}
</script>
</head>
<body>
<button onclick="myFunction()">请点击</button>
</body>
</html>

跟java类型,方法体放置在{}中,function是关键字,类似返回类型,myFunction是方法名。

带参数函数:

跟java类似,将上面的方法稍加改造

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascrip 入门1</title>
<script >
function myFunction(name,age) {
alert(name+age+'岁了');
}
</script>
</head>
<body>
<button onclick="myFunction('张三',15)">请点击</button>
</body>
</html>

结果:
JavaScript学习笔记(第一天)

带返回值的函数:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascrip 入门1</title>

</head>
<body>
<p id="demo"></p>
<script >

function myFunction(age) {
var x;
if(age>18){
x='成年人';
}else {
x='未成年人';
}
return x;
}
document.getElementById('demo').innerHTML=myFunction(20);
</script>
</body>
</html>

结果在p标签上输出成年人。

var声明的是局部变量,未用var声明的是全局变量