JavaScript
概述
属于原生JS和Java没有任何半毛钱的关系,是在浏览器环境下运行的一种脚本语言
可以用来和数据进行交互,分为界面交互和数据交互
界面交互
指的是当触发某种事件的时候, 如:点击按钮,鼠标移动
数据交互
指的是ajax发起http请求获取数据
常见的使用三种方式(和CSS是方式一样)
行内式 基本不常用
外链式 <script type="text/js" src = "想要连接的JS的文件" ></script>
嵌入式 <script> 内嵌代码块 </script>
常见的输出
alert("hello word") 弹框的形式显示
console.log("hello word") 按F12/Fn+F12在浏览器的console下可以检查输出
console.dir("hello word")
console.table("hello word")
document.wirte("hello word") 直接显示在浏览器页面上
JS操作CSS的属性时注意
当事件触发时,修改属性时注意
全部是小写的直接用
xxx -> style.xxx = "";
中间存在"-" 将"-"后面的第一个单词大写
xx-xx -> style.xxXx = "";
class 属性较为特殊
class -> style.className = "";
<script>
window.onload = function()
{
var oBtn = document.getEleementById("btn");
var oDiv = document.getEleementById("div");
oBtn.onclick =function()
{
oDiv.style.textSize = 25px;
oDiv.style.lineHight = 20px;
}
}
</script>
变量的命名规则和定义变量
严格区分大小写
第一个字母必须是 字母/下划线/$
其他字母可以是字母 下划线 /美元/数字
支持匈牙利命名规则 第一个字母代表数据类型 nnum stemp
var nnum = 12;
var nnum = "12";
var stemp = "aa";
变量的作用域
函数的调用 要往回找 函数的定义阶段
首先在函数内部找 -> 内部找不到就往外找,直到找到全局为止
全局变量和局部变量
全局变量 num=10;
局部变量
所有用var定义出来的变量都是局部的
var num = 10;
作用域和其他的语言基本相同,看有作用域的变量是全局变量还是局部变量,全局变量是对这个.html都有效,局部变量只在当前函数下有效
函数
jS中的函数具备预解析功能
函数的调用可以放在定义函数的上面,
普通函数
eg:
move()
定义函数
function move(参数位置)
{
//执行的代码块
document.write("ok");
}
匿名函数
函数没有名字
var text = function(x1,x2)
{
return x1 + x2;
]
封闭函数
如果是普通的函数的话,如果有多个同名函数,只有一个可以被调用,但封闭函数可以做到让每个同名函数都可以执行里面的代码块
<script>
普通函数
function func()
{
alert(1);
}
func()
第一种封闭函数
;(function()
{
function func()
{
alert(2);
}
func()
})()
封闭函数的语法结构
第一种封闭函数的语法结构
!(function()
{
alert(3);
})()
第二种封闭函数的语法结构
~(function()
{
alert(4);
})()
</script>
常见的数据类型
number
int/float
boolean
true/false
string
undefined
未定义/未声明的
object
有空对象 var ret = null
有数据的对象(触发事件)
入口函数
在hender标签中进行定义
<header>
<script>
window.onload = function()
{
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("div");
oBtn.onclick =function()
{
oDiv.style.textSize = 25px;
oDiv.style.lineHight = 20px;
}
}
</script>
</header>
常见的鼠标的事件
onclick 当点击时执行什么
onmouseover 当鼠标滑过时执行什么
onmouseout 当鼠标离开时执行什么
oBtn.onclick = function()
{
// 执行的代码块
oDiv.style.display = "block";
}
js中的基本操作
num = prompt("请输入字符串"); //相当于python中的 input()
判断数据类型
typeof()
&& || ! >>(往右移几位就除以2的n次方) <<(往左移几位就乘以2的n次方)
"==" 判断数值是否相等(不管数据类型是什么) 相对相等
"===" 判断数字是否相等 + 数据类型 绝对相等
条件语句
if(条件语句){代码块}
else if(条件语句){代码块}
else{代码块}
循环
while循环
var i=0;
while(i>10)
{
// 执行相应的代码块
i++;
}
for循环
for(var i=0;i<10;i++)
{
//执行相应的代码块
；
}
switch case 循环
var date = prompt("请输入内容")
switch(date):
{
case 1:
document.write("今天是星期一");
break;
case 2:
document.write("今天是星期二");
break;
case 3:
document.write("今天是星期三");
break;
case 4:
document.write("今天是星期四");
break;
case 5:
document.write("今天是星期五");
break;
case 6:
document.write("今天是星期六");
break;
case 7:
document.write("今天是星期日");
break;
default:
document.write("没有你要查找的这个星期数");
}
数组
定义数组的两种方式
var arr = [] //定义一个空数组
var arr = new Array(1,2,3) //里面包含1,2,3三个元素
操作数组常用的方法
length 获取数组的长度
push() 在末尾增加一个元素
pop() 删除末尾的元素
splice()
splice(位置下标,删除元素的位置,增加元素的位置)
splice(位置下标,删除元素的位置) 只删除不增加
splice(位置下表) 从第几个位置后,该位置后面的所有元素都删除
reserve() 数组中的元素翻转
join() 将数组转换为字符串
ret = arr.join("-")
indexof() 返回元素中第一次出现的索引值
数组去重
var arr = [11,22,33,88,22,44,55,44,22,,66];
var new_arr = [];
for(var i=0;i<arr.length;i++)
{
// document.write(arr[i]);
// 去重的条件
if(arr.indexOf(arr[i]) == i)
{
new_arr.push(arr[i]);
}
}
document.write(new_arr);
字符串
常用的操作方法
parseInt() 去掉小数点后的的值
var num = 1.2
alert(parseInt(num))
-> 1
parseFloat()
var num = 1.2
alert(parseInt(num))
-> 1.2
split() 将字符串进行切割
indexof() 返回元素中第一次出现的索引值
substring(start,end) 左闭右开
定时器
setTimeout() 只能执行一次的定时器
setInterval() 可以进行无限次代码执行
clearTimeout()
clearIntveral()
两个定时器的参数相同
var result = null;
result = setIntveral(function()
{
;// 里面需要执行的代码块
},50);
clearIntveral(result)
result = null;
内置的对象和方法
自定义对象
{name: "xiaoqiang", age: 18}
-键不用加引号,加上也不出错
-值如果是字符串必须写双引号
new关键字形式
内置的Date对象 --> Python中的内置模块
var oDate = new Date();
JSON对象
字符串转对象 --> obj = JSON.parse(string)
对象转字符串 --> s = JSON.stringify(obj)
Math对象
Math.ceil(); //向上取整。
Math.floor(); //向下取整。 -->
<!-- Math.round(); //四舍五入。
Math.random(); //0.0 ~ 1.0 之间的一个伪随机数。【包含0不包含1】 //比如0.8647578968666494
Math.ceil(Math.random()*10); // 获取从1到10的随机整数 ，取0的概率极小。
Math.round(Math.random()); //可均衡获取0到1的随机整数。
Math.floor(Math.random()*10); //可均衡获取0到9的随机整数。
Math.round(Math.random()*10); //基本均衡获取0到10的随机整数，其中获取最小值0和最大值10的几率少一半。
因为结果在0~0.4 为0，0.5到1.4为1...8.5到9.4为9，9.5到9.9为10。所以头尾的分布区间只有其他数字的一半。
RegExp(正则)
两种定义方式:
new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$")
/new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$")/
匹配模式
g 全局
i 忽略大小写
正则表达式中间不能加空格
.test() --> .test(undefined) --> .test("undefined")
全局模式下会有一个lastIndex属性