JavaScriptb笔记
JavaScipt是什么
JavaScipt是运行在浏览器上的脚本语言,主要用于解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScipt是由浏览器来执行的。
JavaScipt基础
JavaScipt嵌入页面的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js01基本使用</title>
</head>
<body>
<!--
JavaScipt是浏览器解释执行的。
1、轻量级脚本语言
2.可以嵌套到html语言
3.是解释性语言、
使用方式:
1.页面script标签嵌入。 放到body中
2.外部引用 通过body中的 <script src="./1.js" ></script> 如果使用src属性,那么改标签内的就无效
3.行间事件。
-->
<!-- <script type="text/javascript">
//单行注释 /* 多行注释*/
//弹框
alert("js使用成功")
</script>
-->
通过script标签的src属性来引入外部js文件。
<script type="text/javascript" src="./1.js">
注意:如果使用srcipt标签外部引入js文件,那么此标签中就不能再写js程序,
它会不执行。
</script>
行间样式:
<div oneclick="alert('行间样式生效')"></div>
<div onclick="alert('行间样式初')"></div>
</body>
</html>
js每行结束要加分号,js默认以换行符为语句结束,但是一般还是要注意加;
JavaScipt变量命名
定义变量用关键字var,不使用var关键字定义全局变量在严格模式下将会执行错误“use strict".
<body>
<script type="text/javascript">
var test=1;
js同时声明多个变量,中间用,号隔开
var test1=1, test2=3
</script>
</body>
变量命名规范与一般的编程语言一样:
由数字字母下划线$组成
不能以数字开头
区分大小写。
不能用关键字。
JavaScipt数据类型及类型转换
js一共有六种基本数据类型:
typeof函数获取一个变量的类型。
boolean: true false
number : 数值类型
string: 字符串类型
object 对象类型
function: 函数类型
undefined:
<body>
<script type="text/javascript">
var B=true; //js中的布尔值是小写。
// alert(typeof(B));
// 将结果打印到控制台
console.log(typeof(B));
//数值类型: 包含整数 小数 二进制数 八进制数 十六进制
var num=12;
var num1=12.1;
//二进制数是以0b开头。
//十六进制是以0x开头 //八进制是以0开头
// var num2=0b10; //var numn=0b10;
var num2=NaN; //NaN 不是数 。
//字符串类型: 只要是用单引号或者双引号引起来的字符,都是字符串类型。.
//单双引号可以相互嵌套使用
var str=‘123’;
var str1="true";
//对象类型。 对象 数组 null
var obj={name:"leb",sex:18};
console.log(obj);
var list=[1,2,3,4]; //数组 也是属性对象类型
//函数数据类型: function
var Func=function(){
console.log("这是一个函数");
}
//undefind 未定义 当我们定一个变量不给值的时候,他的类型就是unfined类型
var un=undefind;
console.log(num,typeof(num));
</script>
</body>
数据类型转换:
<body>
<script type="text/javascript">
//数值类型转换 Number() praseInt() 和 praseFloat()
//注意: 当字符串中包含任意一个非数据值表示的字符时。
// Number() 返回NaN praseInt praseFloat() 从头往后读,如果碰到非
//数值表示的字符串,后面的内容就会舍去。
//当字符串一开始就是非数值类型的时候,那么返回NaN;
var num="123";
//把字符串转换为整形
var res=Number(num);
var res1=parseInt(num)
var res2=parseFloat(num)
console.log(res,typeof(res))
//isNaN()检测一个数据是否是一个数。 如果是数返回false 如果不是数
//返回true.
var num="1";
console.log(num,isNaN(num))
//boolean类型
// Boolean()转换成布尔值为false的情况
//字符串转布尔值 字符串转布尔值 为false 空字符串
//数值类型转布尔值: 0的时候为false NaN 0.0
//对象类型转布尔值 null
//string(value) 把给定的值转为字符串
var str="1";
console.log(Boolean(str));
//所有类型都能转字符串
</script>
</body>
JavaScript运算符
+ - * / a++ a--
+ 字符串连接,当两边的值都为数值类型的时候做算数运算’ 当两边有一个为字符串的时候就做字符串链接。
= += /= < > >= <= === != !==
===全等 var B = 1==‘1’ true 系统帮我们自己做了数据类型转换。
=== 在比较时候,两边除了值相等,类型也必须相等。
!==
&& || !
?:
JavaScript条件判断
if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
var list1=[1,2,3]
for(i in list1){
console.log(i,list1[i])
}
arr={name:"leb”,age:18,sex:"man"}
for(i in arr){
console.log(i,arr[i])
}
while跟c语言的用法一样。
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
JavaScript元素获取与操作
一般把script标签写到body中最后的位置,获则用window.οnlοad=function(){}; 来包含 js代码
window是js中最大的对象,代表窗口
on 当,,,,时候
onload 当页面加载完成之后,才会调用后面函数。
<body>
<!--
可以使用内置对象document上的getElementById 方法来获取页面上
设置了id属性的元素,获取到的是一个html对象,然后将它赋值给
一个变量。
//js可以通过style属性来给元素设置样式。 样式是加在行间的(js添加的样式优先级高)
// oDiv.style.width="200px";
oDiv.style.height="200px";
oDiv.style.background="red";
oDiv.style.fondSize="30px";
// 注意在设置样式的时候,如如果有些属性属于双拼词。font-size要把中横杆去掉,第二个单词首字母大写。
//通过js获取元素的样式。 只能获取行间样式
-->
//js操做元素的文本内容 innerHTML 注意会覆盖原来内容 一般用来设置内容可以解析标签, 获取内容时会连同标签一起获取。
//innerText 解析不了标签。 获取元素的时候获取纯文本,一般获取文本内容// oDiv.innerHTML="222"
//oDiv.innerHTML="<h1>666</h1>"
//innerHTML 获取元素中的内容
//表单中元素的操作
//获取表单的值
JavaScript定时器
通过js我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称为计时事件
定时器在javascript中的作用
1制作动画
2.异步操作
<body>
<script type="text/javascript">
/*1.单次定时器: setTimeout(回调函数,时间毫秒) 1s后执行这个函数
setTimeout(function(),1000) 只执行一次
指定等待时间之后执行特定的代码块。
2.循环定时器:
setInterval() 不会停止。
格式:setInterval(回调函数,时间毫秒)
间隔指定时间执行一次特定的代码块。
3.清除定时器: 我们启动定时器之后,会返回一个标识符,通过这个标识符来清除定时器。
var cc=setInterval(demo,1000)
clearInterval(cc) 清除多次定时器
clearTime(cc) 清除一次定时器
*/
function demo(){
console.log("定时器执行")
}
//setTimeout(demo,3000)
// setTimeout(function(){
// console.log("单次定时器启动")
// },5000)
setInterval(demo,3000)
</script>
</body>
JavaScript的动画
<body>
<script type="text/javascript">
/*1.单次定时器: setTimeout(回调函数,时间毫秒) 1s后执行这个函数
setTimeout(function(),1000) 只执行一次
指定等待时间之后执行特定的代码块。
2.循环定时器:
setInterval() 不会停止。
格式:setInterval(回调函数,时间毫秒)
间隔指定时间执行一次特定的代码块。
3.清除定时器: 我们启动定时器之后,会返回一个标识符,通过这个标识符来清除定时器。
var cc=setInterval(demo,1000)
clearInterval(cc) 清除多次定时器
clearTime(cc) 清除一次定时器
*/
function demo(){
console.log("定时器执行")
}
//setTimeout(demo,3000)
// setTimeout(function(){
// console.log("单次定时器启动")
// },5000)
setInterval(demo,3000)
</script>
</body>
JavaScript的函数
<script type="text/javascript">
//1.使用function关键字来定义函数,
//2,。函数不调用不执行,
//这种方式优先级比较高,在哪个位置调用都没问题。
function demo(){
alert("函数被调用了")
}
//js先扫描一次,可以把调用放在定义前面。
demo()
//2。匿名函数
var demo1= function(){
alert("这是匿名函数")
}
demo();//匿名不可以的放在上面。 函数只能在函数体下方去调用。
//函数参数问题
//在函数调用的时候,不传实参函数依然可以执行,形参返回undifiend
//多串参数,多余的参数会被省略,
//可以在函数内部可以通过arguments这个属性来获取所有参数,类型为数组
function demo(a,b){
console.log(a,b);
console.log(arguments); //是个数组,可以得到所有的参数
for (i in arguments){
console.log(i,arguments[i]) //0 1
}
}
var a=1,b=2;
demo(a,b,3,4)
// 变量作用域:
/*
全局变量: 在函数外部声明的变量是全局变量,
局部变量: 在函数内部声明的变量是局部变量。 跟c语言的一样,不跟python一样, 就近原则 ,
如果函数内部有同名的局部变量,那么函数内部优先使用局部变量的值。
全局变量的作用域发生了改变,变成了局部变量,局部变量的值发生变化不会影响我们的全局变量。
*/
`
JavaScript的对象
<script type="text/javascript">
//1.通过系统内置的object()去 定义自己的对象
var ob=nwe Object();
ob.name="张三";
ob.sex="李四"
ob.say=function(){
}
//2,直接定义对象。
var Obj={
name='张三',
sex:"男",
age:18,
say:function(){
console.log("你吃了吗")
}
}
//3.通过构造函数来自定义对象。
function pen(name,sex){
//this代表当前对象,
this.name=name;
this.sex=sex;
this.say=function(){
}
}
//实例化对象
var zhang=new pen("zhang","男");
for ( i in zhang){
console.log(i,zhang[i])
}
console.log(zhang.constructor)
var arr=[1,2,3];
console.log(arr.constructor);
//数组类型, 数组里面的数据可以是不同类型的。
//1.定义一个数组。
var arr=new Array(1,2,3,4);
//2、var arr=['2'.4,6];
//获取数组中的数据的方法: arr.length;
//获取数组索引为1的元素,
console.log(arr1[1]);
//修改arr数组当索引为1的元素。
arr[0]=1;
//push(9,8) pop()后面加删
//unshift() 和 shift()从数组前面增加或删除成员,
//unshift(1,2)是增加,
//splice() z在数组中增加或删除元素。
arr.splice(1) // 如果只有一个参数,那就是从第一个元素之后开始删除剩下、所有的元素
// (1,2)如果传了两个参数,那就是从指定个元素之后删除几个元素,第二个参数就是指定删除的个数,
//第三个参数是用来替换删除之后的元素。 之后的所有参数都是用来替换删除的元素的,
//多维数组: 多维数组
var arr2=[1,23,['1','2'],['a','c']]
</script>
<script type="text/javascript">
//四舍五入
var res=Math.round(5.87);
//获取最大值 最小值也一样
var res=Math.max(120,3,453,53);
//获取最小值
//获取绝对值
var res=Math.abs(-1);
//向下取整
var res=Math.floor(1.3);
//向上取整。
var res=Math.ceil(1.1);
//密运算
//pow(2,3); sqrt(9) 开平方。
//random 返回一个0-1之间的随机数
//但是不会取到0.
// Math.floor(Math.random() *6)
var res=Math.random();
</script>
js的基本用法这些就足够用了,下面学习jquery