JavaScript超强速成计划(一)【基础语法详解】(学习笔记) 初步探索变量 2.运算符 3.条件判断  4.循环遍历

目录:

  • 初步探索变量
  • 运算符
  • 条件判断
  • 循环遍历
  • 函数与变量作用域

所有的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 = 20var j = "20";
document.write(i == j);
document.write("<br/>");
document.write(i === j);

结果如下所示:

JavaScript超强速成计划(一)【基础语法详解】(学习笔记)
初步探索变量
2.运算符
3.条件判断
 4.循环遍历

 解释:==,它的底层会有一种转换,将“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 = 0while(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();

效果如下所示:

JavaScript超强速成计划(一)【基础语法详解】(学习笔记)
初步探索变量
2.运算符
3.条件判断
 4.循环遍历

 有参函数:

function showinfo(m,n){
    document.write(m + ' - ' + n + "<br/>")  
}
showinfo("huameng",20);
showinfo("langzihuameng",30);
showinfo(25,0);

效果如下所示:

JavaScript超强速成计划(一)【基础语法详解】(学习笔记)
初步探索变量
2.运算符
3.条件判断
 4.循环遍历

 有返回的方法:

<p >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/>");