一、javascript基础初级
1、三种JavaScript引入页面的方式
1、内嵌式
2、外链式
html文件中:
<script src="script.js" type="text/javascript"></script>
js文件中:
alert("外链式!");
3、行内式(js的行内式写法依附于事件)
<button onclick="alert('行内式');">按钮</button>
2、js的注释
//单行注释
/*
多行注释
多行注释
多行注释
*/
3、定义变量
var 变量名 = 数据;
var 变量名1 = 数据1,变量名2=数据2, ....;
var a = 10;
var b = 20, c = 30;
变量命名规范:
1、由字母、数字、下划线和美元符号$组成,不能由数字开头
2、区分大小写, 即odiv和Odiv是了两个不同的变量
3、避开关键字
4、函数的定义和调用:
函数定义的格式:
function 函数名(){
函数体
}
函数调用的格式:
函数名()
函数的参数和返回值:
function mySum(a, b){
return a + b;
}
var ret = mySum(10, "20");
alert(ret);
5、变量作用域
注意:定义变量一般都用var关键字
var a = 10; //全局变量,在函数外部定义的变量,可以在函数内外部使用
// alert(a);
function func() {
// alert(a);
var a = 20;
alert(b); //局部变量,没在函数内部定义的变量,默认只能在函数内部使用
}
func();
alert(b); //函数内部定义的变量,不能再外部直接使用
6、条件判断语句
单条件判断语句:
if(条件){
条件成立时候执行的代码
}else{
条件不成立时候执行的代码
}
多条件判断语句:
if(条件1){
条件1成立时候执行的代码
}else if(条件2){
条件2成立时候执行的代码
}else if(条件3){
条件3成立时候执行的代码
}else if(条件4){
条件4成立时候执行的代码
}else{
条件不成立时候执行的代码
}
7、运算符:
// var a = 10;
// if(a==="10"){
// alert("ok");
// }
// == 判断值是否相等,不判断数据类型
// === 三等号(全等号) 判断值是否相等,并且会判断数据类型, 数据类型相同,才算相等
var b = 1;
// alert(b>=90 && b<=100);
// alert(b<90 || b>100);
alert(!true);
8、js中获取元素的方法
/*js 可以对页面中的数据在前端进行操作,操作数据之前需要先获取元素:
* document.getElementById("odiv"); 表示获取id是odiv的这个元素
* */
var odiv = document.getElementById("odiv"); /*这样就表示选择到id是odiv的这个标签*/
9、js控制元素文本和css样式
/*
选择到标签之后,通过 .innerHTML来修改标签中的html
*/
odiv.innerHTML = "javascript";
/*
选择到标签之后,通过 .style.css样式属性名 来修改标签的样式属性
*/
odiv.style.width = "300px"; //修改元素宽度为300px
odiv.style.fontSize = "20px"; //修改元素字体大小为20px
10、js的入口函数
如果书写的js代码放在<head></head>标签中,
考虑到由于页面标签还没读取到,导致找不到标签的问题,
我们会用window.onload来作为入口函数,
表示等到页面加载完毕,才来执行function中大括号里的代码:
window.onload = function(){
var odiv = document.getElementById("odiv");
odiv.innerHTML = "javascript";
}
总结:
window.onload是页面所有元素加载完成的事件,
可以对它设置函数从而等页面加载完后,再执行这个函数里面的代码
二、javascript基础高级
1、js中for循环
循环语句是用来重复执行某段代码的
需求:实现循环弹出3次OK
(了解)while循环
var i = 0;
while(i<3){
alert("ok"+i);
i++;
}
(了解)do...while循环
var i = 0;
do{
alert("ok"+i);
i++;
}while(i>3)
注:do...while语句即使条件不成立,大括号的语句也至少会执行1遍
(最常用)for循环
for(var i=0; i<3; i++){
alert("ok"+i);
}
2、数组
数组的作用:保存多个数据
定义的格式:
var arr = new Array(10, 20, 30, "abc", true); //如果参数只是一个数字,则表示的是数组的长度
或者:
var arr = [10, 20, 30, "abc", true];
通过 数组名[下标] 获取对应的数据 例如: arr[1] 的值为10
数组名.length 得到数组的元素的个数 例如: arr.length 的值为5
arr[1] = 100; //修改下标为1的元素的值为100
alert(arr); //修改后arr为[10, 100, 30, "abc", true]
3、数组的操作
var arr = [10, 20, 30, "abc", true];
增:
arr.push(50); // 数组.push(数据) 往数组最后追加一个数据
alert(arr);
删:
var ret = arr.pop(); //数组名.pop()把数组最后一个数据删除,并且返回这个被删除的数据
alert(arr); 10,20,30,"abc",true,50
alert(ret); //true
数组名.splice(要操作的第一个元素的下标,删除多少个元素,要增加的元素)
问题:
1、在下标为1的位置插入888这个数据
2、删除下标为2的数据
3、把20,30,abc换成 7,8,9,10
arr.splice(1, 0, 888); //在下标为1的位置插入888这个数据,10,888,20,30,abc,true (arr.splice(指定下标, 0, 数据)可以在指定位置增加元素)
arr.splice(2,1); // 删除下标为2的数据,10,20,abc,true (arr.splice(指定下标, 1)可以删除指定位置的元素)
arr.splice(1,3,7,8,9,10); // 10,7,8,9,10,true
// 获取元素在数组中的下标 ,可以用来判断元素在这个数组中
数组名.indexOf(元素); 数组名.arr.indexOf(元素)
var i = arr.indexOf(30); //获取元素在数组中第一次出现时候的下标
alert(i); //2
注:如果数组中没有这个元素,则.indexOf()方法返回-1
数组的遍历:
var arr = [10, 20, 30, "abc", true];
for(var i=0;i<arr.length;i++){ //i是每个元素的下标
alert(arr[i]);
}
4、字符串拼接
var name = "python";
var age = 28;
var job = "AI";
alert(name + "的年龄是"+ age +",工作是" + job);
var str1 = "30";
var num1 = 20;
var num2 = 50;
alert(str1+num1+num2); //302050
alert(num1+num2+str1); //7030
var str1 = "30.9";
var num1 = 20;
alert(parseInt(str1) + num1); //50 parseInt() 转化成整数(去掉小数点和后面的小数位)
alert(parseFloat(str1)+num1); //50.9
// 判断元素是不是包含某个子串
var str1 = "hello world";
alert(str1.indexOf("e")); //2 获取字符e在字符串中第一次出现的下标,如果没有出现过返回-1
5、定时器
作用: js提供了定时器,可以用来做页面的动画效果
1、单次定时器
setTimeout(参数1,参数2)
参数1是函数,参数2是毫秒数,表示多少毫秒之后执行参数1函数里面的代码,只执行1次
1秒等于1000毫秒
例如:
function my_alert() {
alert("ok!");
}
setTimeout(my_alert, 2000); 表示多少秒之后执行boom函数里面的代码,只执行1次
也可以直接这么写:
setTimeout(function(){
alert("ok!");
}, 2000);
2、多次定时器
setInterval(参数1,参数2)
参数1是函数,参数2是毫秒数,表示每隔多少秒执行参数1函数里面的代码,不停地执行
function my_alert() {
alert("ok!");
}
setInterval(my_alert, 2000); 表示每隔多少秒执行boom函数里面的代码,不停地执行
也可以直接这么写:
setInterval(function(){
alert("ok!");
}, 2000);
3、清除定时器
//指定清除(关闭)oTimer这个循环定时器,oTimer里面的代码就会停止执行
cleatInterval(指定定时器)
例如:
var oTimer = null;
oTimer = setInterval(my_alert, 2000);
cleatInterval(oTimer)