js文件后缀的代码格式,js后缀文件有什么用
JavaScript基础
JavaScript简介
使用方法
行内式内嵌式外链式语法总览
注释定义变量数据类型
内容输出查看数据类型函数条件语句
$==$与$===$逻辑运算符操作HTML元素
获取元素对象获取、修改元素属性获取、修改元素内容数组
创建获取长度索引尾插与尾删头插与头删获取索引切片
slice()splice()循环语句
遍历数组字符串拼接定时器
延时计时器间隔计时器销毁计时器
JavaScript简介
JavaScript是一种能够运行在浏览器端的的解释型脚本语言。它的主要功能是实现网页与用户间的交互功能Python解释器的安装步骤。
html:构建网页元素
css:赋予元素样式
java:实现交互事件
java文件的后缀名是.js
使用方法
行内式
直接在元素标签内用js代码定义不同事件的结果。
onclick="alert('弹窗广告！')";中的alert('弹窗广告！') 即为js代码。代表按钮一旦被点击，就会弹出弹窗提示
内嵌式
在<> 标签内书写
< type="text/java">
alert('ok！');
外链式
单独写成一份文件。用link元素引入。
< type="text/java" src="myjs.js">
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);
/*
明年再战吧！
要加油了！
0分！！！
*/
gradeShow(100);
/*
恭喜你及格了！
你挺不错的！
优秀！
100分！！！
*/
gradeShow(59);
/*
明年再战吧！
要加油了！
59分
*/
操作HTML元素
获取元素对象
var elem=document.getElementById("idName");
document是js内置的对象之一，它代表使用该代码的html文档对象。getElementById方法能够通过元素的id名定位到特定元素。如果获取成功，elem将接收返回的元素对象;如果没有获取成功，将返回none;
html文件从头加载到尾，如果直接将js代码放至head元素中，将会获取失败。解决方法之一是将js代码放至html文件最底部，但并不值得推荐。另一种解决方法是，给window.onload事件赋一个函数对象。当html页面全部加载完成后，将自动调用该函数。如下所示:
< type="text/java">
window.onload=function(){
var Btn=document.getElementById("Btn");
alert(Btn);
} //匿名函数，只用一次
获取、修改元素属性
和Python对象一样，通过.访问和修改对象的属性。
如:
< type="text/java">
window.onload=function(){
var Btn=document.getElementById("Btn");
console.log(Btn.value); //获取属性
Btn.value="按了也没用";
Btn.style.background="red"; //设置、修改样式属性
}
js元素对象的属性名一般与html元素属性名保持一致。但class变为了className;style中的font-size等有连字符的样式属性变为峰驼命名法fontSize.
获取、修改元素内容
var content=elem.innerHTML;
通过元素对象的innerHTML 进行访问。
如:
< type="text/java">
window.onload=function(){
var Btn=document.getElementById("Btn");
console.log(Btn.innerHTML); //获取元素内容
Btn.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 如： < type="text/java"> function gameTimeOut(){ alert("由于您未成年，1小时后将强制下线！"); } window.onload=function(){ setTimeout(gameTimeOut,2000); } 间隔计时器 setInterval(func,delay,param1,param2...); delay代表延迟的时间，以毫秒为单位。每隔delay毫秒，用参数param1,param2…执行函数func 如：
< type="text/java">
function studyNow(){
alert("别玩了，学习去！");
}
window.onload=function(){
setInterval(studyNow,10000);
}
销毁计时器
创建计时器时会返回一个计时器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);
