JavaScript基础

JavaScript基础

• • • JavaScript简介
    • • 使用方法
      • • 行内式
        • 内嵌式
        • 外链式
    • 语法总览
    • • 注释
      • 定义变量
      • 数据类型
      • • 内容输出
        • 查看数据类型
      • 函数
      • 条件语句
      • • $==$与$===$
        • 逻辑运算符
      • 操作HTML元素
      • • 获取元素对象
        • 获取、修改元素属性
        • 获取、修改元素内容
      • 数组
      • • 创建
        • 获取长度
        • 索引
        • 尾插与尾删
        • 头插与头删
        • 获取索引
        • 切片
        • • slice()
          • splice()
      • 循环语句
      • • • 遍历数组
      • 字符串拼接
      • 定时器
      • • 延时计时器
        • 间隔计时器
        • 销毁计时器

---

JavaScript简介

JavaScript是一种能够运行在浏览器端的的解释型脚本语言。它的主要功能是实现网页与用户间的交互功能。

html:构建网页元素

css:赋予元素样式

javascript:实现交互事件

javascript文件的后缀名是.js

使用方法 行内式

直接在元素标签内用js代码定义不同事件的结果。

• onclick="alert('弹窗广告！')";中的alert('弹窗广告！') 即为js代码。代表按钮一旦被点击，就会弹出弹窗提示

内嵌式

在标签内书写

外链式

单独写成一份文件。用link元素引入。

• src为文件的url

---

语法总览

以下只稍微提及与python不同之处。相同概念可以大概类比。

注释

//单行注释

定义变量

var variable=value;  
let variable=value;  
const variable=value;

• js大部分语句都以分号标志结束。
• js为弱类型语言，定义变量时不需要声明变量类型。（Python也是)
• var是普通变量，作用域为全局或函数局部
• let是块变量，作用域是代码块。({})
• const是常量，赋值后不可改变，作用域也是代码块（{}）

数据类型

类型	含义	示例
number	数字类型	var num=1; var quarter=0.25;
string	字符串类型	var str=‘hello world’;
boolean	布尔值	var yes=true; var no=false;
undefined	未定义值	var a; //定义变量时未赋初值
null	空对象	var b=null;
object	对象	var nums=new Array(1,2,3); var person={ name=“张三”, age=16 };

内容输出

console.log("...")   //相当于Python的print,在控制台输出内容
alert("...")  //弹窗输出

查看数据类型

typeof(variable);

如：

var num=1;
console.log(num,typeof(num));
var str="hello world";
console.log(str,typeof(str));
var yes=true;
console.log(yes,typeof(yes));

函数

function funcName (形参1,形参2....){   //函数定义
    ...
    return variable;
}   //没必要加分号

var result=funcName(实参1,实参2....); //函数调用  

如：

function addTwo(num1,num2){
    var sum=num1+num2;
    return sum;
}

var result=addTwo(1,2);
console.log(result); //3

条件语句

//if单分支
if(条件){
    条件成立执行的代码块
}

//if-else双分支
if(条件){
    条件成立执行的代码块
}else{
    条件不成立时执行的代码块
}

//if-else if-else多分支
if(条件1){
    条件1成立执行的代码块
}else if(条件2){
    条件2成立执行的代码块
}
...
else if(条件n){
    条件n成立执行的代码块
}
else{
    条件n不成立执行的代码块
}

//switch语句
switch(表达式) {
     case value_1:
        表达式值为value_1执行的代码块
        break;
     //....
     case value_n:
        表达式值为value_n执行的代码块
        break;
    
     default:
        都不为则执行的代码;
} 

= = == ==与 = = = === ===

• ==判断相等时，会将左右两个值转化为相同类型再进行比较。如"12"==12为true
• ===判断相等时，需要判断类型和值是否都相等。如"12"===12为false
• !=与!==同理

逻辑运算符

符号	含义
&&	与
||	或
！	非

如：

function gradeShow(grade){
    //if单分支
    if(grade>60){
        console.log('恭喜你及格了！');
    }
    
    //if-else双分支
    if (grade>60){
        console.log('你挺不错的！');
    }else{
        console.log('明年再战吧！');
    }
    
    //if-else if-else多分支
    if (grade>80){
        console.log('优秀！');
    }else if(grade>60){
        console.log('还好！');
    }else{
        console.log('要加油了！');
    }
    
    //switch语句
    switch(grade){
        case 100:
            console.log('100分！！！');
            break;
        case 60:
            console.log('60分！！！');
            break;
        case 0:
            console.log('0分！！！');
            break;
        default:
            console.log(grade+'分');
    }
}

gradeShow(0);

gradeShow(100);

gradeShow(59);

操作HTML元素 获取元素对象

var elem=document.getElementById("idName");

• document是js内置的对象之一，它代表使用该代码的html文档对象。
• getElementById方法能够通过元素的id名定位到特定元素。
• 如果获取成功，elem将接收返回的元素对象;如果没有获取成功，将返回none;

html文件从头加载到尾，如果直接将js代码放至head元素中，将会获取失败。解决方法之一是将js代码放至html文件最底部，但并不值得推荐。另一种解决方法是，给window.onload事件赋一个函数对象。当html页面全部加载完成后，将自动调用该函数。如下所示:

获取、修改元素属性

和Python对象一样，通过.访问和修改对象的属性。

如:

• js元素对象的属性名一般与html元素属性名保持一致。但class变为了className;style中的font-size等有连字符的样式属性变为峰驼命名法fontSize.

获取、修改元素内容

var content=elem.innerHTML;

• 通过元素对象的innerHTML 进行访问。

如:

    


    

        

            一按我帮你
        
    

数组

JavaScript里的数组对象和Python里的列表很相似，都是一系列有先后顺序的数据(类型可以不同)的排列。

创建

var arr1=new Array(1,2,3,"hello");  //实例化对象的方式创建
console.log(arr1);
//[1,2,3,"hello"]

var arr2=[4,5,6,"world"];   //[]直接创建
console.log(arr2);
//[4,5,6,"world"]

获取长度

通过数组对象的length属性进行获取。

var nums=[1,2,3,4,5];
console.log(nums.length);
//5

索引

• 和Python一样，索引从0开始。
• 和Python不同的是，没有负索引。也不能直接切片。

var nums=[1,2,3,4,5];
console.log(nums[3]);
//4

尾插与尾删

var nums=[1,2,3,4,5];

nums.push(6);  //尾插
console.log(nums);
//[1,2,3,4,5,6]

var pop_num=nums.pop();  //尾删
console.log(nums,pop_num);
//[1,2,3,4,5] 6

头插与头删

var nums=[1,2,3,4,5];

nums.unshift(6);  //头插
console.log(nums);
//[6,1,2,3,4,5]

var shift_num=nums.shift();  //头删
console.log(nums,shift_num);
//[1,2,3,4,5] 6

获取索引

var nums=[1,2,3,4,5];
console.log(nums.indexOf(3));
//2
console.log(nums.indexOf(6));
//-1

• 如果数组中存在要求索引的数据项，那么返回对应索引。如果不存在，返回-1

切片 slice()

var sub=arr.slice(i);  //相当于Python的arr[i:arr.length+1]
var sub=arr.slice(i,j);  //相当于Python的arr[i:j]

• 不会影响原数组

如:

var nums=[1,2,3,4,5];
console.log(nums.slice(2));
//[3,4,5]
console.log(nums.slice(2,4));
//[3,4]

splice()

var sub=arr.splice(i,n,data1,data2...);

• 会影响元素组:从arr[i]开始删除n个数据，并插入data1,data2…。返回删除的n个数据组成的数组。
• 如果只传入一个参数i，那么将删除从arr[i]以及后面的所有元素

如:

var nums=[1,2,3,4,5];
console.log(nums.splice(2),nums);  //一个
//[3,4,5] [1,2]
console.log(nums.splice(0,1),nums);   //不指定data，直接删除
//[1] [2]
console.log(nums.splice(0,1,1,2,3,4,5),nums)  //从arr[0]开始删除1个元素，并依次插入1,2,3,4,5
//[2] [1,2,3,4,5]

循环语句

//for循环
for(初始化操作;循环条件;更新操作){
	循环代码块;
}

//for-in循环
for (索引变量 in 可迭代数据结构(数组等) ){
    循环代码块;
}

//while循环
初始化操作;
while(循环条件){
    循环代码块;
    更新操作;
}

//do while循环
初始化操作;
do{
    循环代码块;
    更新操作;
}while(循环条件)

遍历数组

var nums=[1,2,3,4,5,6]

//for循环
for(var i=0;i
	console.log(nums[i]);
}

//for-in循环
for (i in nums){
    console.log(nums[i]);
}

//while循环
i=0;
while(i
    console.log(nums[i]);
    i++;
}

//do while循环
i=0;
do{
    console.log(nums[i]);
    i++;
}while(i 
字符串拼接 
字符串可直接用+进行拼接。
支持+=
数字也可用+与字符串进行拼接。发生了隐式类型转换。
 
var str1="hello";
var str2="world";
str1+=" ";
var str=str1+str2;
console.log(str);
//hello world
var str666=str+666;
console.log(str666);
//hello wprld666
 
定时器 
定时执行某些代码。
 
延时计时器 
setTimeout(func,delay,param1,param2...);
 
delay代表延迟的时间，以毫秒为单位。
delay毫秒后，用参数param1,param2…执行函数func
 
如：
 

    


    



 
间隔计时器 
setInterval(func,delay,param1,param2...);
 
delay代表延迟的时间，以毫秒为单位。
每隔delay毫秒，用参数param1,param2…执行函数func
 
如：
 

    


    



 
销毁计时器 
创建计时器时会返回一个计时器id,通过计时器id可以销毁计时器。
 
var timer_id_1=setTimeout(func,delay,param1,param2...);
var timer_id_2=setInterval(func,delay,param1,param2...);

clearTimeout(timer_id_1);
clearInterval(timer_id_2);