python 学习_第五模块 javascripts
1 js的基本数据类型
// 1number 数值类型
var a = 3
;
var b = 1.23
;
var c = -123
;
var d = 0
;
alert(typeof a);
//number
alert(
typeof b);
//number
alert(
typeof c);
//number
alert(
typeof d);
//number
// 2 string 类型
var a = "aaaaa"
;
alert(typeof a);
// Boolean
var c = 3<=4
;
alert(c) // true
alert(
typeof c)
// boolean
//undefined
var x;
alert( x) //undefined
alert(
typeof x)
//undefined
//空对象
var y =
null;
alert(y); // null
alert(
typeof y);
//object
2 js的加 减 乘 取余 除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>运算符
</title>
</head>
<body>
<script type="text/javascript">
var x = 10;
var y = 3;
var sum = x + y;
alert(sum) // 13
// + - * % /
// 加 减 乘 取余 除
var test1 = x % y;
alert(test1) //1
</script>
</body>
</html>
3 js的递增 递减
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>递增递减
</title>
</head>
<body>
<script type="text/javascript">
var x = 4;
// x = x + 1;
// x +=1;
x++;
alert (x);// 5
var c = 10;
c += 5;
c -= 2;
c *= 4;
c /= 3;
alert(c);
</script>
</body>
</html>
4 js的字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字符串
</title>
</head>
<body>
<script type="text/javascript">
var str1 = "one";
var str2 = "two";
var joined = str1 + ' ' + str2 + 'san'
alert(joined) //one twosan
</script>
</body>
</html>
5 js的数值与字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数字和字符串
</title>
</head>
<body>
<script type="text/javascript">
//1 当数字和字符串相加时， 数字也会转换成字符串
var a = "123" + 456
alert(a) // 123456
alert(typeof a) // string
// 2 隐式
var num = 234;
var myStr = num + '';
alert(typeof myStr ); // string
// 3 toString() 数字转字符串
var myStr2 = num.toString();
alert(typeof myStr2); // string
// 字符串转数值
var a = "123"
var myNum = Number(a);
alert(typeof myNum) //number
</script>
</body>
</html>
6 js的数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组Array
</title>
</head>
<body>
<script type="text/javascript">
var shopping = ['香蕉','苹果','牛奶','红牛'];
// alert(typeof shopping) //object
var rand = ['tree','345',[1,2,3]];
// 访问
var item1 = rand[0];
console.log(item1); // tree
rand[0] = '榴莲';
console.log(rand);
var a = rand[2][2];
console.log(a); //3
// 访问数组的长度 for
console.log('数组的长度是:' + rand.length); // 数组的长度是:3
</script>
</body>
</html>
7 js的条件判断
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>条件判断
</title>
</head>
<body>
<script type="text/javascript">
var weather = 'rainy';
if (weather ==='rainy' ) {
console.log('天气下雨了,在家里呆着');
}
else if (weather ==='sunny' ) {
console.log('天气非常棒,可以出去玩耍')
}
else if (weather ==='snowing' ) {
console.log('天气下雪了,可以出去滑雪')
}
else {
console.log('输入的天气有错,重新输入');
}
</script>
</body>
</html>
8 js的比较运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>比较运算符
</title>
</head>
<body>
<script type="text/javascript">
// === !== == !=
var a = 5;
var astr = '5';
var isequal = a === astr;
console.log(isequal) // false
console.log(4 <= 4);
</script>
</body>
</html>
9 js的逻辑运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>比较运算符
</title>
</head>
<body>
<script type="text/javascript">
var weaher = 'sunny';
var temp = 22;
// && 逻辑或 并且 || 逻辑或 ！true
// &&
if (weaher ==='sunny' && temp >30) {
console.log('在家里吹空调,吃西瓜');
}
else if (weaher ==='sunny' && temp <=30){
console.log('天气不错 可以出去玩')
}
// ||
var mathscore = 77;
var englishscore = 80;
if (mathscore >=80 || englishscore >=85) {
console.log('可以出去玩')
}
else
{ console.log('在家写作业')}
// false
var islogin = false;
alert(!islogin);
if (!islogin) {
console.log('用户已登录')
}
</script>
</body>
</html>
10 switch 语句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>switch语句
</title>
</head>
<body>
<script type="text/javascript">
var weather = 'rainy';
switch(weather) {
case 'summy':
alert(1);
break;
case 'rainy':
alert(2);
// 编写 switch语句 小心break case 穿透
break;
case 'snowing':
alert(3);
break;
default:
alert(4);
break;
}
</script>
</body>
</html>
11 三元运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三元运算符
</title>
</head>
<body>
<script type="text/javascript">
var result = 1 < 2 ? '真的' : '假的';
alert(result)
</script>
</body>
</html>
12 for循环
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for 循环
</title>
</head>
<body>
<script type="text/javascript">
var i;
var sum = 0;
for (i =1; i <= 100; i++){
sum += i;
}
console.log(sum); //5050
var shopping = ['香蕉','苹果','牛奶','红牛'];
var j;
for (j = 0; j <shopping.length; j++) {
var htmlstr = '<h1>' + shopping[j] + '</h1>'
console.log(htmlstr);
document.write(htmlstr);
}
</script>
</body>
</html>
13 break和continue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>break和continue
</title>
</head>
<body>
<script type="text/javascript">
// break
var x = 0;
for (;;){
if (x > 100){
break
}
x++;
}
alert(x);
//continue
var sum = 0;
for (var i = 1; i <=10; i++) {
if (i ===8) {
continue;
}
sum = sum + i;
}
alert(sum)
</script>
</body>
</html>
14 while循环
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>while循环
</title>
</head>
<body>
<script type="text/javascript">
var sum = 0; //计算的和
var n = 99; //初始的奇数
while (n > 0) {
sum += n;
n -= 2;
}
alert(sum);
// do while 先执行一次， 再判断
var sum = 0;
var i = 1;
do {
sum = sum + i;
i ++;
console.log(sum);
alert(sum);
} while (i <=1);
</script>
</body>
</html>
15 函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数
</title>
</head>
<body>
<script type="text/javascript">
function test(isbad ){
alert(isbad);
if (isbad){
alert('点个外卖');
}
else {
alert('做饭了')
}
}
var bad = false;
test(bad);
</script>
</body>
</html>
16 函数返回值和函数表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数返回值和函数表达式
</title>
</head>
<body>
<script type="text/javascript">
function add(a,b){
var sum = a+b;
return sum
}
function sub(a,b){
return a-b;
}
function mult(a,b){
return a*b;
}
// function div(a,b){
// return a/b;
// }
// 函数表达式
var div = function(a,b) {
return a/b;
}
var r= add(3,2);
var r2= sub(3,2);
var r3= mult(3,2);
var r4= div(3,2);
console.log(r);
console.log(r2);
console.log(r3);
console.log(r4);
</script>
</body>
</html>
17 函数作用域
1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数作用域
</title>
</head>
<body>
<script type="text/javascript">
var a = 1;
function add(){
var b = 3;
console.log(a);
}
add();
// console.log(b);
</script>
</body>
</html>
2
first.js
(
function(){
var name = 'ysl'
;
var hello =
function (){
alert('hello ' +
name);
}
window.first =
hello;
})();
second.js
(
function(){
var name = 'jack'
;
var hello =
function(){
alert('hello ' +
name);
}
window.second =
hello;
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数作用域
</title>
</head>
<body>
<script type="text/javascript" src="js/first.js"></script>
<script type="text/javascript" src="js/second.js"></script>
<script type="text/javascript">
console.log(window);
first();
second();
</script>
</body>
</html>
18 对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>object
</title>
</head>
<body>
<script type="text/javascript">
var person = {
name: 'ysl',
age: 18,
sex:'男',
fav : function(a) {
alert('爱好姑凉')
return '姑凉' + a + '岁'
}
}
console.log(person);
console.log(person.name);
console.log(person.fav(18));
</script>
</body>
</html>
19 js内置函数
<!DOCTYPE html>
<html>
<head>
<title>js常用的内置对象
</title>
</head>
<body>
<script type="text/javascript">
var colors = new Array();
// var colors = [];
var colors2 = [];
document.write('1111');
// js 提供构造函数
var colors = new Array();
var colors2 = [];
if (Array.isArray(colors)) {
colors[0] = 'red';
colors[1] = 'blue';
colors[2] = 'yellow';
var a = colors.toString();
console.log(a);
console.log(typeof a);
console.log(colors);
}
</script>
</body>
</html>
20 数组的方法
1 map filter forEach
<!DOCTYPE html>
<html>
<head>
<title>map filter forEach
</title>
</head>
<body>
<script type="text/javascript">
// filter 方法
var numbers = [1,2,10,7,5,11,44];
var filterResult = numbers.filter(function(item,index,array){
console.log(item);
console.log(index);
console.log(array);
return item > 10;
});
console.log(filterResult);
// map() 方法
var mapresult = numbers.map(function(item,index,array){
return item *2;
})
console.log(mapresult);
for (var i = 0; i < mapresult.length; i++){
console.log(mapresult[i]);
}
// forEach
mapresult.forEach(function(item,index){
console.log(item);
})
</script>
</body>
</html>
2） 数组常用的方法
<!DOCTYPE html>
<html>
<head>
<title>数组常用的方法
</title>
</head>
<body>
<script type="text/javascript">
var arr = [1,2,3];
var a = arr.toString(); // 变成string 1,2,3
var b = arr.toLocaleString(); //1,2,3
console.log(a);
console.log(b);
var person1 = {
toLocaleString: function(){
return 'mjj';
},
toString:function(){
return '么挤挤';
}
}
var person2 = {
toLocaleString: function(){
return '隔壁老王';
},
toString:function(){
return '隔壁老李';
}
}
var people = [person1,person2];
console.log(people);
console.log(people.toString()); //么挤挤,隔壁老李
console.log(people.toLocaleString()); //mjj,隔壁老王
</script>
</body>
</html>
3）数组常用的方法
<!DOCTYPE html>
<html>
<head>
<title>数组常用的方法
</title>
</head>
<body>
<script type="text/javascript">
// 分割字符串
var colors = ['red','blue','green'];
var a = colors.join('|');
console.log(a); //red|blue|green
// 栈 lifo push() pop() 队列方法
// push 相当于 Python的append
var newlength = colors.push('purple');
console.log(newlength); //4
console.log(colors); // (4) ["red", "blue", "green", "purple"]
// pop() 从数组末尾删除最后一项
var lastItem = colors.pop();
console.log(lastItem); //purple
console.log(colors); // (3) ["red", "blue", "green"]
// 队列fifo 先进先出 unshift() shift()
newlength = colors.unshift('yellow');
console.log(newlength); //4
console.log(colors); //(4) ["yellow", "red", "blue", "green"]
var firstItem = colors.shift();
console.log(newlength); //4
console.log(colors); // (3) ["red", "blue", "green"]
// 数组倒序
var values = [0,3,2,16,15,10];
function compare1(a,b){
return a -b;
};
function compare2(a,b){
return b -a ;
};
values.sort(compare1); //升序
console.log(values); //[0, 2, 3, 10, 15, 16]
values.sort(compare2);//降序
console.log(values); //[16, 15, 10, 3, 2, 0]
</script>
</body>
</html>
4 ）数组常用的方法
<!DOCTYPE html>
<html>
<head>
<title>数组常用的方法
</title>
</head>
<body>
<script type="text/javascript">
// 操作方法 concat() slice() splice()
// 1 concat 数组合并
var colors = ['red','blue'];
// var newColors = colors.concat('green');
newColors = colors.concat({name:'zhangsan'});
console.log(newColors);
// 2 slice()
var colors = ['red','blue','yellow'];
newcolors = colors.slice(1,2); // ["blue"]
console.log(newcolors);
// 3 splice() 删除 插入 替换
// 3.1 删除
var names = ['张三','李四','mjj','alex'];
// names.splice(0,2);
// console.log(names); //["mjj", "alex"]
// 3.2 插入
// names.splice(1,0,'熊大大','jack');
// console.log(names); //["张三", "熊大大", "jack", "李四", "mjj", "alex"]
//3.3 替换
names.splice(1,1,'xiongdada');
console.log(names); //["张三", "xiongdada", "mjj", "alex"]
// 4 位置方法 indexOf() lastIndexOf()
var names = ['张三','mjj','王五','mjj','赵六'];
alert(names.indexOf('mjj')); //1
alert(names.lastIndexOf('mjj')); //3
alert(names.indexOf('mjj',2)); //3
alert(names.lastIndexOf('mjj',2)); //1
alert(names.lastIndexOf('mjjxxxx',2)); //如果查不到结果 返回-1
</script>
</body>
</html>
21 map方法应用
<!DOCTYPE html>
<html>
<head>
<title>map方法应用
</title>
</head>
<body>
<script type="text/javascript">
var oldArray = [
{
name:'张三',
age: 17
},
{
name:'mjj',
age: 29
},
{
name:'李四',
age: 30
}
]
var newNames = oldArray.map(function(item,index){
return item.name
})
var newAges = oldArray.map(function(item,index){
return item.age
})
console.log(newNames);
console.log(newAges);
</script>
</body>
</html>
22 字符串常用方法
<!DOCTYPE html>
<html>
<head>
<title>字符串的常用方法
</title>
</head>
<body>
<script type="text/javascript">
var str = 'hello world';
console.log(str.length); // 11
console.log(str.charAt(1)); //e
console.log(str.charCodeAt(1)) //101 获取指定的字符对应的编码
console.log(str.concat(' mjj',' jack')); //拼接字符串 通常情况不适用它来做拼接,使用 +来做多个字符的拼接
console.log(str.slice(2)); // llo world
console.log(str.substring(2)); // llo world
console.log(str.substr(2)); // llo world
console.log(str.slice(2,4)); // ll
console.log(str.substring(2,4)); // ll
var str = 'hello world';
console.log(str.indexOf('o')); //4
console.log(str.lastIndexOf('o')); //7
console.log(str.indexOf('o',6)); //7
console.log(str.lastIndexOf('o',6)); //4
// trim()清除当前 字符串的前后后格
var str = ' hello world ';
console.log(str.trim()); //hello world
console.log(str); // hello world
var str = 'Hello Mjj';
console.log("------",str.toLowerCase()); //hello mjj
</script>
</body>
</html>
23 字符串查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查找当前字符e在字符串中的所有位置
</title>
</head>
<body>
<script type="text/javascript">
// 查找e 在str中的所有的位置
var str = 'He unfolded the map and set it on the floor.';
var arr = [];
var pos = str.indexOf('e'); //1
console.log(pos);
while(pos > -1){
// 找到当前e字符对应的位置
arr.push(pos);
pos = str.indexOf('e',pos+1);
}
console.log(arr);
</script>
</body>
</html>
24 date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>date日期对象
</title>
</head>
<body>
<script type="text/javascript">
/*
// 1.四种方式创建
var now = new Date();
console.log(now); //Tue Jul 23 2019 11:48:08 GMT+0800 (中国标准时间)
var xmas = new Date('December 25,1995 13:30:00');
console.log(xmas); //Mon Dec 25 1995 13:30:00 GMT+0800 (中国标准时间)
var xmas = new Date(1995,11,25);
console.log(xmas); //Mon Dec 25 1995 00:00:00 GMT+0800 (中国标准时间)
var xmas = new Date(1995,11,25,14,30,0);
console.log(xmas); //Mon Dec 25 1995 14:30:00 GMT+0800 (中国标准时间)
*/
var now = new Date();
// 常用方法
console.log(now.getDate()); //获取月份的第几天 (1~31)
console.log(now.getMonth()); //获取月份 (0~11)
console.log(now.getFullYear()); //获取年份
console.log(now.getDay()); //获取一星期中的第几天(0 ~ 6)
console.log(now.getHours()); //获取小时(0~23);
console.log(now.getMinutes()); //获取分钟(0~59);
console.log(now.getSeconds()); //获取秒(0~59);
// 日期格式化方法
console.log(now.toDateString()); //星期几 月 日 年
console.log(now.toTimeString()); //时 分 秒 时区
// 常用
console.log(now.toLocaleDateString()); //
console.log(now.toLocaleTimeString()); //
console.log(now.toLocaleString());
console.log(now.toUTCString());
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回用数字时钟格式的时间
</title>
</head>
<body>
<script type="text/javascript">
// 6:27:35 P.M.
// 6:30:01 P.M.
// 6:04:01 A.M.
// :0 4
// : 30
function nowNumTime(){
var now = new Date();
var hour = now.getHours(); //0 ~ 23. //19
var minute = now.getMinutes();
var second = now.getSeconds();
// 18 > 12 ? 18-12 : 8
var temp = '' + (hour > 12 ? hour - 12 : hour);
if(hour === 0){
temp = '12';
}
temp = temp +(minute < 10 ? ':0': ":")+ minute;
temp = temp +(second < 10 ? ':0': ":")+ second;
temp = temp + (hour >= 12 ? ' P.M.': " A.M.");
return temp;
}
var nownum = nowNumTime();
console.log(nownum);
</script>
</body>
</html>
25 字符串和数值相互转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串和数值相互转换
</title>
</head>
<body>
<script type="text/javascript">
var str = '13131.9090013';
// 字符串转数值类型
console.log(parseInt(str)); //13131
console.log(parseFloat(str)); //13131.9090013
console.log(typeof parseFloat(str)); //number
var a = Number(str);
console.log(isNaN(a)); //NaN false
var num = 1313.179;
// 强制类型转换
console.log(num.toString()); //string
console.log(typeof num.toString()); //1313.179
console.log(String(num)); //1313.179
// 隐式转换
console.log('' + num); //1313.179
console.log(''.concat(num)); //1313.179
console.log(Number(num.toFixed(2))); //1313.18
</script>
</body>
</html>
26 Globle对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Globle对象
</title>
</head>
<body>
<script type="text/javascript">
// URI
var uri = 'http://www.apeland.cn/web index.html?name=zhangsan';
// encodeURIComponent()编码 使用最多的方法
console.log(encodeURI(uri));
console.log(encodeURIComponent(uri));
// 解码 decodeURIComponent()
// decodeURI(encodeuri);
// decodeURIComponent(encodeuri);
</script>
</body>
</html>
27 Math对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math对象
</title>
</head>
<body>
<script type="text/javascript">
// Math
// var a = 3;
// 方法 min() max()
var max = Math.max(3,34,56,21);
var min = Math.min(3,34,56,21);
var arr = [1,2,32,23,45,21];
var max = Math.max.apply(null,arr);
var min = Math.min.apply(null,arr);
// var max= Math.max(arr[0],arr[1],arr[2]);
console.log(max);
console.log(min);
// ceil() floor() round()
var num = 24.8;
console.log(Math.ceil(num)); //天花板函数 向上取整
console.log(Math.floor(num)); //地板函数 向下取整
console.log(Math.round(num)); //标准的四舍五入
// 随机数 random() 0 <= random<1
console.log(Math.random());
// 1.获取min到max之间的整数
// 2.获取随机颜色 rgb(0~255,0~255,0~255);
// 3.随机验证码 四位 数字+ 字母 (大写)
</script>
</body>
</html>
28 练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习
</title>
</head>
<body>
<script type="text/javascript">
// 1.获取min到max之间的整数 (1~100)
function random(max,min){
return Math.floor(Math.random() * (max-min) + min);
}
// 2.获取随机颜色 rgb(0~255,0~255,0~255);
function randomColor(){
// var result
var r = random(0,256),g = random(0,256),b = random(0,256);
// 模板字符串 ``
var result = `rgb(${r},${g},${b})`;
return result;
}
var rc = randomColor();
console.log(rc);
document.body.style.backgroundColor = rc;
// 3.随机验证码 四位 数字+ 字母 (大写) 65Yz
function creatCode(){
// 设置默认的空的字符串
var code = '';
// 设置长度
var codeLength = 4;
var randomCode = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z'];
for(var i = 0; i < codeLength; i++){
// 设置随机范围 0~36
var index = random(0,36);
code += randomCode[index];
}
return code;
}
var rndcode = creatCode();
console.log(rndcode);
document.write(`<h1>${rndcode}</h1`)
</script>
</body>
</html>
转载于:https://www.cnblogs.com/augustyang/p/11206997.html
