大家好,小编来为大家解答以下问题,你不知道的javascript怎么样,javascript学到什么程度算,今天让我们一起来看看吧!
初学者,刚系统化学习了一遍HTML和css样式,初入JS的第一周,处于脑子不够用阶段,做的时候想法很多,但写出来就是不断的报错,报错,需要打桩输出一步一步的看,判断出问题的内容。
DAY001:
情况了解js特点,作为一个解释型脚本语言,在运行程序之前,不会判断输入语法事发后正则,而是直接运行,但是遇到错误之后就会报错,且停止运行后续代码,在控制台能够准确看到报错行数,或是语意规范Python解释器的安装步骤。
使用js的方法有两种:
1.在html中写入一个标签,在标签内可以输入代码来调整样式<>js代码</>
2.在外部创建js之后引入,常规方法都是通过外部引入的:创建****.js文件,在html页面引入
< src="js文件路径"><>,通过该种方式引入之后就在js文件里面写入代码,就无需在后续写入
输出方式一般用打桩输出的方式
1.在控制台输出日志console.log(),括号内是你想要输出的变量名字。 ==在F12之后的控制台中可以看到输出内容。(常用,真tm好用!!!)
2.document.write(),跟第一条一样,区别在于输出内容显示在页面上,(老师建议初学者不用该种方式)。
3.alert(),括号内容与上方一致,却别在于,输出的内容会与浏览器自带的输出框中输出日志,但偶尔会锁住页面。
变量和常量需要区分开
1.变量创建之后,值可以在后续修改,命名时需要注意的点:
一、不能用关键词命名
二、不能以数字为开始
三、最好用小驼峰命名法
语法: var 变量名= 值;
2.常量创建之后不可以修改,语法:const pi=值(不好用)
算数运算符+-*/%
+-*/这些都跟常用运算法则一样
%(尤其重要)读作取余,模,运算法则是两个数相除,得出的结果为余数,一般用作判断奇偶性输出
刚开始还学的很基础,内容也不算很多,过的也很开心,很充实,还有自己的时间回顾HTML和CSS,还不错。
DAY002:
今天开始数据类型的转换,以及函数的基础,还有运行逻辑的分支结构
一、1、算数运算符的隐式转换:通过看输出的颜色,判断输出的结果类型
+运算,当碰到一个字符串之后,左右两边都会转换为字符串,就不是+运算了,而是字符串的拼接。
2、可以把其他数据类型转为数字:
true->1
false->0
undefined->NaN
null->0
3、其实-*/%,字符串也可以转为一个数字,前提是一个存数字组成的字符串才行,包含一个个非数字字符就会转化为N啊N:
”1000“ ->1000
"1000px"->NaN
NaN: 不是一个数字,但是是数据类型,
!!!!缺点:
1、NaN参与任何算数运算结果都是NaN
2 、NaN参与任何比较运算都是false,甚至连自己都不能判别
二、function函数基础
1.创建函数:fuction 函数名(){
代码若干
}
2.在什么时候使用:一般是用户通过点击事件来触发,能反复打开而不是刷新页面之后重复出现、需要封装成一个独立功能体,重复代码需要考虑能否封装为一个函数!!!,函数内的一切内存,需要在调用完毕之后释放掉
三、分支结构
1.程序的流程控制语句:3种
1、按顺序从上到下依次执行
2、分支结构-通过条件判断,选择部分代码执行(这个时候想到了高中学的程序框图)
3、循环结构-通过条件判断,选择是否需要重复执行部分代码
2.比较运算符
用于比较/判断
输出结果一定是布尔值
!!!不能做连续判断
3.逻辑运算符:
&&:与,并且:要求全部条件都要满足,最后的结果才为true
只要有一个条件不满足,结果则为false
||:或:要求全部条件都要不满足,最后的结果才为false
只要有一个条件满足,结果则为true
!:颠倒布尔值
4、分支的语法:
一个条件,一件事,满足就做,不满足就不做
if(条件){
操作
}
一个条件,两件事,满足就做第一件,不满足就做第二件
if(条件){
操作
}else{
默认操作
}
多个条件,多件事,满足谁就做谁
if(条件1){
操作1
}else if(条件2){
操作2
}else{
默认操作
}
在做今天作业的时候遇到一个很搞笑的事情,对自己逻辑感到疑惑,哈哈哈哈
输出的结果本来应该是税收应该用另外的值做储存,单纯为方便全局就用了一个变量,单次运算没问题,但是经过指导之后反应过来值在不断变化,无法用于储存
DAY003
别问,问就是循环,数组
1、while循环:
语法:
var 循环变量=几;
while(循环条件){
循环体;
循环变量变化;
}
2、*for循环
语法:for(var 循环变量=几;循环条件;变量的变化){
循环体;
}
死循环: for(;;){
循环体;
}
!!!!while 和 for 的区别?
答:两者能做到相同的操作,但是语法不同
一般来说我们不确定循环次数的时候,会使用while循环 - 死循环
当确定循环次数的时候,就用for循环 ( 简介美观),通常情况都会使用for循环
3、数组
1、创建数组:2种
1、*直接量方式:
var arr=[];//空数组
var arr=[数据1,....];
2、构造函数方式:
var arr=new Array();//空数组
var arr=new Array(数据1,....);
2、获取数组中的数据
数组名[下标];
3、添加/替换
数组名[下标]=新值;
下标处有没有元素,如果没有则为添加,如果有了就为替换
4、数组具有三大不限制
1、不限制元素的个数
2、不限制元素的类型
3、不限制元素的下标越界 - 不是一个好东西了
如果获取元素,下标越界,返回的一个undefined
如果添加元素,下标越界,会得到一个稀疏数组,导致下标不再连续,如果搭配上循环去遍历每一个元素的话,我们会得到很多很多的undefined
问题:自己数下标,是不科学的,很有可能就会数错
5、解决:数组中唯一的属性:长度:数组名.length - 获取当前数组的长度:最大下标+1
三个固定套路:
1、获取倒数第n个元素:arr[arr.length-n]
2、始终向末尾添加元素:arr[arr.length]=新值;
3、缩容:删除倒数n个元素:arr.length-=n
前面的下标好数,后面的下标也好数,但是中间的下标还是不好数
6、***往往很多情况,我们不会拿出某个元素来使用,而是拿出所有的每个元素来进行 相同 或 相似的操作
遍历数组:把数组中的每个元素拿出来执行相同相似的操作
公式:
for(var i=0;i<数组名.length;i++){
console.log(数组名[i]);//当前次元素,要干什么,看你的
}
DAY004
1、DOM:Document Object Model:文档对象模型:专门用于操作HTML文档的,提供了一些属性和方法等待我们学习
2、DOM树概念:DOM将我们的HTML看做了是一个倒挂的树状结构,但是树根不是html标签,而是document对象
document对象:不需要我程序员创建的,由浏览器的js解释器自动创建,一个页面只有一个document
作用:可以通过树根找到我们想要的任何一个DOM元素/节点/对象(属性和方法)
DOM会将页面上每个元素、属性、文本、注释都会当作一个DOM元素/节点/对象
3、查找元素:
1、通过ID查找元素
语法:var elem=document.getElementById("id值");
特殊:
1、返回值,找到了返回的是一个当前找到的DOM元素,没找到,返回一个null,做了别的操作可能就会报错了
2、找到了多个相同的id,那么只会返回第一个
3、其实根本不需要使用此方法,直接写ID也可以找到元素 - 偷懒的写法
2、通过标签名查找元素
语法:var elems=document/已经找到了的父元素.getElementsByTagName("标签名");
特殊:
1、返回值:找到了返回的一个是类数组DOM集合(很像数组,都能用下标,都能用length,都能遍历),没找到返回一个空集合
2、*JS不能直接操作DOM集合,只能直接操作DOM元素,解决:要么使用下标拿到某一个元素,要么使用遍历拿到每一个元素
3、不一定非要从document开始查找,如果document去找,会找到所有的元素,可以换成我们已经找到的某个父元素,就只会找到这个父元素下面的元素了
3、通过class名查找元素
语法:var elems=document/已经找到了的父元素.getElementsByClassName("标签名");
特殊:
1、返回值:找到了返回的一个是类数组DOM集合(很像数组,都能用下标,都能用length,都能遍历),没找到返回一个空集合
2、*JS不能直接操作DOM集合,只能直接操作DOM元素,解决:要么使用下标拿到某一个元素,要么使用遍历拿到每一个元素
3、不一定非要从document开始查找,如果document去找,会找到所有的元素,可以换成我们已经找到的某个父元素,就只会找到这个父元素下面的元素了
4、通过关系查找元素:前提条件:必须先找到一个元素才可以调用关系网
父元素:elem.parentNode;
子元素:elem.children; - 集合
第一个儿子:elem.firstElementChild;
最后一个儿子:elem.lastElementChild;
前一个兄弟:elem.previousElementSibling;
后一个兄弟:elem.nextElementSibling;
本周的内容基本就是这样,看上去不多实际上究极折磨。初学表示优点难懂。