作者:浪子花梦,一个有趣的程序员 ~
此文将简单的讲解一个编程语言中最基础的东西,如变量、运算符、分支、循环、函数等等 . . .
其他二篇文章如下:
- 超强的入门文章 !!! JavaScript 速成计划第二篇(杂项详解:JS操作HTML 与 CSS、异常、事件)!
- 超强的入门文章 !!! JavaScript 速成计划第三篇(面向对象与常用的内置对象、DOM对象、浏览器对象)!
文章目录
- 初步探索变量
- 运算符
- 条件判断
- 循环遍历
- 函数与变量作用域
所有的 JS 代码都是放在如下的标签之中:
废话不多说,直接开干 !
初步探索变量
变量用关键字 var进行声明,var会自动推断出数据的类型,使用如下所示:
var i = 20.5;
var j = 10;
document.write(i + j + "<br/>");
将 i 与 j 相加,然后输出结果,并且加上换行
结果如下:
除了这浮点型、整形数据外,还有许多其它的数据,如下所示:
var bool = true; // bool 类型
var str = "hello"; // 字符串类型
var arr = [1,2,3,4,5]; // 数组类型
其中,数组的访问和其它语言一样,都是通过下标进行索引,如 arr[0] 等 . . .
运算符
运算符的使用也非常的简单,像一些 +、-、*、/ 之内的运算符这里就不详细的讲了,例如下面的三目运算符:
document.write(1? "Hello":"World!");
效果如下所示:
我们主要来说说 == 与 === 的区别,看看如下的代码:
var i = 20;
var j = "20";
document.write(i == j);
document.write("<br/>");
document.write(i === j);
结果如下所示:
这是为什么呢? 20 与 “20” 相等吗? === 又是什么东西? 当我们使用 == 时,他的底层会使用一种转换,将 “20” 转换成20,然后再进行比较(true),=== 表示判断相等的同时,也会判断两者的类型是否相等(false) . . .
条件判断
条件判断有两种语法格式,if 与 switch,和其它语言使用方式是一样的,我们看下面这个例子:
var i = 10;
if(i > 10){
document.write("Hello");
}
else{
document.write("World!");
}
switch (i) {
case 10:
document.write("<br/>" + "I Love You" + "<br/>");
break;
default:
document.write("i don't ten !");
break;
}
结果输出如下所示:
循环遍历
循环有三种方式,分别是 while、do while、for,遍历一个集合的方式也有许多种 . . .
首先,我们准备一个数组(用于测试):
var arr = [9,2,3,4,5];
arr.sort();
//document.write(arr);
while:
var i = 0;
while(i<arr.length){
document.write(arr[i++] + " ");
}
document.write("<br/>");
do while:
i = 0;
do{
document.write(arr[i++] + " ");
}while(i < arr.length);
document.write("<br/>");
for:
for (let index = 0; index < arr.length; index++) {
document.write(arr[index] + " ");
}
document.write("<br/>");
forEach 遍历数据:
arr.forEach(item => {
document.write(item + " ");
});
document.write("<br/>");
forof 遍历数据:
for (const item of arr) {
document.write(item + " ");
}
document.write("<br/>");
forin 遍历数据:
for (const index in arr) { // i 表示 arr的下标索引
document.write(arr[index] + " ");
}
document.write("<br/>");
这几种访问数组元素的结果都是一样的,如下所示:
函数与变量作用域
函数
函数是非常重要的一个方法,合理的使用函数,可以使程序的可读性变的非常的优秀,下面我将介绍几种不同的使用方式 . . .
无参函数:
function sum(){
alert("Hello, World!"); // alert的作用是弹出一个警示框
}
sum();
效果如下所示:
有参函数:
function showinfo(m, n){
document.write(m + " " + n + "<br/>");
}
showinfo("huameng", 20);
showinfo("langzihuameng", 30);
showinfo(25, 0);
效果如下所示:
有返回的方法:
<p id="pid">Hello, World!</p>
<script>
function alterdata(){
return "Hello, langzihuameng";
}
function sayhello(){
document.getElementById("pid").innerText = alterdata();
}
</script>
<button onclick="sayhello()">Alter Data</button>
当我们点击按钮时,对改变 p元素中的内容,其中有几个方法大家可能不知道,没关系,我会在后面的文章中进行详细的讲解,innerText 属性表示的是 标签的内容,我们只是将函数的返回内容将原本已经有的内容进行一个覆盖而已 . . .
.
变量作用域
说起变量的作用域,我们就容易的想到 局部变量与全局变量,那么 在JS中我们是怎么使用的呢?
代码如下所示:
var i = 20; // 全局变量
function func(){
var k = 10; // 局部变量
num = 250; // 全局还是局部呢?
document.write(i + "<br/>"); // 20
document.write(k + "<br/>"); // 10
document.write(num + "<br/>"); // 250
}
func();
document.write(num + "<br/>"); // 250 全局变量 能够被访问到
代码中,哪些是局部变量,哪些是全局变量,我已经说明清楚了,特别注意的是 num = 250;这一句代码,它是全局变量 . . .
.
.
.