web前端开发：JavaScript网页脚本语言

JavaScript网页脚本语言
一、JavaScript简介
三、变量与常量
- 1.JS中声明变量需要的关键字
- 2.声明常量的关键字
四、JS中的基本数据类型
五、运算符
六、流程控制
- 1.条件语句
- 2.循环语句
  - （1）for循环
  - （2）while循环
七、函数
八、内置对象

JavaScript网页脚本语言

JavaScript是一种完整的网页脚本语言，有自己独立的语法，可以完成复杂的程序逻辑，而HTML和CSS仅仅是标记语言，不具备编程语言的程序逻辑。

JavaScript的作用

JavaScript主要负责网页的各式各样的动态功能，因此可以为用户提供更流畅美观的页面浏览效果，以及添加页面交互行为，给用户更好的视觉和使用体验。
JavaScript的工作原理

JavaScript的工作原理是通过在HTML网页中直接嵌入JS脚本，可以实现相应浏览器时间，读写HTML元素内容，更改HTML元素样式等功能。

一、JavaScript简介

JavaScript与Java没有关系，JavaScript是一门前端工程师的编程语言，但是它本身有很多逻辑错误

Brendan Eich设计JavaScript的思路

（1）借鉴C语言的基本语法；

（2）借鉴Java语言的数据类型和内存管理；

（3）借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；

（4）借鉴Self语言，使用基于原型（prototype）的继承机制。

JavaScript的组成

ECMAScript，描述了该语言的语法和基本对象。

文档对象模型（DOM），描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口二、JS基础

1.注释语法

单行注释

 // 单行注释

多行注释

 /*多行注释*/

2.引入JS的方式

（1）head内script标签内编写

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        prompt('天气很冷','多喝热水')
    </script>
</head>
<body>
 
</body>
</html>

（2）head内script标签src属性引入外部JS资源

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js.js"></script>
</head>
<body>
 
</body>
</html>

js.js

   prompt('天气很冷','多喝热水')

（3）body内最底部通过script标签src属性引入外部js资源（最常用）

由于代码从上而下运行，操作js代码一定要等待标签加载完毕次执行才可以正常运行，js代码则要放在最下面

3.结束符号

JS的结束符号是分号;，也可以不写

三、变量与常量

JS代码的IDE

1.pycharm中创建JS文件，或者在html文件中编写js代码（适合编写复杂的JS代码）

2.浏览器的console中编写JS代码

1.JS中声明变量需要的关键字

var

 // 声明的时候定义变量
var username = 'jason'
 
// 先声明后定义
var name
name='qiuqiu'
'qiuqiu'
name
'qiuqiu'

let

let是ECMA6新语法，用法类似于 var 可以在局部定义变量不影响全局，用于声明变量（声明的变量属于块级作用域），流程控制语句的{}就是块级作用域。

 var n = 999
for (let n=0;n<10;n++){
  console.log(n)
}
VM741:1 0
VM741:1 1
VM741:1 2
VM741:1 3
VM741:1 4
VM741:1 5
VM741:1 6
VM741:1 7
VM741:1 8
VM741:1 9
n
999

python中，for循环中使用的变量名，会在全局中生效

2.声明常量的关键字

声明常量使用关键字const

 const p = 3.14
pageXOffset
0
p
3.14

四、JS中的基本数据类型

JS是动态语言：变量中可以存储数值类型、字符类型的数据，从而根据存储内容的类型不同，来动态决定自己的类型

在JS中查看数据的基本数据类型

 typeof + 数据

1.数值类型Number

在JS中整型和浮点型都属于Number，并没有细分

转换整型parseInt

 parseInt('456.56')
456

转成浮点型parseFloat

 parseFloat('456.56')
456.56

数值类型NaN

NaN也属于数值类型，意思是：不是一个数字Not A Number

2.字符类型String

（1）类型

单引号

 'duoduo'

双引号

 "球球"

模版字符串(类似于python中的格式化输出)

 let name1=`duoduo`
let age1=18
let desc=`my name is${name1} my age is ${age1}`
desc
'my name isduoduo my age is 18'

字符串拼接在js中推荐使用+ 号，虽然在python中使用+号底层效率较低，但是在例如JS的其他语言中+ 号底层的拼接效率较高

（2）内置方法

方法	说明
`.length`	返回长度
`.trim()`	移除空白
`.trimLeft()`	移除左边的空白
`.trimRight()`	移除右边的空白
`.charAt(n)`	返回第n个字符
`.concat(value, ...)`	拼接,拼接字符串通常使用“+”号
`.indexOf(substring, start)`	子序列位置
`.substring(from, to)`	根据索引获取子序列
`.slice(start, end)`	切片
`.toLowerCase()`	小写
`.toUpperCase()`	大写
`.split(delimiter, limit)`	分割

 let s1 = '   mofei定律998   '
 
s1.length
16
 
s1.trim()
'mofei定律998'
 
s1.charAt(9)
'律'
 
s1.concat('多喝热水')
'   mofei定律998   多喝热水'
 
s1+'多喝热水'
'   mofei定律998   多喝热水'
 
s1.indexOf('律')
9
 
s1.slice(5,9)
'fei定'
 
s1.toLowerCase()
'   mofei定律998   '
 
s1.toUpperCase()
'   MOFEI定律998   '
 
s1.split('9',1)
['   mofei定律']0: "   mofei定律"length: 1[[Prototype]]: Array(0)

3.布尔类型Boolean

在JS里面的布尔值为纯小写

 var a = true;
var b = false;

JS中布尔值为false的数据类型

空字符串、 0 、 null、 undefined、 NaN

 Boolean('')
false
Boolean(0)
false
Boolean(null)
false
Boolean(undefined)
false
Boolean(NaN)
false

空数组的布尔值为true

 Boolean([])
true

4.`null`和`undefined`

名称	含义
`null`	表示值为空--曾经拥有过
`undefined`	表示没有定义--从来没有过

null表示值为空，一般在需要指定或者清空一个变量时才会使用，如

 name=null

undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined

或函数无返回值的时候，也返回undefined

5.对象object

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型

（1）对象之数组（`Array`）

数组对象的作用是使用单独的变量名来储存一系列的值，类似于python中的列表

数组的方法

方法	作用
`.length`	数组的大小
`.push(ele)`	尾部追加元素
`.pop()`	获取尾部的元素
.unshift(ele)``	头部插入元素
`.shift()`	头部移除元素
`.slice(start, end)`	切片
`.reverse()`	反转
`.join(seq`)	将数组元素连接成字符串
`.concat(val, ...)`	连接数组
`.sort()`	排序
`.forEach()`	将数组的每个元素传递给回调函数
`.splice()`	删除元素，并向数组添加新元素。
`map()`	返回一个数组元素调用函数处理后的值的新数组

 let ar1=[11,22,33,'duoduo']
ar1[2] //按索引取值
33
 
ar1.length
4
 
ar1.push(ar1)
5
 
ar1.pop()
(4) [11, 22, 33, 'duoduo']0: 111: 222: 333: "duoduo"length: 4[[Prototype]]: Array(0)
 
ar1.unshift(ar1)
5
 
ar1.shift(0)
(4) [11, 22, 33, 'duoduo']
 
ar1.slice(1,3)
(2) [22, 33]
 
ar1.reverse()
(4) ['duoduo', 33, 22, 11]
 
ar1.join('|')
'duoduo|33|22|11'
 
ar1.concat('球球')
(5) ['duoduo', 33, 22, 11, '球球']
 
ar1.sort()
(4) [11, 22, 33, 'duoduo']
 
ar1.splice(1,'qiuqiu')
[]length: 0[[Prototype]]: Array(0)

map()

 ar2.map(function(value,index,arr){
    return value + 1
})
 
[23, 34, 45, 56]

（2）对象之自定义对象object

类似于python 的字典

 //定义自定义对象
let d1={'name':'duoduo','pwd':123}
 
//查看 d1类型
typeof d1
'object'
// 获取值可以索引也可以直接点
d1.name
'duoduo'
 
d1['name']
'duoduo'
 
//直接通过点的方法新增键值对
d1.gender = 'male'
'male'
 
d1
{name: 'duoduo', pwd: 123, gender: 'male'}

五、运算符

1.算数运算符

符号	作用
+	加
-	减
*	乘
/	除
%	去余数
++	自增1
--	子减1

 var x=10;
    	var res1=x++;  加号在后面	先赋值后自增
    	var res2=++x;	加号在前面	 先自增后赋值

2.比较运算符

   !=(值不等 弱) 
  ==(值相等 弱) 
  ===(值相等 强) 
  !==(值不等 强)

3.逻辑运算符

逻辑运算符	含义
`&&`	与
`
`!`	非

六、流程控制

1.条件语句

（1）单if分支

 	if (条件){
        条件成立执行的代码
    }

（2）if...else分支

 	if(条件){
        条件成立执行的代码
    }else{
        条件不成立执行的代码
    }

（3）if...else if...else分支

 	if(条件1){
        条件1成立执行的代码
    }else if(条件2){
        条件1不成立条件2执行的代码
    }
    else{
        条件1和2都不成立执行的代码
    }

 var d=new Date()
 
if (d.getDay()==0){
    alert("今天周末")
} else if (d.getDay()==6 ) {
    alert("今天周末")
} else {
    alert("今天工作日")
}

（4）如果分支结构中else if很多还可以考虑使用switch语法

 	switch(条件){
        case 条件1:
        	条件1成立执行的代码;
        	break;  
        case 条件2:
        	条件2成立执行的代码;
        	break;
        case 条件3:
        	条件3成立执行的代码;
        	break;
       	case 条件4:
        	条件4成立执行的代码;
        	break;
        default:
  			 条件都不满足执行的代码
    }

 let d3=new Date()
switch (d3) {
    case d3 ==0:
        console.log("今天是周末")
        break;
    case d3 ==6:
        console.log("今天是周六")
        break;
    default:
        console.log("工作日")
    
}
工作日

break结束case后条件的语句，如果没有break会基于某个case一直执行下去

2.循环语句

（1）for循环

 	for(起始条件;循环条件;条件处理){
        循环体代码
    }
	for(let i=0;i<10;i++){
       	 console.log(i)
    }
 	let dd = {'name':'jason','age':18}
   for(let k in dd){
        console.log(k)
    }

（2）while循环

 	while(循环条件){
        循环体代码
    }

七、函数

1.语法

 function 函数名(形参数){
    // 函数注释
    函数体代码
    return 返回值
}

2.函数类型

无参函数

 function f1() {
    console.log('你好')
};
f1()
----
你好

有参函数

 function f2(a, b) {
    console.log(arguments);
    console.log(arguments.length);
  
    console.log(arguments[0],argument[1]);
    console.log(a, b);
};

匿名函数

和python中的匿名函数lambda 相似，不单独使用，配合其他好函数一起使用

 var s1 = function(a, b){
  return a + b;
}

箭头函数

 var f=v=>v;
 
// 完整写法
var f=function(v){
  return v
}

3.函数中的注意事项

（1）JS中函数的形参与实参可以不对应，传少了就是显示underfined

（2）函数中的arguments，对于一个普通的函数，函数内部设置了一个arguments对象，当用于接收实参个数不确定时，函数中的arguments对象会自动接收多余参数

 function fn(){
  console.log(arguments)
}
fn(1,2,3)

（3）JS中函数的返回值只会返回位于末尾一个，当需要多个返回值时，需要我们自己将其处理成一个整体

八、内置对象

1.时间对象

 // 通过new方法产生时间对象
var d = new Date();

时间对象的方法	含义
`.getDate()`	获取日
`.getDay ()`	获取星期
`.getMonth ()`	获取月（0-11）
`.getFullYear ()`	获取完整年份
`.getYear ()`	获取年
`.getHours ()`	获取小时
`.getMinutes ()`	获取分钟
`.getSeconds ()`	获取秒
`.getMilliseconds ()`	获取毫秒
`.getTime ()`	返回累计毫秒数(从1970/1/1午夜)

2.JSON对象

先定义一个自定义对象

 let dd = {name:'duoduo',pwd:123}

序列化JSON.stringify

序列化的结果需要用变量名来接收

 JSON.stringify(dd)
 
'{"name":"duoduo","pwd":123}'

反序列化JSON.parse

 JSON.parse(j1)

3.正则对象RegExp

定义正则的方式一：

 var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");

定义正则的方式二：

 var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

编写代码，将当前日期按“2017-12-27 11:11 星期三”格式输出

     function time_string () {
        const WEEK_NUM = {
        0: "星期日",
        1: "星期一",
        2: "星期二",
        3: "星期三",
        4: "星期四",
        5: "星期五",
        6: "星期六",
    }
 
 
        // 对时间对象t进行操作
        let t = new Date() //产生一个时间对象t
        let t_year = t.getFullYear();
        let t_month = t.getMonth();
 
        let t_day = t.getDate();
        let t_hour = t.getHours();
        let t_minute = t.getMinutes();
 
        let week = WEEK_NUM[t.getDay()];
 
        let t_string= `
        ${t_year}-${t_month}-${t_day} ${t_hour}:${t_minute} ${week}
        `;
        console.log(t_string)
    }

posted @ 2022-12-05 20:49 Duosg 阅读(724) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 12.5-12.9周末小结

· JavaScript：jQuery类库

· 前端开发：4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循环结构、内置方法

· JS基础知识及变量常量、基本数据类型、运算符、流程控制、函数、内置对象

· 前端基础之JavaScript

公告

昵称： Duosg
园龄： 2年5个月
粉丝： 11
关注： 21

+加关注

2025年3月

日

一

二

三

四

五

六

随笔档案

阅读排行榜

评论排行榜

1. 十二周周末小结结(1)

	!=(值不等弱)
	==(值相等弱)
	===(值相等强)
	!==(值不等强)

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script>
	prompt('天气很冷','多喝热水')
	</script>
	</head>
	<body>

	</body>
	</html>

	// 声明的时候定义变量
	var username = 'jason'

	// 先声明后定义
	var name
	name='qiuqiu'
	'qiuqiu'
	name
	'qiuqiu'

	var n = 999
	for (let n=0;n<10;n++){
	console.log(n)
	}
	VM741:1 0
	VM741:1 1
	VM741:1 2
	VM741:1 3
	VM741:1 4
	VM741:1 5
	VM741:1 6
	VM741:1 7
	VM741:1 8
	VM741:1 9
	n
	999

	let name1=`duoduo`
	let age1=18
	let desc=`my name is${name1} my age is ${age1}`
	desc
	'my name isduoduo my age is 18'

	let s1 = ' mofei定律998 '

	s1.length
	16

	s1.trim()
	'mofei定律998'

	s1.charAt(9)
	'律'

	s1.concat('多喝热水')
	' mofei定律998 多喝热水'

	s1+'多喝热水'
	' mofei定律998 多喝热水'

	s1.indexOf('律')
	9

	s1.slice(5,9)
	'fei定'

	s1.toLowerCase()
	' mofei定律998 '

	s1.toUpperCase()
	' MOFEI定律998 '

	s1.split('9',1)
	[' mofei定律']0: " mofei定律"length: 1[[Prototype]]: Array(0)

	Boolean('')
	false
	Boolean(0)
	false
	Boolean(null)
	false
	Boolean(undefined)
	false
	Boolean(NaN)
	false

	let ar1=[11,22,33,'duoduo']
	ar1[2] //按索引取值
	33

	ar1.length
	4

	ar1.push(ar1)
	5

	ar1.pop()
	(4) [11, 22, 33, 'duoduo']0: 111: 222: 333: "duoduo"length: 4[[Prototype]]: Array(0)

	ar1.unshift(ar1)
	5

	ar1.shift(0)
	(4) [11, 22, 33, 'duoduo']

	ar1.slice(1,3)
	(2) [22, 33]

	ar1.reverse()
	(4) ['duoduo', 33, 22, 11]

	ar1.join('\|')
	'duoduo\|33\|22\|11'

	ar1.concat('球球')
	(5) ['duoduo', 33, 22, 11, '球球']

	ar1.sort()
	(4) [11, 22, 33, 'duoduo']

	ar1.splice(1,'qiuqiu')
	[]length: 0[[Prototype]]: Array(0)

	ar2.map(function(value,index,arr){
	return value + 1
	})

	[23, 34, 45, 56]

	//定义自定义对象
	let d1={'name':'duoduo','pwd':123}

	//查看 d1类型
	typeof d1
	'object'
	// 获取值可以索引也可以直接点
	d1.name
	'duoduo'

	d1['name']
	'duoduo'

	//直接通过点的方法新增键值对
	d1.gender = 'male'
	'male'

	d1
	{name: 'duoduo', pwd: 123, gender: 'male'}

	var x=10;
	var res1=x++; 加号在后面先赋值后自增
	var res2=++x; 加号在前面先自增后赋值

	if(条件){
	条件成立执行的代码
	}else{
	条件不成立执行的代码
	}

	if(条件1){
	条件1成立执行的代码
	}else if(条件2){
	条件1不成立条件2执行的代码
	}
	else{
	条件1和2都不成立执行的代码
	}

	var d=new Date()

	if (d.getDay()==0){
	alert("今天周末")
	} else if (d.getDay()==6 ) {
	alert("今天周末")
	} else {
	alert("今天工作日")
	}

	switch(条件){
	case 条件1:
	条件1成立执行的代码;
	break;
	case 条件2:
	条件2成立执行的代码;
	break;
	case 条件3:
	条件3成立执行的代码;
	break;
	case 条件4:
	条件4成立执行的代码;
	break;
	default:
	条件都不满足执行的代码
	}

	let d3=new Date()
	switch (d3) {
	case d3 ==0:
	console.log("今天是周末")
	break;
	case d3 ==6:
	console.log("今天是周六")
	break;
	default:
	console.log("工作日")

	}
	工作日

	for(起始条件;循环条件;条件处理){
	循环体代码
	}
	for(let i=0;i<10;i++){
	console.log(i)
	}
	let dd = {'name':'jason','age':18}
	for(let k in dd){
	console.log(k)
	}

	function 函数名(形参数){
	// 函数注释
	函数体代码
	return 返回值
	}

	function f2(a, b) {
	console.log(arguments);
	console.log(arguments.length);

	console.log(arguments[0],argument[1]);
	console.log(a, b);
	};

	function time_string () {
	const WEEK_NUM = {
	0: "星期日",
	1: "星期一",
	2: "星期二",
	3: "星期三",
	4: "星期四",
	5: "星期五",
	6: "星期六",
	}


	// 对时间对象t进行操作
	let t = new Date() //产生一个时间对象t
	let t_year = t.getFullYear();
	let t_month = t.getMonth();

	let t_day = t.getDate();
	let t_hour = t.getHours();
	let t_minute = t.getMinutes();

	let week = WEEK_NUM[t.getDay()];

	let t_string= `
	${t_year}-${t_month}-${t_day} ${t_hour}:${t_minute} ${week}
	`;
	console.log(t_string)
	}

duoduosg