python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

时间 2019-11-18

标签 python 开发 day50 day javascript 简介第一个代码数据类型运算符转换流程控制百度显示隐藏栏目 Python 繁體版

原文原文链接

1、Javascript简介

Web前端有三层：

HTML：从语义的角度，描述页面结构javascript
CSS：从审美的角度，描述样式（美化页面）css
JavaScript：从交互的角度，描述行为（提高用户体验）html

JavaScript历史背景介绍

布兰登 • 艾奇（Brendan Eich，1961年～），1995年在网景公司，发明的JavaScript。前端

一开始JavaScript叫作LiveScript，可是因为当时Java这个语言特别火，因此为了傍大牌，就更名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。java

同时期还有其余的网页语言，好比VBScript、JScript等等，可是后来都被JavaScript战胜了，因此如今的浏览器中，只运行一种脚本语言就是JavaScriptpython

JavaScript和ECMAScript的关系

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定的标准。程序员

JavaScript是由公司开发而成的，问题是不便于其余的公司拓展和使用。因此欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。es6

简单来讲，ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。就是说，你JavaScript学完了，Flash中的程序也就垂手可得了。web

ECMAScript在2015年6月，发布了ECMAScript 6版本，语言的能力更强（也包含了不少新特性）。可是，浏览器的厂商不能那么快去追上这个标准。面试

JavaScript的发展：蒸蒸日上

http://2004.sina.com.cn/

http://2008.sina.com.cn/

http://2012.sina.com.cn/

上面三个网站能够感觉一下网页技术的发展。

2003年以前，JavaScript被认为“牛皮鲜”，用来制做页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。因此浏览器就推出了屏蔽广告功能。

2004年，JavaScript命运开始改变，那一年，谷歌公司开始带头使用Ajax技术，Ajax技术就是JavaScript的一个应用。而且，那时候人们逐渐开始提高用户体验了。Ajax有一些应用场景。好比，当咱们在百度搜索框搜文字时，输入框下方的智能提示，能够经过Ajax实现。好比，当咱们注册网易邮箱时，可以及时发现用户名是否被占用，而不用调到另一个页面。

2007年乔布斯发布了第一款iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。
JavaScript在移动页面中，也是不可或缺的。而且这一年，互联网开始标准化，按照W3C规则三层分离，JavaScript愈来愈被重视。

2010年，人们更加了解HTML5技术，HTML5推出了一个东西叫作Canvas（画布），工程师能够在Canvas上进行游戏制做，利用的就是JavaScript。

2011年，Node.js诞生，使JavaScript可以开发服务器程序了。

现在，WebApp已经很是流行，就是用网页技术开发手机应用。手机系统有iOS、安卓。好比公司要开发一个“携程网”App，就须要招聘三队人马，好比iOS工程师10人，安卓工程师10人，前端工程师10人。共30人，开发成本大；并且若是要改版，要改3个版本。如今，假设公司都用web技术，用html+css+javascript技术就能够开发App。也易于迭代（网页一改变，全部的终端都变了）。

虽然目前WebApp在功能和性能上的体验远不如Native App，可是“WebApp慢慢取代Native App”颇有多是将来的趋势。

JavaScript入门易学性

JavaScript对初学者比较友好。
JavaScript是有界面效果的（好比C语言只有白底黑字）。
JavaScript是弱变量类型的语言，变量只须要用var来声明。而Java中变量的声明，要根据变量的类型来定义。

好比Java中须要定义以下变量：

int a;
float a;
double a;
String a;
boolean a;

而JavaScript中，只用定义一个变量：

var a;

JavaScript不用关心其余的一些事情（好比内存的释放、指针等），更关心本身的业务。

JavaScript是前台语言

JavaScript是前台语言，而不是后台语言。

JavaScript运行在用户的终端网页上，而不是服务器上，因此咱们称为“前台语言”。JavaScript就是一个简单的制做页面效果的语言，就是服务于页面的交互效果、美化、绚丽、不能操做数据库。

后台语言是运行在服务器上的，好比PHP、ASP、JSP等等，这些语言都可以操做数据库，都可以对数据库进行“增删改查”操做。Node.js除外。

JavaScript的组成

JavaScript基础分为三个部分：

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：操做网页上的元素的API。好比让盒子移动、变色、轮播图等。主要操做这个！
BOM：操做浏览器部分功能的API。好比让浏览器自动滚动。

PS：JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动。

JavaScript的特色

（1）简单易用：可使用任何文本编辑工具编写，只须要浏览器就能够执行程序。

（2）解释执行（解释语言）：事先不编译、逐行执行、无需进行严格的变量声明。

（3）基于对象：内置大量现成对象，编写少许程序能够完成目标

2、第一个JavaScript代码

在页面中，咱们能够在body标签中放入<script type="text/javascript"></script>标签对

<script type="text/javascript">

</script>

alert语句

<script type="text/javascript">
       alert("hello");
</script>

alert（英文翻译为“警报”）的用途：弹出“警告框”。

网页效果：

js的引入方式

也和css相似，也是三种

行内式、内接式、外接式

行内式

onclick表示点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!--行内js onclick 事件名-->
    <div onclick="alert(111)"></div>
</body>
</html>

View Code

访问网页，点击红色区域，就会有提示框

内接式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <!--内接式-->
    <script type="text/javascript">
        alert(222);
    </script>
</head>
<body>
    <div></div>
</body>
</html>

View Code

访问网页，直接就有提示框了

外接式

建立文件夹，名字为js。在目录中建立文件index.js，内容以下：

alert(333);

访问网页，直接输出提示框

语法规则

学习程序，是有规律可循的，就是程序是有相同的部分，这些部分就是一种规定，不能更改，咱们成为：语法。

（1）JavaScript对换行、缩进、空格不敏感。

备注：每一条语句末尾要加上分号，虽然分号不是必须加的，可是为了程序从此要压缩，若是不加分号，压缩以后将不能运行。

（2）全部的符号，都是英语的。好比括号、引号、分号。

（3）JavaScript的注释：

　　单行注释：

// 我是注释

　　多行注释：

/*
    多行注释1
    多行注释2
*/

备注：sublime中，单行注释的快捷键是ctrl+/，多行注释的快捷键是ctrl+shift+/。

JavaScript在网页中输出信息的写法

弹出警告框：alert("")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert('今每天气好晴朗');
    </script>
</head>
<body>

</body>
</html>

View Code

网页效果：

控制台输出：console.log("")

console.log("")表示在控制台中输出。console表示“控制台”，log表示“输出”。

控制台在Chrome浏览器的F12中。控制台是工程师、程序员调试程序的地方。程序员常用这条语句输出一些东西，来测试程序是否正确。

百度前端，面试必问：你见过百度网页的console吗？把那段话说一遍。

访问百度首页，f12打开控制台，点击console

这里面的2个问题，答案大概是。

1.说一些前端的技术，主要讲ajax。这个用的很是多

2.说明你的学习能力，如何强大。

用户输入：prompt()语句

prompt()就是专门用来弹出可以让用户输入的对话框。

代码以下：

<script type="text/javascript">
        var a = prompt('今天是什么天气？');
        console.log(a);
</script>

上方代码中，用户输入的内容，将被传递到变量 a 里面。

效果以下：

f12打开控制台查看结果。黑色表示是字符串，蓝色表示数字

prompt()语句中，用户无论输入什么内容，都是字符串。

alert和prompt的区别：

alert("从前有座山");                //直接使用，不须要变量
var a = prompt("请输入一个数字");   // 必须用一个变量，来接收用户输入的值

直接量：数字和字符串

“直接量”即常量，也称为“字面量”。看见什么，它就是什么。

简单的直接量有2种：数字、字符串。

（1）数值的直接量的表达很是简单，写上去就好了，不须要任何的符号。例如：

alert(886);  //886是数字，因此不须要加引号。

（2）字符串也很简单，但必定要加上引号。能够是单词、句子等。

alert('hello');

变量

变量的定义和赋值

var a = 100;

var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”，

定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面必定要有空格隔开。
变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。
变量名：咱们能够给变量任意的取名字。

PS：在JavaScript中，通常都是用var来定义变量，这和C、Java等语言不一样(有兴趣的同窗能够看一下es6)

变量要先定义，才能使用。好比，咱们不设置变量，直接输出：

<script type="text/javascript">
        console.log(a);
</script>

控制台将会报错：

正确写法：

var a;   // 定义
a = 100;  //赋值
console.log(a);  //输出100

控制台输出100，蓝色的字体，表示数字。

有经验的程序员，会把定义和赋值写在一块儿：

var a = 100;    //定义，而且赋值100
console.log(a);  //输出100

在es6中使用let声明变量，好比：

let c = 13;
console.log(c);

变量的命名规范

变量名有命名规范：只能由英语字母、数字、下划线、美圆符号$构成，且不能以数字开头，而且不能是JavaScript保留字。

下列的单词，叫作保留字，就是说不容许当作变量名，不用记：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

大写字母是可使用的，而且大小写敏感。也就是说A和a是两个变量。

var A = 250;    //变量1
var a = 888;    //变量2

变量的类型

变量里面可以存储数字、字符串等。变量会自动的根据存储内容的类型不一样，来决定本身的类型。

数值型：number

若是一个变量中，存放了数字，那么这个变量就是数值型的

var a = 100;            //定义了一个变量a，而且赋值100
console.log(typeof a);  //输出a变量的类型

typeof()表示“获取变量的类型”，语法为：

typeof 变量

在JavaScript中，只要是数，就是数值型(number)的。不管整浮、浮点数（即小数）、不管大小、不管正负，都是number类型的。

字符串型：string

var a = "abcde";
var b = "路飞";
var c = "123123";
var d = "哈哈哈哈哈";
var e = ""; //空字符串

console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);

控制台输出：

连字符和加号的区别

键盘上的+多是连字符，也多是数字的加号。以下：

console.log("我" + "爱" + "你");   //连字符，把三个独立的汉字，链接在一块儿了
console.log("我+爱+你");           //原样输出
console.log(1+2+3);             //输出6

总结：若是加号两边都是数值，此时是加。不然，就是连字符（用来链接字符串）。

es6使用tab键上面的反引号

{}表示一个占位符

var first = '我';
console.log(`${first}爱你`);

变量值的传递（赋值）

语句：

a = b;

把b的值赋给a，b不变。

将等号右边的值，赋给左边的变量；等号右边的变量，值不变。

举个特殊的例子：

var a = "3";
var b = 2;
console.log(a-b);

效果：（注意，字符串 - 数值 = 数值）

变量格式转换

用户的输入

咱们在上面的内容里讲过，prompt()就是专门用来弹出可以让用户输入的对话框。重要的是：用户无论输入什么，都是字符串。

`parseInt()`：字符串转数字

parseInt()能够将字符串转数字。parse表示“转换”，Int表示“整数”（注意Int的拼写）。例如：

字符串转数字的方法：

parseInt("5");

parseInt()还具备如下特性：

（1）带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。例如：

console.log(parseInt("2018你真帅！！"));

网页查看console

若是后面还有数字，也会只保留最开头的数字，好比：

console.log(parseInt("22岁的唐慧茹带着5岁的儿子去逛街"));

网页查看console

（2）自动带有截断小数的功能：取整，不四舍五入。

var a = parseInt(5.8) + parseInt(4.7);
console.log(a);

网页查看console

var a = parseInt(5.8 + 4.7);  //先计算结果,再取整
console.log(a);

网页查看console

3、数据类型

数据类型包括：基本数据类型和引用数据类型

基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象。

当咱们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值仍是引用类型值

1.基本数据类型

number - 数字

var a = 123;
//typeof 检查当前变量是什么数据类型
console.log(typeof a);
//特殊状况
var a1 = 5/0;
console.log(a1);
console.log(typeof a1); //Infinity 无限大. number类型

网页查看console

string - 字符串

var str  = '123'
console.log(typeof str);

网页查看console

boolean - 布尔值

var b1 = false;
console.log(typeof b1);

网页查看console

null

var c1 = null;//空对象. object
console.log(c1);

网页查看console

undefined

var d1;
//表示变量未定义
console.log(typeof d1);

网页查看console

2.引用数据类型

Function
Object
Array
String
Date

后面课程会讲解。

4、运算符

js中的运算符跟python中的运算符有点相似，但也有不一样。所谓运算,在数学上，是一种行为，经过已知量的可能的组合，得到新的量。

1.赋值运算符

以var x = 12,y=5来演示示例|

2.算数运算符

var a = 5,b=2

i++返回的是自增以前的值，++i返回的则是自增后的值

var i = 1;
var x = i++;  //先对x赋值,再对i自增。此时i为2，但赋给x的是1
console.log(i);
console.log(x);

网页查看console

var i = 1;
var x = ++i;  //先自增,再赋值。此时i为2，x也是2
console.log(i);
console.log(x);

网页查看console

3.比较运算符

var x = 5;

举例：

var x = 5;
if (x === 5){
    console.log('值相等,类型也相等');
}else if (x == '5'){
    console.log('值相等');
}else {
    console.log('不匹配');
}

网页查看console

4.特殊状况

字符串拼接+字符串运算特殊状况。python中有拼接字符串中更简便的办法，其实在js中也有，你们能够百度引擎搜索es6模板字符串。（扩展）

var  firstName  = '小';
var lastName = '马哥';
var name = '伊拉克';
var am = '美军';
// 字符串拼接
var str = "2003年3月20日,"+name+"战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，"+am+"又一次取得的大规模压倒性军事胜利。"
var fullStr = str;
console.log(fullStr);

var fullName = firstName +" "+ lastName;
console.log(fullName);

网页查看console

不能对字符串进行数字运算只能拼接。纯数字的字符串除外！

var a1 = '1';
var a2 = '2';
console.log(a1+a2)； //12

网页查看console

注意：只要有一个字符串，遇到加号就表示拼接

NaN. ==== not a number 是number类型

var b1 = 'one';
var b2  = 'two';

// NaN. ==== not a number 是number类型
console.log(typeof(b1*b2))；

网页查看console

5、数据类型转换

语言中咱们的数据类型有不少，在某个页面中展现的数据类型也不一样，好比说电话号码我就要求number的类型，而输入姓名的时候就要求string类型的。那么在适当的状况下咱们能够将数据类型进行转换。

1.将数值类型转换成字符串类型

隐式转换

var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隐式转换
console.log(n3);
console.log(typeof n3);

网页查看console

因为n2是字符串，遇到加号时，只要有一个字符串，那么就表示拼接字符串

因此最终结果是123123，它的类型是字符串

强制类型转换

var n1 = 123;
// 强制类型转换String(),toString()
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString())；

网页查看console

2.将字符串类型转换成数值类型

var  stringNum = '789.123wadjhkd';
var num2 =  Number(stringNum);
console.log(num2);

// parseInt()能够解析一个字符串 而且返回一个整数
// 只保留字符串最开头的数字,后面的直接忽略
console.log(parseInt(stringNum));
//浮点数
console.log(parseFloat(stringNum));

网页查看console

3.任何数据类型均可以转换为boolean类型

var b1 = '123';
var b2 = 0; //false
var b3 = -123;

var b4 = Infinity;
var b5 = NaN;

var b6; //undefined
var b7 = null;

// 非0既真
console.log(Boolean(b1));
console.log(Boolean(b2));
console.log(Boolean(b3));
console.log(Boolean(b4));
console.log(Boolean(b5));
console.log(Boolean(b6));
console.log(Boolean(b7));

View Code

网页查看console

6、流程控制

1.if 、if-else、多层if-else

{}表示一个做用域

if

var ji  = 20;
if(ji >= 20){
    console.log('恭喜你，吃鸡成功，大吉大利')
}
alert('alex');//下面的代码还会执行

网页查看console

if-else

var ji  = 20;
if(ji>=20){
    console.log('恭喜你，吃鸡成功，大吉大利');
}else{
    console.log('很遗憾 下次继续努力');

}

网页查看console

多层if-else

if (true) {
   //执行操做
}else if(true){
    //知足条件执行            
}else if(true){
   //知足条件执行        
}else{
  //知足条件执行
}

2.逻辑与&&、逻辑或||

&& 两个条件都成立的时候才成立

//1.模拟  若是总分 >400 而且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
if(sum>400 && math>90){
    console.log('清华大学录入成功')
}else{
    alert('高考失利')
}

只要有一个条件成立的时候才成立

//2.模拟 若是总分>400 或者你英语大于85 被复旦大学录入
//逻辑或  只有有一个条件成立的时候 才成立
if(sum>500 || english>85){
    alert('被复旦大学录入')
}else{
    alert('高考又失利了')
}

3.switch

var gameScore = 'better';
switch(gameScore){
//case表示一个条件 知足这个条件就会走进来 遇到break跳出。break终止循环。若是某个条件中不写 break，那么直到该程序遇到下一个break中止
    case 'good':
        console.log('玩的很好');
        //break表示退出
        break;
    case  'better':
        console.log('玩的老牛逼了');
        break;
    case 'best':
        console.log('恭喜你 吃鸡成功');
        break;

    default:
        console.log('很遗憾');
}

网页查看console

注意：

若是不写break，它不会结束，会继续执行下面的代码。因此每个条件，必须加break！
不然会出现case 穿透现象

看一个case 穿透现象

var gameScore = 'better';
switch(gameScore){
//case表示一个条件 知足这个条件就会走进来 遇到break跳出。break终止循环。若是某个条件中不写 break，那么直到该程序遇到下一个break中止
    case 'good':
        console.log('玩的很好');
        //break表示退出
        break;
    case  'better':
        console.log('玩的老牛逼了');
        //break;
    case 'best':
        console.log('恭喜你 吃鸡成功');
        break;

    default:
        console.log('很遗憾');
}

View Code

网页查看console

4.while循环

循环三步走：

1.初始化循环变量

2.判断循环条件

3.更新循环变量

var i = 1; //初始化循环变量

while(i<=9){ //判断循环条件
    console.log(i);
    i = i+1; //更新循环条件
}

查看网页console，就会看到1~9的数字，我就不截图了。

练习：将1-100全部是2的倍数在控制台中打印。使用while循环

var i = 1; //初始化循环变量
var sum = 0;
while(i<=100){ //判断循环条件
    if ((i % 2) == 0){  //和2取余,为0表示偶数
        // console.log(i);  //打印偶数
        sum += i;  //计算总和
    }
    i = i+1; //更新循环条件
}
console.log(sum);  //打印最终结果

View Code

结果为2550

5.do_while

do_while不多用，了解一下便可

//无论有没有知足while中的条件do里面的代码都会走一次
var i = 3;//初始化循环变量
do{

    console.log(i);
    i++;//更新循环条件

}while (i<10); //判断循环条件

查看网页console

6.for循环

for(var i = 1;i<=10;i++){  //i的初始值为1,i<=10,i自增1
    console.log(i);
}

网页查看console，会输出1~10

课堂练习：

1~100之间的偶数

for(var i = 1;i<=100;i++){
    if(i%2==0){
        //是偶数
        console.log(i);
    }
}

1-100之间全部数之和

var sum = 0;
for(var j = 1;j<=100;j++){
    sum = sum+j;
}
console.log(sum);

双重fo循环

for(var i=1;i<=3;i++){
            
 　　for(var j=0;j<6;j++){
        document.write('*');
    }
            
   document.write('<br>');
 }

访问网页，效果以下：

小做业：

1.在浏览器中输出直角三角形

效果：

*  
** 
***
****
*****
******

代码：

for(var i=1;i<=6;i++){
    for(var j=1;j<=i;j++){
        //写入到网页body标签中
        document.write("*");
    }
    document.write('<br>');  //写入换行标签
}

View Code

2.在浏览器中输出

          *  
         ***  
        ***** 
       ******* 
      ********* 
     ***********

代码：

for(var i=1;i<=6;i++){ //行数
    //控制咱们的空格数
    for(var s=i;s<6;s++){
        //body写入空格
        document.write('&nbsp;');
    }
    for(var j=1;j<=2*i-1;j++){
        document.write('*');
    }
    document.write('<br>'); //换行符
}

View Code

7、百度换肤

访问百度首页，登陆以后，有一个换肤功能

点击换肤以后，从网页上面，抓取3张背景图

建立目录images，将2个图片到images目录中

下面是用js代码，来完成点击一个小图片，实现换背景皮肤的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        body{
            width: 100%;
            /*默认背景图片*/
            background: url(./images/1.jpg) no-repeat center 0;
            /*把背景图像扩展至足够大，以使背景图像彻底覆盖背景区域*/
            background-size: cover;
        }
        .box{
            width: 100%;
            /*div向下移动40px*/
            padding-top: 40px;
            /*背景颜色,0.3设置透明度*/
            background-color: rgb(255,0,0,0.3);
            /*图片居中显示*/
            text-align: center;
        }
        .box img{
            width: 200px;
        }
    </style>

</head>
<body>
<div class="box">
    <!--每一个图片设置id，方便js获取对象-->
    <img src="./images/1.jpg" alt="" id="pic1">
    <img src="./images/2.jpg" alt="" id="pic2">
    <img src="./images/3.jpg" alt="" id='pic3'>
</div>

<script type="text/javascript">
    //文档加载完成以后（dom元素 图片 音视频）
    window.onload = function(){
        //获取文档dom元素对象
        var oImg1 = document.getElementById('pic1');
        // var oImg2 = document.getElementById('pic2');
        // getElementsByTagName的返回值一个集合,经过索引就能够取值
        //这里表示取索引为1的img标签
        var oImg2 = document.getElementsByTagName('img')[1];
        var oImg3 = document.getElementById('pic3');

        // console.log(oImg1);

        // 事件对象.事件名 = 执行的动做
        //onclick表示点击事件
        oImg1.onclick = function(){
            // this表示当前事件发生者
            console.log(this);
            document.body.style.backgroundImage = "url(./images/1.jpg)";
            this.style.width = '300px';
            oImg2.style.width = '200px';
            oImg3.style.width = '200px';
        }
        oImg2.onclick = function(){
            document.body.style.backgroundImage = "url(./images/2.jpg)";
            this.style.width = '300px';
            oImg1.style.width = '200px';
            oImg3.style.width = '200px';
        }
        oImg3.onclick = function(){
            document.body.style.backgroundImage = "url(./images/3.jpg)";
            this.style.width = '300px';
            oImg1.style.width = '200px';
            oImg2.style.width = '200px';
        }
    }
</script>

</body>
</html>

View Code

网页效果：

若是<script type="text/javascript"></script>放到head标签里面，必需要加window.onload = function(){}

不然你写的js代码会不生效。

window.onload表示，网页加载完毕以后，才让js执行。可是这样有一个缺点：

若是网络很差，那么页面就没法操做，好比登陆。必需要等到全部资源，好比图片，音频，加载完毕，才能操做。

后面会有解决方法的。

Document表示文档对象。每一个载入浏览器的 HTML 文档都会成为 Document 对象。
使用Document对象，能够从脚本中对 HTML 页面中的全部元素进行访问。

按f12，打开网页控制台，输入命令document

点击#document，就能够展开document对象，它能够获取整个html中的全部元素。

获取body元素，使用命令 document.body

获取style属性，使用 document.body.style

这里面列出了全部css能够操做的方法，好比display,color,font-size....等等

改样式，必需要用到style

这里能够直接换肤，输入命令

document.body.style.backgroundImage = "url('./images/2.jpg')"

网页，当即显示唐嫣的照片

这就是换肤的原理，经过修改html标签来实现的。

获取全部的img元素

返回的结果是一个集合，经过元素能够取值，好比取第2个图片

使用命令 document.getElementsByTagName('img')[1]

获取id为pic2的标签

8、显示隐藏

点击按钮，让div隐藏，再次点击，就显示div

代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .show{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <button>隐藏</button>
        <div class="show" id="box"></div>
    </div>
    
    <script>
        window.onload = function(){
            // 获取div对象
            var box =  document.getElementById('box');
            // 标志位
            var isShow = true;
            // 即便只有一个botton,也要使用[0]来获取，onclick表示点击事件
            document.getElementsByTagName('button')[0].onclick = function(){
                //this表示当前事件发生者，也就是你点击的标签
                console.log(this);
                // 当标志位为true时
                if (isShow) {
                    //修改box的css属性，display:none，表示隐藏
                    box.style.display = 'none';
                    //修改按钮的文字
                    this.innerText = '显示';
                    //设置标志位为false
                    isShow = false;
                }else{
                    //display = 'block'，表示显示内容
                    box.style.display = 'block';
                    this.innerText = '隐藏';
                    isShow = true;
                }
            }
        }
    </script>
    
</body>
</html>

View Code

网页效果：

今日做业：

1.微信商学院，完成剩余部分

2.使用for循环，输出直角三角形和等腰三角形

3.练习百度换肤和显示隐藏

4.预习明天的 内置对象

微信商学院

官方连接

http://daxue.qq.com/wechat

上半部分效果以下：

python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

1、Javascript简介

Web前端有三层：

JavaScript历史背景介绍

JavaScript和ECMAScript的关系

JavaScript的发展：蒸蒸日上

JavaScript入门易学性

JavaScript是前台语言

JavaScript的组成

JavaScript的特色

2、第一个JavaScript代码

alert语句

js的引入方式

行内式

内接式

外接式

语法规则

单行注释：

多行注释：

JavaScript在网页中输出信息的写法

弹出警告框：alert("")

控制台输出：console.log("")

用户输入：prompt()语句

直接量：数字和字符串

变量

变量的定义和赋值

变量的命名规范

下列的单词，叫作保留字，就是说不容许当作变量名，不用记：

变量的类型

数值型：number

字符串型：string

连字符和加号的区别

变量值的传递（赋值）

变量格式转换

用户的输入

parseInt()：字符串转数字

3、数据类型

1.基本数据类型

number - 数字

string - 字符串

boolean - 布尔值

null

undefined

2.引用数据类型

4、运算符

1.赋值运算符

2.算数运算符

3.比较运算符

4.特殊状况

5、数据类型转换

1.将数值类型转换成字符串类型

隐式转换

强制类型转换

2.将字符串类型转换成数值类型

3.任何数据类型均可以转换为boolean类型

6、流程控制

1.if 、if-else、多层if-else

if

if-else

多层if-else

2.逻辑与&&、逻辑或||

&& 两个条件都成立的时候 才成立

只要有一个条件成立的时候 才成立

3.switch

4.while循环

5.do_while

6.for循环

双重fo循环

7、百度换肤

8、显示隐藏

　　单行注释：

　　多行注释：

`parseInt()`：字符串转数字

&& 两个条件都成立的时候才成立

只要有一个条件成立的时候才成立