您的位置：首页 > Web前端 > JavaScript

JavaScript学习笔记（第一天）

2017-06-01 00:11 393 查看
关于对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除了可以将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);


效果：



这里路径一定要写正确，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>


结果：



带返回值的函数：

<!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声明的是全局变量
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 脚本语言
相关文章推荐
新的分享
章节导航