前端语言之js(对比python快速入门)
昨日内容回顾
- 浮动
- 定位
- 溢出
- 透明度
- 模态框
今日内容概要
- 变量与常量
- 基本数据类型
- 数据类型内置方法
- 函数
- 常见内置对象
- BOM与DOM操作
内容详细
1.变量与常量
python"># 在JS中声明变量需要使用关键字 老版本 var(全部都是全局变量)
新版本 let(可以声明局部变量 推荐使用let)
"""
JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
声明变量使用 var 变量名; 的格式来进行声明
"""
# 在JS中声明常量也需要使用关键字
const >>>声明一个真正意义上的常量
# 如何创建变量
var name = 'jason'
let name = 'jason01'
# 如何创建常量
const pi = 3.14
# 编写js代码的位置
1.pycharm提供的js文件
2.直接使用浏览器提供的编程环境
"""打开浏览器页面后 鼠标右键 选择检查 按下图所选即可"""
"""
pycharm在使用上述关键字的时候如果出现了报错 说明js版本没有选择6
需要我们自定义设置 settings>>>l&f>>>js 如图
"""
2.基本数据类型
# python基本数据类型 int 整型、float 浮点型、str 字符串、list 列表、dict 字典、bool 布尔值、tuple 元组、set 集合
# js基本数据类型
number、string、boolean、undefined、object()
# 查看数据类型
python中使用 type()
js中使用 typeof
3.number类型
# JavaScript不区分整型和浮点型，就只有一种数字类型var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
var d = 123e-5; // 0.00123
# 还有一种NaN，表示不是一个数字（Not a Number)
parseInt 转整型
parseFloat 转浮点型
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456
"""NaN属于数值类型 表示的意思是 不是一个数字"""
4.string类型
# 定义字符类型的方式 1.单引号 ''
2.双引号 ""
3.反引号 ``
var s1 = `
jason老师
tony老师
kevin老师
`
# 在js中字符串的拼接推荐使用+号
# 格式化输出(模板字符串的功能)
var name1 = 'jason'
var age = 18
`my name is ${name1} my age is ${age} `
5.boolean类型
# 在python中布尔值类型首字母大写 True False
# 在js中布尔值类型全部小写
true false
""(空字符串)、0、null、undefined、NaN都是false
6.null与undefined类型
# null表示值是空，一般在需要指定或清空一个变量时才会使用 如 name=null;
# undefined表示当声明一个变量但未初始化时（只声明了变量，但还没有赋值）
该变量的默认值是undefined
还有就是函数无明确的返回值时，返回的也是undefined
'''null意思是厕纸用完了 undefined意思是厕纸都没装 如图'''
7.对象之数组类型
"""JavaScript 中的所有事物都是对象(Object)：字符串、数值、数组、函数...
此外，JavaScript允许自定义对象
对象只是带有属性和方法的特殊数据类型
"""
# 数组对象的作用是：使用单独的变量名来存储一系列的值 类似于Python中的列表
li.splice(2,1) # 第一个参数是起始位置(按索引值确定位置) 第二个参数是删除元素的个数(不写默认就是1)
8.运算符
# + - * / % ++ -- > >= < <= != == === !==var x=10;
var res1=x++;
var res2=++x;
res1;
10
res2;
12
# 这里的x++和++x赋值运算式
x++会先给res1赋值再进行自增1运算 此时res1为10 x为11
而++x会先进行自增运算再赋值 此时x为11 res2为12
# 比较运算符中
== 弱等于 # 会自动转换数据类型至相同状态
=== 强等于 # 不会自动转换数据类型
1 == "1" // true 弱等于
1 === "1" // false 强等于
# 逻辑运算符(一一对应)
python中
and or not
js中
&& || !
9.流程控制
# if判断1.python中
if 条件:
条件成立之后执行的代码
else:
条件不成立执行的代码
2.js中
情况一:
if(条件){
条件成立之后执行的代码
}else{
条件不成立执行的代码
}
情况二:
if(条件1){
条件1成立之后执行的代码
}else if(条件2){
条件2成立之后执行的代码
}else{
条件都不成立执行的代码
}
# switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
# for循环
for(起始值;循环条件;每次循环后执行的操作){
for循环体代码
}
for (var i=0;i<10;i++) {
console.log(i);
}
# 练习:如何使用for循环取出数组内的每个元素
var l1 = [111,222,333,444,555,666]
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}
# while循环
while(循环条件){
循环体代码
}
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
10.三元运算符
# 在python中 res = '吃饭' if 18 > 10 else '喝水'
# 在js中
res = 18 > 10 ? '吃饭':'喝水'
var a = 1;
var b = 2;
var c = a > b ? a : b //这里的三元运算顺序是先写判断条件a>b 再写条件成立返回的值为a,条件不成立返回的值为b
三元运算可以嵌套使用
var a=10,b=20;var x=a>b ?a:(b=="20")?a:b;x10
11.函数
# 在python中 def 函数名(参数1,参数2,...):
'''函数注释'''
函数体代码
return 返回值
# 在js中
function 函数名(参数1,参数2,...){
// 函数注释
函数体代码
return 返回值
}
"""
arguments参数 可以获取传入的所有数据
也支持return和匿名函数
function add(a,b){
console.log(a+b);
console.log(arguments.length);
console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}
add(1,2)
输出：
3
2
1
"""
# 箭头函数
var f = v => v;
等同于下：
var f = function(v){
return v;
}
# 练习：
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); //输出结果是？
ShenZhen
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // 打印结果是？
BeiJing
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret();
ShangHai
12.自定义对象
# 相当于python中的字典类型 方式1: var d = {'name':'jason','age':18}
方式2: var d = Object({'name':'jason','age':18})
取值时直接用点. 即可 如图
"""
在python中 实现字典取值用点方法
class MyDict(dict):
def __getattr__(self, item):
return self.get(item)
def __setattr__(self, key, value):
self[key] = value
res = MyDict(name='jason',age=18)
print(res.name)
print(res.age)
res.xxx = 123
print(res.xxx)
print(res)
"""
13.内置对象
# 如果需要使用内置对象 需要关键字 new在python中
import date
date()
在js中
new date()
# 创建Date对象
//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒并不直接显示
# Date对象的方法：
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
# 练习：编写代码，将当前日期按“2017-12-27 11:11 星期三”格式输出
const WEEKMAP = {
0:"星期天",
1:"星期一",
2:"星期二",
3:"星期三",
4:"星期四",
5:"星期五",
6:"星期六"
}; //定义一个数字与星期的对应关系对象
function showTime() {
var d1 = new Date();
var year = d1.getFullYear();
var month = d1.getMonth() + 1; //注意月份是从0~11
var day = d1.getDate();
var hour = d1.getHours();
var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes(); //三元运算
var week = WEEKMAP[d1.getDay()]; //星期是从0~6
var strTime = `
${year}-${month}-${day} ${hour}:${minute} ${week}
`;
console.log(strTime)
};
showTime();
############################################################
# JSON对象
序列化:
python中
import json
json.dumps() # 序列化
json.loads() # 反序列化
js中
JSON.stringify() # 序列化
JSON.parse() # 反序列化
"""
如果当前js中有一个布尔值true需要基于网络发送给python程序并且让python转换成布尔值 如何操作?
1.在js中使用JSON.stringify()序列化成json格式字符串
2.基于网络发送给python程序(自动编码)
3.python接收 解码并反序列化
"""
############################################################
# RegExp对象
# 1.定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')
true
# /*第一个注意事项，正则表达式中不能有空格*/
# 2.全局匹配
正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
# /*第二个注意事项，全局匹配时有一个lastIndex属性*/
# 3.校验时不传参数 相当于传了undefined
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();
RegExp
14.BOM与DOM操作
# BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”>>>:使用js操作浏览器# DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素>>>:使用js操作前端页面
15.BOM操作
# 1.window对象 所有浏览器都支持 window 对象。它表示浏览器窗口 window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口
# 2.history对象 window.history 对象包含浏览器的历史
window.history.forward() - 前进一页
window.history.back() - 后退一页
# 3.location对象
window.location - 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面
window.location.href - 获取当前页面URL
window.location.href="URL" - 跳转到指定页面
window.location.reload() - 重新加载页面
# 4.弹出框
警告框：警告框经常用于确保用户可以得到某些信息
alert("你看到了吗？");
确认框：确认框用于使用户可以验证或者接受某些信息
confirm("你确定吗？")
提示框：提示框经常用于提示用户在进入页面前输入某个值
prompt("请在下方输入","你的答案")
# 5.计时相关
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行 - 我们称之为计时事件
setTimeout()
var t=setTimeout("JS语句",毫秒)
clearTimeout()
// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);
setInterval()
setInterval("JS语句",时间间隔)
clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的 timeout
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
以上是 前端语言之js(对比python快速入门) 的全部内容， 来源链接： utcz.com/z/387204.html
