JavaScript超强速成计划(一)【基础语法详解】(学习笔记)
目录:
- 初步探索变量
- 运算符
- 条件判断
- 循环遍历
- 函数与变量作用域
所有的JS代码都放在如下的标签之中:
<script> </script>
-
初步探索变量
变量用关键字var进行声明,var会自动推断出数据的类型,使用如下所示:
var i = 20.5; var j = 10; document.write(i + j + "<br/>");
输出结果:30.5
除了浮点型,整形数据外,还有许多其他的数据,如下所示:
var bool = true; //bool类型 var str = "hello"; // 字符串类型 var arr = [1,2,3,4,5]; // 数组类型
其中,数组的访问和其他语言一样,都是通过下标进行索引,如arr[0]等。。。
2.运算符
+、- 、*、/、三目、==、===等...
==和===的区别
var i = 20; var j = "20"; document.write(i == j); document.write("<br/>"); document.write(i === j);
结果如下所示:
解释:==,它的底层会有一种转换,将“20”转换成20,然后再进行比较(true),
===,表示判断相同的同时,也会判断两者的类型是否相同(false)
3.条件判断
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'm not ten"); break; }
结果输出如下所示:
world
I Love You
4.循环遍历
while、 do while、for、forEach、forof、forin
遍历一个集合的方式也有许多种 . . .
准备的数组(用于测试):
var arr = [9,2,3,4,5]; arr.sort();
输出结果:2,3,4,5,9
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){ document.write(arr[index] + " # "); } document.write("<br/>");
5.函数与变量作用域
函数
无参函数:
function sum(){ alert("Hello World"); } 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 alertData(){ return "Hello,Namei"; } function sayhello(){ document.getElementById("pid").innerText = alertData(); } </script> <button onclick="sayhello()">Alert Data</button>
innerText 属性表示的是 标签的内容,我们只是将函数的返回内容将原本已经有的内容进行一个覆盖而已 . . .
变量作用域
局部变量、全局变量
var i = 20; //全局变量 function func(){ var k = 10; //局部变量 num = 250; document.write(i + "<br/>"); document.write(k + "<br/>"); document.write(num + "<br/>"); } func(); document.write(num + "<br/>");