JS原生第二篇（帅哥）

Posted 2020-08-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS原生第二篇（帅哥）相关的知识，希望对你有一定的参考价值。

1.1
javascript 作用

1. 网页特效

2. 用户交互

3. 表单验证

Js 就是可以用来控制结构和样式。

1.2 体验js

认识常用的三个输出语句。都属于 js 内置对象。

大家买手机，手机里面有么有装好一些软件。

提供我们直接使用的功能就是内置对象功能。

1.2.1 Alert() 弹出警示框

完整的写法 : window.alert(“执行语句”);

Window 对象窗口一般情况是可以省略的。

Alert(“123”);

1.2.2 Console 控制台输出

一般用于测试用。

Console
使用代码	作用
Console.log()	控制台输出普通输出语句
Console.warn()	控制台警示
Console.error();	错误提示

1.2.3 document.write() 文档打印输出

document 文档对象它不可以省略

Alert() 非常少。用户体验

Console 用户看不见

document.write() 直接在文档中显示。

1.3 熟悉js 用途

我们js 的主要目的，控制 web标准中的前两种。

结构

样式

行为

Js 怎么来控制样式和结构呢？

我们班级有130人，我想要提问某个同学问题。我应该怎么做？

首先我应该点名字找到这个同学。他才能回答问题。

Js 怎么来控制样式和结构呢？

首选先找人。找准对象。

我们前面学过 div 一类人 span 都是

类名好多个

Id 是永远是唯一的。不会冲突。

getElementById("demo")

Get 获取 element 元素 by 通过 id 名字

通过 id 名字为 demo的得到这个元素

因为这个div 是在文档中，文档中很多个div其中的一个。所以我们

先document

document.getElementById("demo").style.width = "200px";

文档的 id为demo的样式的宽度的值为 200px

borderTop

1.4 变量

变量的命名规则!

1.变量命名必须以字母或是下标符号”_”或者”$”为开头。

2.变量名长度不能超过255个字符。

3.变量名中不允许使用空格。

4.不用使用脚本语言中保留的关键字及保留符号作为变量名。

5.变量名区分大小写。(javascript是区分大小写的语言)

1 var a = 10;

2 function fun()

3 { a = "global"; }

4 console.log(a);

5 //输出？

6 var a;

7 function fun()

8 { a = "global"; }

9 fun();

10 console.log(a);

1.4.1 变量的作用域

根据变量的作用范围可以分为全局变量和局部变量

全局变量：

1. 在最外层声明的变量。

2. 在函数体内部，但是没有声明var 的变量也是全局变量

局部变量：

在函数体内部的声明的变量

小知识点：

隐式的全局变量

11 在函数体内部，但是没有声明var 的变量也是全局变量。

12 var a = 1

13 function func() {

14 a = b = 2

15 }

16 func()

17 alert(a)

18 alert(b)

1.5 事件三要素

把等打开灯要做这样的事情。

我们用我们的手去按一下开关灯亮了。

事件源事件事件处理程序

1.5.1 事件源

要触发的对象手用手去触发的。谁触发了

一般情况下是个名词

发起者

被触发者开关按钮

1.5.2 事件

怎么触发的这个事情按

一般情况下这个是动词点击鼠标经过按键盘

事件名	说明
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点，表示文本框等获得鼠标光标。
onblur	失去焦点，表示文本框等失去鼠标光标。
onmouseover	鼠标悬停，即鼠标停留在图片等的上方
onmouseout	鼠标移出，即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时

1.5.3 事件处理程序

发生了什么事灯亮了

= function(){ }

1.5.4 总结

事件三要素：

事件源三藏

事件念

事件处理程序悟空头疼

案例1 ：

事件三要素：

事件源： x 盒子

事件: 点击

事件处理程序：关闭这个大的banner

案例2 ：

事件源：关注京东的这个盒子

事件：鼠标滑过经过

事件处理程序：下拉菜单就会显示出来

事件源.事件 = function(){ 事件处理函数 }

事件源：按钮

事件点击

事件处理程序：盒子的宽度改变 400

代码:

19 /*要操作先找人*/

20 var demo = document.getElementById("demo"); //获得id为demo的div盒子给demo

21 var btn = document.getElementById("btn"); // 获得按钮

22 /*事件三要素*/

23 /*事件源.事件 = fucntion(){}*/

24 btn.onclick = function(){

25 demo.style.width = "400px";

26 }

27 </script>

1.6 隐藏样式

Display: none display: block ; 显示的意思

Visibility: hidden; visibility: visible 显示的意思

Display 隐藏不占位置

Visibility:hidden 隐藏占有位置停职留心

Overflow:hidden; 隐藏超出的部分。

1.7 入口函数

window.onload = function(){

内部放js

}

这个函数的意思就是说，当我们页面加载完毕之后，采取执行函数体里面的js部分。就是说等页面的结构样式节点等加载完毕。。。

所以，这句话也可以页面的顶端即可。

1.8 模态框

1.9 Padding

内边距会影响盒子大小

行内元素尽量不用上下的padding和margin

继承的宽度 padding不会挤开。

1.10 Js 的书写位置

Js 的书写位置非常的自由。

也可以参照 css 的位置来分类。

1.10.1 行内式

一般情况，单双引号是一样的但是出现了包裹的情况。

我们一般采取的是外双内单的格式。

1.10.2 内嵌式

1.10.3 外链式

这对标记之间不能写任何的东西。

1.11 数据类型

Js 的数据类型分为：

字符型数值型布尔型 null undefined

Js 是一个是一种弱数据类型。

Var Aa = 10;

Var aa:int = 10;

Js 的变量你给什么值，他就是什么数据类型。

1.11.1 字符型 (string)

String

转换为字符型:

1. 利用 “” (双引号)

加了引号的都是字符型。

2. 利用String(); 转换为字符型

1.11.2 布尔型 (boolean)

就两个值正确的和错误的 true 和 false

数据类型转换为布尔型：

1. 利用 !!

console.log(typeof !!num);

2. 利用 Boolean()

false、undefined 、null、0、”” 为 false

true、1、”somestring”、[Object] 为 true

1.11.3 数值型

Var num = 10

数值的前面带 0 表示八进制

Var num = 020;

0*8⁰+2*8¹ = 16

数值的前面带 0x 表示十六进制

var result = 0xb; 11

转换为数值型:

1. 利用 - * / 都可以转换

2 利用Number( )

1.11.4 ParseInt() parseFloat()

parseInt(值, 进制);

NOT a number

MMD

BBD

parseInt(110,2)

表示2进制吧10 这个2进制转换为 10进制

0*2⁰+1*2¹ + 1*2² = 6

1.var a="15.15abc" , b=‘10.15‘ , c=‘10.0abc‘;

alert(parseInt(a)+Number(b)+parseFloat(c));

1.11.5 Null undefined

Null 空的没有值。

Undefined 未定义的应该有值，但是没有给。

Null “”

1.12 函数(function)

函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

四大发明造纸术火药指南针印刷术

1.12.1 函数的声明

函数使用跟变量一样，需要声明

1.12.2 自定义函数

function fun(){
alert("我是自定义函数")
}
fun(); // 函数不调用，自己不执行

1.12.3 函数直接量声明

var fun1 = function(){
alert("直接量声明")
}
fun1(); 也需要调用

1.12.4 利用Function 关键字声明

var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");
fun2();

1.12.5 变量声明提升

什么是变量提升

28 function fun(){

29 console.log(num);

30 var num = 20;

31 }

相当于 ---

32 function fun(){

33 var num;

34 console.log(num);

35 Num = 20;

36 }

在函数体内部，声明变量，会把该声明提升到函数体的最顶端。只提升变量声明，不赋值。

var a = 18;
f1();
function f1(){
    var b=9;
    console.log(a);
    console.log(b);
    var a = ‘123‘;
}

结果是： undefined 9

1.12.6 函数参数

arguments是存储了函数传送过过来实参

Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例.

arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同

arguments对象的长度是由实参个数而不是形参个数决定的

Var a = 10, b = 20;

等价的

Var a = 10;

Var b = 20

1.13 案例鼠标展示

代码：

var box = document.getElementById("box");
function fn(liid,bg){ // 封装函数参数的传递
    var obj = document.getElementById(liid);
    obj.onmouseover = function(){
        box.style.backgroundImage = bg;
    }
}
fn("li01","url(images/01big.jpg)"); // 实参
fn("li02","url(images/02big.jpg)");
fn("li03","url(images/03big.jpg)");
fn("li04","url(images/04big.jpg)");
fn("li05","url(images/05big.jpg)");

1.14 返回值 return

定义：

一个函数实际上就是一个计算过程，计算完成之后的结果就是返回值。

定义函数的返回值：

在函数内部用return来设置返回值，一个函数只能有一个返回值。

同时，终止代码的执行。

所有的自定义函数默认没有返回值；

Return 后面不要换行

function $(id){
return document.getElementById(id);
}
$("demo").style.backgroundColor = ‘purple‘;
$("test").style.backgroundColor = "blue";

1.以下代码执行的结果是多少？请分析为什么？

1 var total=10;

1 var number = square(5);

37 alert(number);

38 function square(n) {

39 total = n*n;

40 return total;

41 }

结果是 25

1.15 算术运算符

+ - * / % ^

1+1 = 2

5%2 == 1

2%5 == 2

2^3

A++ ++后置每次自加1 先运算后自加

++a ++前置每次自加1 先自加后运算

1.分析代码，得出正确的结果。

1 var a=10, b=20 , c=30;

42 ++a;

43 a++;

44 e=++a+(++b)+(c++)+a++;

45 alert(e);

1.16 条件语句(if)

If(条件表达式) { 语句;}

If() {}else {}

If() else if(){} else if(){} else {}

1.17 获得焦点失去焦点事件

我们前面学过了 onclick 点击 onmouseover onmouseout’

获得焦点: onfocus fao ~克死

失去焦点: onblur 不len ~~

1.18 this (自己的)

指的是本身

This 主要是指事件的调用者。

className 类名

$("result").className ="wrong";

innerhtml

更换盒子里面的内容文字标签都换.

表单更换内容

Input.value

isNaN nan 不是一个数字 is 是是不是一个数字

isNaN(“12”) 如果里面的不是个数字返回 true 否则返回false

1.19 属性和方法

手机

黑色的 5.5寸的塑料的铁的

外在特性

属性

手机的颜色是黑色的。

Iphone.color = “red”; 属性给值一定是等号

方法：

手机打电话发短信玩游戏聊QQ 看电影

动词可以干什么

Iphone.tel();

方法和属性的区别：

方法一律带有小括号。 isNaN( ); 动词

方法给值： isNaN（“值”）;

1.19.1 表单自动获得焦点

Txt.focus(); 方法

Onfocus 事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var txt = document.getElementById("txt");
            txt.focus(); //自动获得焦点
        }
    </script>
</head>
<body>
自动获得焦点:
<input type="text" id="txt"/>
</body>
</html>

1.19.2 鼠标经过选择表单

sele.onmouseover = function(){
this.select(); //选择
}

方法 select() 选择功能

1.20 For 循环

人生一个循环

i+=3 i=i+3

1.21 getElementsByTagName() 获取某类标签

前面我们可以得到一个盒子通过 id 获得

getElementById() 只得到一个盒子

我们想要获取某类标签比如说所有的div li span

getElementsByTagName(); 很多个所以是复数很多个

得到的是一个伪数组。

Lis 数组

Lis[索引号] 一个

1.22 判断用户输入事件

正常浏览器 : oninput

Ie 678 支持的： onpropertychange

1.23 数组 array

数组是做什么用的？

var num = 10; 变量可以用来存储东西。

一个变量里面只能一个值。

我们130人，想把我们每个人的人名存储，要用变量需要 130变量。

这个时候可以考虑数组。组合

数组：就是一个大变量，它里面可以存储很多的值。

1.23.1 声明数组

var arr = [1,3,5,7,9];

var arr = new Array(1,3,5);

1.23.2 使用数组

使用的方法: 数组名[索引值]; 函数名();

索引号是从0开始的。 0 1 2 3 4 5 ...

var textArr = ["刘备","诸葛亮","赵云","关羽"];
console.log(textArr[3])

1.23.3 数组的长度

数组名.length;

1.23.4 遍历数组

想到了for 遍历数组

getElementsByTagName() 得到一个伪数组

1.23.5 案例隔行变色

1.23.6 求平均值

var arr = [10,20,30,34,67];
    function avg(array){ // 封装求平均值函数
        var len = array.length; // 数组的长度
        var sum = 0;
        for(var i=0; i<len; i++)
        {
            sum += array[i];   //     sum = sum +array[i];
        }
        return sum / len;
    }
    //a*=3   a= a*3
    console.log(avg(arr));
</script>

字符相连

数值相加字符相连

1+1 = 2;

“你好” + “吗” “你好吗”

“你好” + 2 “你好2”

“0” + 10 “010”

10 - “2” 8

所有的input 取过来的值是字符型。

三元运算符三目运算符

一元： a++ b++ +a -a

二元: a+b a>=b

三元: 表达式 ? 结果1 : 结果2 等价于 if else

如果表达式结果为真，则返回结果1

如果表达式结果为假，则返回结果2

if(3>5) {alert(“11”)} else { alert(22)} ==

3>5 ? alert(11) : alert(22)

the king is always luck

王老吉

1.24 排他思想

排他思想:

首先干掉所有人，剩下我自己

1.25 变量和属性

变量

是独立存在的自由自在的

miss 小姐女士

属性和方法

属于某个对象的属性和方法

mrs

var index = 10; //变量谁都可以使用
var arr = []; // 数组
arr.index = 20; // 自定义属性他只能在arr 才能使用
alert(arr.index);

以上是关于JS原生第二篇（帅哥）的主要内容，如果未能解决你的问题，请参考以下文章

JS原生第一天（帅哥）

原生JavaScript第二篇

21000+行原生J S的学习之路（第二篇）

云原生第二篇--容器管理工具 Docker生态架构及部署

原生js淘宝放大镜效果(第二版)

JS原生第二篇 （帅哥）

1.1 javascript 作用