网页开发用js还是python_python web 之javascript

JavaScript是什么

JavaScript(下文我们会用简称JS来代替)是脚本编程语言，JS语言开发的文件是以.js为后缀，通过在html文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑(js语言代码也可以直接写在html文件中)，采用的ECMAScript语法，属于编程语言。

ECMAScript目前普遍使用的存在ES5与ES6两个版本，我们也会基于这两个版本来介绍JS这么应用的学习

JavaScript如何学习

学习方向：从JS代码书写位置、JS基础语法、JS选择器和JS页面操作四部分进行学习

学习目的：完成页面标签与用户的人机交互及前台数据处理的业务逻辑

1、JS代码书写位置

JS属于脚本(可以以代码片段的方式内嵌到其他语言中)编程语言，可以内嵌到html代码中，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。

① 行间式

JS代码书写在标签的事件全局属性中，采用的是JS编程语言的语法

点我

② 内联式

JS代码书写在script标签中，script标签可以出现在页面中的任意位置，建议放在body标签的最后(html代码是自上而下进行解析加载，放在body标签的最下方，会保证页面所有标签都加载完毕，html再去加载js文件，那么js脚步文件就会更好的控制页面标签的人机交互了)，采用的是JS编程语言的语法

alert('该页面被加载！')

③ 外联式

JS代码书在外部js文件中，在html页面中用script标签引入js文件(建议在body标签最下方引入，理由同上)

js文件夹下的my.js

alert('外联式js文件弹出框')

根目录下的first.html

/* 不要在此写JS代码，原因是用来引入外部js文件的script标签，标签内部书写的JS代码不在起作用 */

根目录下的second.html

/* 不要在此写JS代码，原因是用来引入外部js文件的script标签，标签内部书写的JS代码不在起作用 */

总结：

行间式控制交互最直接，但是交互逻辑多了直接导致页面可读性变差，且交互逻辑相同的标签样式也需要各自设置，复用性差，不建议使用；

内联式可以同时为多个标签提供交互逻辑(课程后面会详细介绍)，学习阶段代码量不大的情况下，也不需要分文件处理的，这时候建议使用内联式；

外联式是分文件管理不同的页面存在的相同与不同的数据处理的业务逻辑与人机交互，可以极大提高开发效率，项目开发时一定要采用外联式来处理JS代码。

通过上面的介绍，大家很清楚JS是一门脚本编程语言，那么我们一定先要了解一下这门编程语言的基础语法，才可以慢慢的展开学。

2、JavaScript基础语法

我们前期已经学习了Python这门编程语言，也知道了一门编程语言的基础如何来学习，我们JS的基础和Python大致相同，只是存在一些语法上的差异而已。

下面我们就从：

1、变量的定义

2、基本数据类型

3、运算符

4、分支结构

5、循环结构

6、JS中对象的运用

7、函数

七个方向来学习JS这门语言。

① 变量的定义

JS中定义变量，不同于Python，我们需要像Python定义函数那样，也需要用特定的关键词来定义变量：

ES5语法，我们采用var关键词定义变量，并且没有常量的概念

ES6语法，我们采用let关键词定义变量，用const关键词定义常量

注：我们不需要像Python那样切换解释器版本来区别到底该书写什么版本语法的代码，在一个JS文件中我们可以同时书写两种语法的JS代码，浏览器都可以自动帮我们解析并运行。

// ES5定义变量：var是关键词、num是变量名、=为赋值符、10为变量值、;为JS语言语句的结束标识符

var num = 10;

// ES6定义变量

let count = 100;

const PI = 3.14;

补充：变量的命名规范

/*

1. 由字母，数字，_，$组成，不能以数字开头(可以包含中文字符)

2. 区分大小写

3. 不能出现关键字及保留字

*/

abstract

arguments

boolean

break

byte

case

catch

char

class*

const

continue

debugger

default

delete

do

double

else

enum*

eval

export*

extends*

false

final

finally

float

for

function

goto

if

implements

import*

in

instanceof

int

interface

let

long

native

new

null

package

private

protected

public

return

short

static

super*

switch

synchronized

this

throw

throws

transient

true

try

typeof

var

void

volatile

while

with

yield

② 基本数据类型

JS语言中基本数据类型分值类型与引用类型两部分。

值类型

// 数字类型：number

var num = 10;

const PI = 3.14;

console.log(typeof(num), num); // 结果：number 10

// 字符串类型：string

var s1 = "双引号可以表示字符串";

var s2 = '单引号可以表示字符串';

console.log(typeof(s1), s1); // 结果：string 双引号可以表示字符串

// 布尔类型：boolean

var b1 = true;

var b2 = false;

console.log(typeof(b1), b1); // 结果：string 双引号可以表示字符串

// 未定义类型：undefined

var u1;

var u2 = undefined;

console.log(typeof(u1), u1); // 结果：undefined undefined

引用类型

// 函数类型：function

function fn1() {}

var fn2 = function() {};

console.log(typeof(fn1), fn1); // 结果：function ƒ fn1() {}

// 对象类型：object

var obj1 = {}

console.log(typeof(obj1), obj1); // 结果：function {}

// Array对象类型：

var arr1 = [1, 2, 3, 4, 5]

console.log(typeof(arr1), arr1); // 结果：object (5) [1, 2, 3, 4, 5]

③ 运算符

算数运算符

前提：n = 5

运算符

描述

例子

x结果

n结果

+

加法

x=n+2

7

5

-

减法

x=n-2

3

5

*

乘法

x=n*2

10

5

/

除法

x=n/2

2.5

5

%

取模(余数)

x=n/2

1

5

++

自增

x=++n

6

6

x=n++

5

6

--

自减

x=--n

4

4

x=n--

5

4

赋值运算符

前提：x=5，y=5

运算符

例子

等同于

运算结果

=

x=y

5

+=

x+=y

x=x+y

10

-=

x-=y

x=x-y

0

*=

x*=y

x=x*y

25

/=

x/=y

x=x/y

1

%=

x%=y

x=x%y

0

比较运算符

前提：x=5

运算符

描述

比较

结果

==

等于

x=="5"

true

===

绝对等于

x==="5"

false

!=

不等于

x!="5"

fales

!==

不绝对等于

x!=="5"

true

>

大于

x>5

false

<

小于

x<5

false

>=

大于等于

x>=5

true

<=

小于等于

x<=5

true

逻辑运算符

前提：n=5

运算符

描述

例子

结果

&&

与

x=n>10&&++n

x=false,n=5(短路)

||

或

x=n<10||n--

x=true,n=5(短路)

!

非

x=!n

x=false,x=5

三目运算符

// 结果 = 条件表达式 ? 结果1 : 结果2;

// 语法规则：条件表达式成立，将结果1赋值给结果，反正赋值结果2

// 案例：

var weather = prompt("天气(晴|雨)"); // 文本输入弹出框

var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";

console.log(res); // 今天天气挺好

④ 分支结构

if 基础语法

if (条件表达式) {

代码块;

}

// 1. 当条件表达式结果为true，会执行代码块；反之不执行

// 2. 条件表达式可以为普通表达式

// 3. 0、undefined、null、""、NaN为假，其他均为真

if 复杂语法

// 1.双分支

if (表达式1) {

代码块1;

} else {

代码块2;

}

// 2.多分支

if (表达式1) {

} else if (表达式2) {

}

...

else if (表达式2) {

} else {

}

if 嵌套

if (表达式1) {

if (表达式2) {

}

}

案例：

var weather = prompt("天气(晴|雨)"); // 文本输入弹出框

if (weather == "晴") {

alert("今天是晴天")

} else if (weather == "雨") {

alert("今天是雨天")

} else {

alert("输入信息有误")

}

⑤ 循环结构

for循环

for (循环变量①; 条件表达式②; 循环变量增量③) {

代码块④;

}

// for循环执行的顺序：① ②④③ ... ②④③ ②，入口为①，出口为②，②④③就是循环过程

// 案例：

for (var i = 0; i < 5; i++) {

console.log(i);

}

// 结果：

0

1

2

3

4

while循环

while (条件表达式) {

代码块;

}

// 条件满足执行代码块，条件不满足跳出循环

// 案例：

var i = 0;

while (i < 5) {

console.log(i);

i++;

}

// 结果：

0

1

2

3

4

for…in迭代器

var arr = [1, 2, 3, 4, 5]

for (num in arr) {

console.log(num);

}

// 结果：

0

1

2

3

4

break，continue关键词

// 1. break：结束本层循环

// 2. continue：结束本次循环进入下一次循环

⑥ JS中对象的运用

JS语言中没有字典类型的存在，但是JS对象可以很好的来表示Python语法中dict类型表示的数据，其使用方式也及其简单。

// 定义对象：可以将对象看做字典来使用

var teacher = {name: "Zero", age: 28}

// 取值

var res = teacher.name;

res = teacher['name'];

// 改值

teacher.name = "Owen";

// 增值

teacher.gender = "男";

// 删值

delete teacher.age

⑦ 函数

函数的定义

function 函数名 (参数列表) {

函数体;

}

var 函数名 = function (参数列表) {

函数体;

}

函数的调用

函数名(参数列表)

函数的参数

// 个数不需要统一

function fn (a, b, c) {

console.log(a, b, c) // 结果：100 undefined undefined

}

fn(100); // 并未给b，c传值

function fn (a) {

console.log(a) // 结果：100

}

fn(100, 200, 300); // 200，300被丢弃

// 可以任意位置具有默认值

function fn (a, b=20, c, d=40) {

console.log(a, b, c, d) // 100 200 300 40

}

fn(100, 200, 300); // 一定按照先后顺序依次传参

// 通过...语法接收多个值

function fn (a, ...b) {

console.log(a, b) // 100 [200 300]

}

fn(100, 200, 300)

// ...变量必须出现在参数列表最后

函数的返回值

function fn () {

return 返回值;

}

// 1.可以空return操作，用来结束函数

// 2.返回值可以为任意js类型数据

// 3.函数最多只能拥有一个返回值

3、JS选择器

想必大家学习完之前的内容，已经知道了css选择器本质就是css与html两种语法建立关联的特定标识符，那在JS语言的语法中，也有特点的方式与html语言编写的表情建立关联，我们就称之为JS选择器。

① getElement系列

// 1.通过id名获取唯一满足条件的页面元素

document.getElementById('id名');

// 该方法只能由document调用

// 2、通过class名获取所有满足条件的页面元素

document.getElementsByClassName('class名');

// 该方法可以由document及任意页面元素对象调用

// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)

// 没有匹配到任何结果返回空HTMLCollection对象 ([])

// 3.通过tag名获取所有满足条件的页面元素

document.getElementsByTagName('tag名');

// 该方法可以由document及任意页面元素对象调用

// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)

// 没有匹配到任何结果返回空HTMLCollection对象 ([])

② querySelect系列

// 1.获取第一个匹配到的页面元素

document.querySelector('css3语法选择器');

// 该方法可以由document及任意页面对象调用

// 2.获取所有匹配到的页面元素

document.querySelectorAll('css3语法选择器');

// 该方法可以由document及任意页面对象调用

// 返回值为NodeList (一个类数组结果的对象，使用方式同数组)

// 没有匹配到任何结果返回空NodeList对象 ([])

案例：

var box1 = document.getElementById('box');

var box2 = document.querySelector('.box');

// box1 === box2，就代表页面id为box，class为box的div标签

4、JS页面操作

我们学习完JS的基本语法后，知道如何简单使用JS语言，有掌握了JS选择器，就可以与页面建立起联系，那我们可以通过哪些方式与页面标记进行交互？有可以在交互的过程中对标签进行哪些具体的操作呢？

① 鼠标事件

我们先来看一下交互的方式，叫做标签对象的事件绑定，可以绑定的事件有：

/*

onclick：鼠标点击

ondblclick：鼠标双击

onmousedown：鼠标按下

onmousemove：鼠标移动

onmouseup：鼠标抬起

onmouseover：鼠标悬浮

onmouseout：鼠标移开

oncontextmenu：鼠标右键

*/

② 事件的绑定

具体绑定事件的方式：

绑定点击事件后可以完成点击交互

var box = document.querySelector('.box');

// 页面class为box的div被鼠标点击后会有弹出框

box.onclick = function() {

alert("box标签被点击了")

}

那么绑定完事件后又可以怎样具体操作页面标签呢？

操作行间式样式

.box {

width: 200px;

height: 200px;

}

var box = document.querySelector('.box');

// 语法：页面对象.全局style属性.具体的样式名

box.onclick = function() {

// 读：获取行间式样式值

var bgColor = box.style.backgroundColor;

// 写：对行间式样式进行赋值，初始没有该条行间式样式，相同会自动添加设置好的行间式

box.style.backgroundColor = 'orange'; // css3多个单词的属性名采用小驼峰命名法

}

只读 计算后 样式

.box {

width: 200px;

height: 200px;

}

var box = document.querySelector('.box');

// 语法：getComputedStyle(页面元素对象, 伪类).样式名;

// 注：我们不需要考虑伪类的范畴，直接用null填充即可

box.onclick = function() {

// 只读：获取计算后样式值

var width = getComputedStyle(box, null).width;

}

操作标签class名

class名操作

var box = document.querySelector('.box');

// 查看类名

var cName = box.className;

// 修改类名

box.className = "ele";

// 增加类名

box.className = " tag"; // 添加后的结果class="ele tag"，所以赋值时一定注意tag前有个空格字符串

// 删除所有类名

box.className = "";

操作标签全局属性值

var img = document.querySelector('.image');

// 查看全局属性值

var imgSrc = img.getAttribute('src');

// 修改全局属性值

img.setAttribute('src', 'img/bg_logo.png');

// 删除全局属性值

img.setAttribute = ('src', '');;