超强的入门文章 !!! JavaScript 速成计划第一篇(基础语法详解)!

   日期:2020-07-17     浏览:97    评论:0    
核心提示:作者:浪子花梦,一个有趣的程序员 ~此文将简单的讲解一个编程语言中最基础的东西,如变量、运算符、分支、循环、函数等等 . . .其他三篇文章如下:1.2.3.文章目录初步探索变量运算符条件判断循环遍历函数与变量作用域所有的 JS 代码都是放在如下的标签之中:废话不多说,直接开干 !初步探索变量变量用关键字 var进行声明,var会自动推断出数据的类型,使用如下所示:var i = 20.5;var j = 10;[removed](i + j .

作者:浪子花梦,一个有趣的程序员 ~
此文将简单的讲解一个编程语言中最基础的东西,如变量、运算符、分支、循环、函数等等 . . .

其他二篇文章如下:

  1. 超强的入门文章 !!! JavaScript 速成计划第二篇(杂项详解:JS操作HTML 与 CSS、异常、事件)!
  2. 超强的入门文章 !!! 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;这一句代码,它是全局变量 . . .

.
.
.

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服