什么是javascript:简称js,是运行在【js解释器】的【解释型】【弱类型】【面向对象】脚本语言
1、js解释器:不需要安装:
1、浏览器自带
2、后续在node.js服务器端 - 安装一个独立的js解释器
2、解释型:运行之前需要不需要检查语法是否正确,直接运行,碰到错误就停止运行,比如:javascript、php... - 宽松
编译型:运行之前需要检查语法是否正确,如果不正确,直接不能运行,比如:java、c等 严格
3、js特点:
1、代码可用任何编辑器编写
2、解释型 - 不需要检查对错,直接运行,碰到就停止
3、弱类型语言:是 由数据 决定了 数据的类型是什么 - 更自由
1 - number数字
"1" - string字符串
变量想保存什么数据类型都可以 - 随意
强类型语言:是 数据类型 决定了 你要保存的数据是什么 - java - 更严格
4、面向对象语言 - 万物皆对象(属性和方法)
以后语法中:对象名.属性名;
对象名.方法名();
4、js的用途:
1、css能做的,js能做,css不能做的,js也能操作
2、ajax和服务器端进行交互 - 也是js的一部分
5、如何使用javascript:2种方式
1、在HTML页面上写上一个script标签,再在里面编写你的js代码 - 上课使用为了方便
<script type="text/javascript">
//编写自己的js代码
</script>
6、js代码:
1、注释:作用:1、提示自己/别人 2、 养成一个写注释的好习惯
单行注释://
多行注释:/**/
2、输出方式 - 3种
作用:打桩输出 - 检查错误
(重点哦)1、在F12的控制台输出日志:console.log(数字/"字符串"/变量); - 这才最重要的(都不会影响到用户的体验)
2、在页面上输出,支持标签:document.write(数字/"字符串"/变量); - 缺点:如果绑定了一个按钮的事件,替换掉页面上所有的已有元素
3、在弹出框输出:alert(数字/"字符串"/变量); - 缺点:卡主页面,必须关闭掉弹出框,用户才能看到页面的东西
2、在外部创建一个.js文件,在里面编写属于你的js代码 - 正式开发中使用
<script src="js路径" type="text/javascript" charset="utf-8">
不能再次编写代码了,必须将js代码放到js文件中
</script>
建议:js都写在html的最后,好处2个:
1、如果js非常的耗时,用户至少能看到html和css的效果
2、后续我们js会操作html结构,如果js放在head中可能找不到运算
1、 (重点)数据类型的转换:
javascript是弱类型语言,由数据决定了数据类型是什么
对于不同数据类型的运算时,数据类型会自动进行转换
number+number=number
number+string=string
1、隐式转换:我们程序员看不见,悄悄执行的转换操作
(重点)算术运算符:+ - * / %
(重点)具有隐式转换:默认两边都转为数字,再运算
*特殊:1、+运算,碰上一个字符串,两边都会悄悄的转为字符串,变为拼接操作
2、- * / % 要是纯数字的字符串也可以转为数字,但是包含了非数字字符则为NaN
3、xx转为数字的话,会转为什么结果
true->1
false->0
undefined->NaN
null->0
"100"->100
"100px"->NaN
4、NaN:Not A Number:不是一个数字,但是确实是number类型(不是有效的数字)
全是缺点:1、NaN参与任何算术运算,结果仍为NaN
2、NaN参与任何比较/关系运算,结果都为false,甚至不认识自己 - 带来了一个问题:我们没有办法使用普通的关系/比较运算去判断x是不是NaN
解决:!isNaN(x); 判断是不是有效数字
作用:防止用户输入的必须是一个有效数字
结果:true->是有效数字 false->是NaN
2、显式/强制转换:隐式转换出来的结果不是我们想要的,程序员可以手动调用一些方法进行数据类型的转换
1、转字符串:xx.toString();//转为字符串,但是undefined和null不支持,undefined和null不能使用.操作
基本不会使用,页面上获取到的数据始终都是一个字符串
2、(重点)转数字:
1、*语法:parseInt(str/num)
执行原理:从左向右依次读取每个字符,碰到非数字字符则停止,并且不认识小数点,如果一来就不认识则为NaN
console.log(parseInt(35.45));//35
console.log(parseInt("35.45"));//35
console.log(parseInt("3hello5"));//3
console.log(parseInt("35px"));//35
console.log(parseInt("hello35"));//NaN
console.log(parseInt(true));//NaN
2、 (重点)语法:parseFloat(str);
执行原理:几乎和parseInt一直,但是认识第一个小数点
console.log(parseFloat("35.45"));//35.45
console.log(parseFloat("35.45.45"));//35.45
console.log(parseFloat("35.4abc5.45"));//35.4
console.log(parseFloat("35.45px"));//35.45
以上两个API作用:强制转为数字的同时并且去掉单位
3、语法:Number(x);//万能的,任何人都可以转为数字,垃圾:其实就是隐式转换,还不如隐式转换简单:
还不如:*1 /1 -0
2、 (重点)函数:Function基础:也称之为方法
url(图片路径):完成了一个根据图片路径显示图片的功能
rotate(90deg):完成了一个根据角度值顺时针旋转45度的功能
js的自定义函数:完成了一个......功能
1、什么是函数:函数(Function)是一段被【预定义好的】,可以【反复使用】的代码
是个独立的功能体,可以将【若干】的代码放在里面
2、语法:2部分
1、创建函数/方法
function 函数名(){
//若干代码段
}
2、调用函数/方法
函数名();//程序员写几次就调用几次
小技巧:绑定在页面元素之上,用户来触发了
<elem οnclick="js语法"></elem>
3、什么东西适合放在函数之中?
1、不希望打开页面立刻执行,等用户来触发
2、不希望只执行一次,可以反复触发
3、本身就是一个独立的功能体:你写的每一个作业都是一个独立的功能体
4、建议:以后每一个作业都要封装为一个函数:函数在js中具有第一等公民的地位,函数中的变量都是会自动释放的
4、带有参数的函数:
榨汁机 - function:功能:榨汁
原材料 - 参数:放入一个苹果、梨子、香蕉...
如何创建带参数的函数:
function 函数名(形参,...){//形参(形式参数)其实就是一个变量,只不过不需要var
函数体;
}
调用带参数的函数的时候:
函数名(实参);//实际参数
function zzj(fruit){
console.log("榨"+fruit+"汁");
}
zzj("苹果");
zzj("梨子");
强调:
1、传入实参的顺序一定要和形参的顺序对应上
2、函数不一定非要有参数:1、如果你的操作是固定的,则不需要传递参数
2、根据传入的实参不同,做的操作略微不同,则需要添加参数
3、 (重点)分支结构:
1、程序的结构:3种
1、顺序结构:默认结构,从上向下依次执行每一句代码
2、分支结构:根据判断条件,选择一部分代码去执行(只会走一条路)
3、循环结构:根据判断条件,选择是否重复执行某一段代码
2、比较/关系运算符:> < >= <= == !=
结果:以上六个运算符结果都为布尔值:true、false
往往比较运算符出现在分支、循环的判断条件之中
其实关系运算符也具有隐式转换:
3、if结构:
1、一个条件一件事,满足就做,不满足就不做
if(判断条件){
操作
}
2、一个条件两件事,满足就做第一件,不满足就做第二件
if(判断条件){
操作1
}else{
默认操作
}
3、多个条件多件事,满足谁就做谁
if(条件1){
操作1
}else if(条件2){
操作2
}else if(条件3){
操作3
}else{
默认操作
}
强调:
1、最后的else是可以省略的,但如果条件都不满足,则分支白写
2、条件有时候写的顺序需要注意,因为分支只会走一条路
扩展:逻辑运算符:
&&:与(并且)
只有全部条件都为true,最后结果才为true
只要有一个条件为false,最后结果就为false
||:或
只有全部条件都为false,最后结果才为false
只要有一个条件为true,最后结果就为true
!:颠倒布尔值:
!true -> false
!false -> true
1、变量和常量
(重点) 变量:可以改变的
var 变量名=值;
常量:一旦创建就不可以修改
const 常量名=值;
2、数据类型:
1、原始/基础/值类型:5个
Number、String、Boolean、undefined、null
2、引用类型:11个 - Array
3、算术运算符:+ - * / %
4、数据类型的转换:
1、隐式转换:
算术运算符具有隐式转换,默认都转为数字再运算
特殊:1、+运算,碰上字符串,则为拼接
2、-*/%,字符串也会转为数字,必须是纯数字组成的字符,但凡包含了非数字字符则为NaN
3、true:1
false:0
undefined:NaN
null:0
"500":500
"50dsa0":NaN
4、NaN:参与算术运算结果都为NaN,参与比较运算结果都为false,判断是不是NaN:!isNaN(x)
2、显示/强制转换
1、xx.toString();//undefined和null不支持
2、parseInt(str/num)/parseFloat(str)/Number(x)
5、函数:提前预定义好,反复执行的代码
创建:
function 函数名(形参,...){
函数体
}
调用:
函数名();
elem.οnclick=function(){
函数名();
}
6、分支结构:if...
7、循环结构:反复执行的代码 - 几乎一瞬间执行完毕
var i=0;
while(i<10){
循环体;
i++;
}
for(var i=0;i<10;i++){
循环体;
}
死循环:while(true){}
for(;;){}
退出循环:break
8、(重点知识哦)数组:一个变量/内存空间保存住多个数据
创建:var arr=[1,2,3,4,5,...]
访问:arr[下标]
倒数第n个:arr[arr.length-n]
添加/替换:arr[下标]=新值
末尾添加:arr[arr.length]=新值
缩容:arr.length-=n;
遍历数组:对数组中的每个元素执行相同 或 相似的操作
for(var i=0;i<arr.length;i++){
arr[i];//当前次元素
}
9、DOM:Document Object Model:文档对象模型:操作文档
概念:DOM把HTML看做了一个树状结构,树根是document对象(属性和方法),不需要创建,直接使用
1、获取元素:
标签/class名:var elems=document/已经找到的父元素.getElementsByTag/ClassName("标签/class名")
特殊:1、返回的是一个类数组集合,可用下标、length、遍历 - 不能直接做操作
2、没找到返回的空集合
3、不一定非要从树根进行查找
(重点) 通过节点之间的关系:前提:至少要找到一个人
通过节点找父元素:xx.parentNode; (单个元素)
通过节点找子元素:xx.children; (集合)
通过节点找第一个儿子:xx.firstElementChild; (单个元素)
通过节点找最后一个儿子:xx.lastElementChild; (单个元素)
通过节点找前一个兄弟:xx.previousElementSibling; (单个元素)
通过节点找后一个兄弟:xx.nextElementSibling; (单个元素)
2、操作元素:
1、内容:innerHTML(双标签:识别标签)/innerText(双标签:纯文本)/value(input)
获取:elem.内容属性;
设置:elem.内容属性="新内容";
2、属性:
获取:elem.getAttribute("属性名"); === elem.属性名
设置:elem.setAttribute("属性名","属性值"); === elem.属性名="属性值"
3、样式:
内联样式
获取:elem.style.css属性名; - 只能获取到内联样式
设置:elem.style.css属性名="css属性值"
注意:css属性名有横线的地方都去掉横线,变为小驼峰命名法
3、绑定元素:
单个元素:xx.οnclick=function(){
this->xx
}
集合:
for(var i=0;i<elems.length;i++){
elems[i].οnclick=function(){
this->当前元素
}
}