本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!
博客地址 点击跳转
js的介绍
- js的作用1.html是从语法意义上来构造网页2.css是从视觉上美化界面3.js是从交互上提升用户体验
- js的出现:1995年出现,网景公司设计
- js的发展:原来叫做liveScript,后改名为JavaScript
- js的现状
- 第一个js程序以及js的位置1.弹框输入的认识 2.数值和字符的认识
注释的认识
- 注释的作用:用来说明代码,提升代码的可读性
- 注释的种类:1.单行注释 使用 // 快捷键是crl +/ 2.多行注释 使用/**/快捷键是 ctr +shift +/
变量
- 变量的定义:变量是用来存储数字,字符以及可以表示这些东西的东西,
- 变量的使用1 .声明变量 var 2.赋值变量 = 3.使用变量.例如
var a; a = 5;console.log(a); - 变量的命名:从语法意义上命名,变量是由字母数字,下划线以及$符号组成,但是不能一数字开头,而且不能使用保留字;从形式上变量是由他的实际表示的意思的英文组成,然后采用驼峰命名法,就是如果当一个变量是由多个单词组成,那么当第二个单词开始的每一个单词的第二个字母都是大写,例如 lastName
- 变量的类型1,数值 2.字符 3.布尔 4.对象 5.未定义类型
- 变量的赋值:用来赋值的值不会改变,被赋值的值会发生改变,
- 变量如果不赋值会输出未定义类型:var a ; console.log(a);
- 其他类型和布尔类型的转化1.对于数值类型,只要不是0就是真;2.对于字符类型,只有不是空就是真;3.对于对象类型,如果是null,才是假,其余是真的;4.对于未定义类型,都是假的
运算符
- 运算符:运算符是用来连接变量组成语句的符号
- 运算符的种类:算术运算符 关系运算符 逻辑运算符
- 算术运算符:1. + - * / % 2.* / %的优先级高于 + - 3.使用小括号可以提升优先级别 4. += 以及-=的认识,+= -=表示变量赋值的时候 ,如果用自己赋值给自己就可以使用+=或者-= ,例如 var a=5; a= a+5;可以替换为 a+=5;
5.++以及—的认识:一般++和—放在变量中使用,如果对于++,放在变量的后面,表示先使用变量,然后让变量的值加一,赋值给原来的变量;如果放在变量的前面表示先让变量的值加一,然后在赋值 - 关系运算符:1. > < >= <= == === != !== 2.特点:>=以及<=只有一个满足条件就可以; ==只需要比较内容就可以;===既要先比较类型,也比较内容,如果两个都符合才可以 != 和!==是== ===的相反;关系运算符的结果都是布尔类型;关系运算符不可以连续
- 逻辑运算符:1.&& || !2.特点:逻辑运算符进行运算符的都是布尔值 ;&&只有两边都是真的时候结果才是真;||只有有一个是真的返回结果就是真 ;!表示取反
逻辑运算的一些特点
- 对于&&运算符如果第一个表达式是真的那么第二个表达式需要计算，如果第一个表达式为假，第二个表达式不用计算
- 对于||如果第一个是真的,那么第二个不用计算,如果第一个为假,那么第二个需要计算.
- 数值或者字符参与逻辑运算:
如果返回真,对于&&运算符,那就返回的结果是第二个表示真的值,如果返回假的,那么返回第一个为假的值;
对于||,如果结果为真,返回第一个为真的值,如果为假,返回最后一个为假的值 - 运算符的优先级:1.算术运算符高于关系运算符,关系运算符高于逻辑运算符 2.一般单目运算符高于双目运算符3.赋值运算符的等级最低 4.&&运算符高于||运算符
if语句的认识
- 基本if语句的形式:if(判断条件){如果条件成立执行代码}else{如果条件不成立执行这里的代码};
- 多重if语句的形式:if(判断条件1){如果条件1成立就执行代码}else if(判断条件二){如果条件二成立就执行括号中的代码}else{如果都不成立,就执行这里的代码}
*多重if语句的跳楼现象,也叫阻断现象:就是对于多重if语句如果,第一个条件成立了,后面的所有的条件都不再判断, - 阻止跳楼现象:就是写的时候,把else去掉就可以了
- 嵌套if语句:就是if语句中有if语句,形式:if(if(){}else{} )else{if(){}else{}};
- 补充知识点：+和连字符的区别，如果+两边都是数值，+表示加号，只有有一个字符，就是表示练字符，连字符的结果是字符类型
循环语句的认识
- 循环语句的类型：for循环和while循环
- for循环的形式：for(初始化条件；终止条件；变化值）
- for的一般的实际例子for(var i = 0;i < 100;ｉ＋＋）{}
- for循环的过程：就是根据初始化条件，然后和终止条件判断，如果符合终止条件，就执行大括号中的代码，然后让初始条件变化，然后和终止条件比较，如果符合，就继续执行对应的代码，直到不成立为止，停止循环。
常见数学公式的使用
- 取出最大值以及最小值的公式:max(); min();
- 取出一个数值的正的平方根:sqart();
- 设置一个数的几次方:pow()
- 输入框的认识和使用：prompt（）
- 转化整数的公式的认识:1.parseInt() 2.可以直接把数值字符转化成整数,可以截断字符,截取出数值,但是必须第一个字母是数字字符
三个for循环
<script>
// 1到100相加 for()语句
var num = 0, num1 = 0, num2 = 0;
for(var i = 0; i <= 100; i ++) {
num += i;
}
console.log(num);
// while语句 不一定执行 条件满足才执行
var j = 1;
while(j <= 100) {
num1 += j;
j ++;
}
console.log(num1);
// do while 至少执行一次 哪怕条件不满足都会执行一次
var k = 1;
do {
num2 += k;
k ++
}
while(k <= 100);
console.log(num2);
</script>
入口函数
window.onload = function(){
//内部放js 这是一个超大体 这个函数的意思就是说 等页面加载完成之后
//才来执行函数体里面的js部分 等页面结构 样式 节点 图片等都加载完毕
}
数据类型
- 字符型 : string
- 加引号的都是字符型
- 强制转换String(num); S一定要大写
var num = 10; console.log(typeof String(num)); - 数值型 :
- 数值前面加上0代表是8进制 换算公式是 0乘8的0次方+n乘8的1次方
var num = 020;
console.log(num);
// 输出的数字是16 转换 Number() N一定要大写
- 布尔型 :
boolean 1.true 2.false
var num = 10;
console.log(typeof !!num); // 数值型转换成布尔型 或者用Boolean();来转换 B一定要大写
- 对象类型:
null : 对象为空 输出undefined - undefined类型;
parseInt取整
console.log(parseInt(110,2));
// 输出6 表示2进制 把110这个2进制转换成10进制
// 2进制换算 0*2的0次方+1*2的1次方+1*2的2次
变量提升
var num =10;
fun();
function fun(){
console.log(num);
var num = 20; // 输出 undefined
}
// 这个函数相当于下面这个函数
function fun(){
// 先执行内部变量 然后把内部变量提升至函数 光提升不赋值 所以输出就是undefined
var num;
console.log(num);
num = 10;
}
事件三要素 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-事件三要素</title>
<style>
#demo{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="demo"></div>
<button id="btn">改变宽度</button>
<button id="tn">改变高度</button>
<button id="nn">改变颜色</button>
<script>
// 事件源: 要触发的对象 手 一般情况下是名词 发起者
// 事件: 怎么触发的这个事情 按 一般情况下是动词 鼠标(点击/按键盘/经过)
// 事件处理程序: 发生了什么事 灯亮了
// 格式:
// 事件源.事件 = function(){事件处理函数}
// 案例:
var dem = document.getElementById("demo"); // 获得id为demo的div盒子给demo
var btn = document.getElementById("btn"); // 获得按钮
// 事件三要素
btn.onclick = function(){
demo.style.width = "400px";
}
tn.onclick = function(){
demo.style.height = "300px";
}
nn.onclick = function(){
demo.style.backgroundColor = "red";
}
</script>
</body>
</html>
事件汇总
**全部事件**
break和continue的区别
- break:在循环中如果使用,表示结束整个的该循环,直接跳出循环,不在执行循环
- continue:表示结束此次循环,下一次继续执行
switch语句
:1.形式
:switch(变量或者字符
){case 条件一
: 执行代码
;break;case 条件二
执行代码
;break;default:执行代码
}2.执行过程
:根据条件判断如果符合条件就执行对应的代码
,入股条件都不符合就执行
default中的代码
,3.特点
:如果条件都有
,就可以不写
default
函数的认识
- 函数定义:函数就是一堆代码的集合用来说明某一个功能的
- 函数的使用 1.函数声明
function 2.函数赋值实现
- 函数调用
通过函数名称 -
()来调用
小括号表示函数理智调用
函数必须调用
不然没有意义
4.函数声明和赋值一般放在一起叫做函数定义
- 函数定义的两种方式:
1.var a = function(){}
2.function a(){} ,都是表示函数的定义
大括号中叫做函数体
用来放置函数的代码的 - 函数的参数:
- 函数参数的种类
形式参数
实际参数 - 形式参数
在函数定义的时候
传入的参数叫做形式参数 - 函数的实际参数
在函数调用的时候传入的参数是实际参数 - 变量作用域的认识:局部变量
就是定义在函数内部的变量 - 声明在函数外部的变量
- 变量的访问,采用就近原则;就是如果在函数内部访问一个变量,那么回去函数内部看是否有对应的变量定义,如果定义了,我们访问的就是这个变量,如果没有定义我们就去函数外面访问变量,如果都没有,就访问不到.
- 变量声明的提升;就是如果在一个函数中访问一个在访问后定义的变量
我们会把这个变量的声明提升
js具体的作用
- js可以操作样式
(css):直接修改某一个盒子的高度
获取标签的方法是
getelementById(); - js可以操作结构
(html):设置一个双标签的内容的是
innerHTML包含了标签的中间的所有的东西
事件的基本认识
- 事件的三要素:事件源
就是谁被触发了,事件属性
就是你做了什么导致了结果,事件指令
就是事件出发的结果或者影响或者事件触发后要去做的事情,形式是function(){} - 事件三要素的组合:事件源.事件属性 = 事件指令
- 点击事件的认识以及应用:onClick,通过点击按钮切换盒子的宽度颜色,以及换肤来使用加深理解
- 鼠标移动事件的认识以及应用:通过鼠标移动上去修改图片的显示以及选取食物切来加深鼠标移上去以及出来的事件
-
transform属性的使用以及应用
- Transform使用的时候是相对于第一次的位置为基准值
- Transform旋转后会改变坐标系
- 不同的浏览器的属性值是不一样的.
- if语句的应用:通过使用竞价的来理解
- switch语句的应用:使用selet标签显示不同的语句
- 当select发生改变的时候,我们直接使用onchange来监听发生了改变;
- 当需要获取选中的值得时候,使用select标签的value属性来获取
- 代码的抽取:使用电脑选取切换来实现,代码抽取的原则:
- 相同的东西放在一起
- 不同的东西作为参数
- window.onlaod的认识:
- 通过搜索框来实现,
window.onload表示当窗口加载完毕了,这个时候我们在js代码中获取标签才可以获取到,所以如果我们把js写在js标签的上面我们就需要先当窗口加载完毕后来获取对应的标签.
- 通过搜索框来实现,
- 获取焦点以及失去光标焦点的认识:我们通过使用制作简单的搜索框来实现对象的效果.
- 示例代码 : 附小demo一个 帮助更好的理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14-函数传参控制盒子</title>
<style>
div{
width: 100px;
height: 100px;
margin: 20px;
background-color: darkgreen;
display: none;
}
</style>
<script>
// 四个盒子功能相同 都是为了点击显示 所以调用一个函数
function fn(obj){ // 形参是为了接收实参 有接必有送 从下面调上来
var sin = document.getElementById(obj); // 获取
sin.style.display = "block"; // 执行
}
</script>
</head>
<body>
<button onclick="fn('demo1')">第1个按钮</button>
<button onclick="fn('demo2')">第2个按钮</button>
<button onclick="fn('demo3')">第3个按钮</button>
<button onclick="fn('demo4')">第4个按钮</button>
<div id="demo1">1</div>
<div id="demo2">2</div>
<div id="demo3">3</div>
<div id="demo4">4</div>
</body>
一 一 对 应
一 一 对 应
一 一 对 应
一 一 对 应
