第四十一天

Posted zhouhao123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第四十一天相关的知识,希望对你有一定的参考价值。

<!-- 1 js三种存在位置 --> <!DOCTYPE html> <html lang="zh"> <head>  <meta charset="UTF-8">  <title>三种存在位置</title> </head> <!-- 1.行间式:js代码块需要出现在事件中 --> <!-- <body id="body" onload="body.style.backgroundColor=‘red‘"> --> <!-- <body id="body" onload="alert(‘hello wolrd‘)"> --> <body id="body">  <!-- 2.内联式:js代码块需要出现在script标签中 -->  <script type="text/javascript">   body.style.backgroundColor=‘orange‘  </script>

 <!-- 3.外联式:js代码块出现在外部js文件中,需要通过script标签src属性进行链接 -->  <script type="text/javascript" src="./js/01.js"></script>

 <!-- 总结 -->  <!-- 三种方式不存在优先级,谁在逻辑下方,谁起作用 -->

</body> </html>   2.解释性语言决定js位置 <!DOCTYPE html> <html lang="zh"> <head>  <meta charset="UTF-8">  <title>js位置</title>  <!-- 位置② -->  <!-- 出现在head标签底部:依赖型JS库 -->  <!-- <script>   bd.style.backgroundColor = ‘#0ff‘;  </script> -->

 <script>   var color = "cyan";  </script> </head> <!-- 内联使用场景:某页面的特有逻辑,可以书写该该页面的script标签内 --> <!-- 外联使用场景:适用于团队开发,js代码具有复用性 -->

<!-- js为解释性语言 --> <body id="bd">  <!-- 位置① -->  <!-- <script>   bd.style.backgroundColor = ‘#0ff‘;  </script> -->

 <!-- 需求1:操作div,让其字体颜色变为红色 => 功能(style.color) => 尽可能下移 -->  <!-- 方法:在body下面 script里打入div.style.color = ‘red‘; -->  <!-- 需求2:让div背景颜色变为提供的颜色 => 依赖(color变量) => 尽可能上移 -->  <!-- 方法1:先在body里onload="div.style.backgroundColor= color" 在打入var color =‘yellow‘改变颜色; -->  <!-- 方法2:先在body里script内打入div.style.backgroundColor = color;然后在在head里的script内打入 var color = ‘颜色‘ -->  <div id="div">123</div>  <!-- 需要使用color变量这个资源 -->  <script>   div.style.backgroundColor = color;  </script>

</body> <!-- 位置③ --> <!-- 出现在body标签底部:功能型JS脚本 --> <!-- <script>  bd.style.backgroundColor = ‘#0ff‘; </script> -->

<!-- 完成需求1 --> <script>  div.style.color = ‘red‘; </script>

<!-- 外联出现位置同内联 --> <!-- 拥有src的外联script标签,会自动屏蔽标签内部的代码块 --> <script src="js/02.js">  alert(123) </script>

</html>

3、变量的定义 <!DOCTYPE html> <html lang="zh"> <head>  <meta charset="UTF-8">  <title>变量的定义</title> </head> <body>  变量的定义 </body> <script>  // script标签内,代表js,采用的是js语法

 // 1.简单规范  // 单行注释  /*  多行注释  */

 // 语句以分号结尾

 // 2.变量的定义: 声明 + 初始化

 // ES5变量的定义

 // 注:ES5标准下无块级作用域,只有方法可以产生实际的局部作用域  // 无块级作用域的局部变量  var a = 10;  // alert(a);  // 全局变量  b = 20;  // alert(b);

 // eg:验证  // 方法的自调用,就会产生一个局部作用域  (function () {   var x = 10;   y = 20;  })()

 // alert(x) 报错,x只能在局部作用域中使用  // alert(y); 正常使用  // x已经被修改了,不能用了

 // 块级作用域  {   var n = 10; // 无视块级作用域   m = 20;  // 全局变量,更无视块级作用域  }  // alert(n)  // 可以  // alert(m)  // 可以

 // ES6变量的定义

 // 有块级作用域的局部变量  let aa = 100;  // alert(aa);  // 有块级作用域的常量  const bb = 200;  // alert(bb);

 {   let xx = 100;   const yy = 200;  }  // alert(xx);  // 无法访问  // alert(yy);  // 无法访问  // 函数产生的局部作用域同该情况

 let nn = 100;  nn = 200;  // alert(nn);  // 200

 // 命名规范:常量名全大写  const MM = 1000;  // MM = 2000;  // 常量值不允许更改  // alert(MM);

 // 3.变量名的命名规范  // ① 可以由字母,数字,_,$组成,但是不能以数字开头(可以包含中文,采用驼峰命名法)  // ② 区分大小写  // ③ 不能与关键字保留字重名  

</script> </html>

4、三种弹出框 <!DOCTYPE html> <html lang="zh"> <head>  <meta charset="UTF-8">  <title>三种弹出框</title> </head> <body>  三种弹出框 </body> <script>  // 弹出框: 一个弹出框只能弹出一条信息  // alert("普通弹出框", "呵呵");  // 呵呵被忽略了

 // 确认框  // var res = confirm("你是男的吗?");  // true | false  // alert(res);

 // 输入框  // var res = prompt("请输入你的小名!");  // 确定为输入值, 取消为null  // alert(res); 

</script> </html>

5、四种调试方式 <!DOCTYPE html> <html lang="zh"> <head>  <meta charset="UTF-8">  <title>四种调试方式</title> </head> <body>  四种调试方式 </body> <script type="text/javascript">  var a = 10;  var b = 20;

 // 四种查看变量的值的方式

 // 弹出框的显示方式  // alert(a);  // alert(b);

 // 在网页检查中Console的里面显示  // console.log(a);  // console.log(b);  // 在网页上显示出来  // document.write(a);  // document.write(b);

 // 断点调试  // 在网页检查中sources中俩个符号调试 </script> </html>

6、数据类型 <!DOCTYPE html> <html lang="zh"> <head>  <meta charset="UTF-8">  <title>数据类型</title> </head> <body>  数据类型 </body> <script type="text/javascript">  // 一. 值类型  // 1.number:数字类型  var a = 10;  // typeof()查看类型,可以省略()  console.log(a, typeof a);  // 判断  console.log(typeof a == ‘number‘);

 a = 3.14;  console.log(a, typeof a);

 a = 314e2  console.log(a, typeof a);  // 结果会显示31400和类型number

 // 2.string:字符串类型  var a = ‘字符串‘;  console.log(a, typeof a);

 a = "字符串";  console.log(a, typeof a);

 // ES6会检测变量的重复定义,报错  // let x = 10;  // let x = ‘10‘;

 // 3.boolean:布尔类型 true|false  a = true;  console.log(a, typeof a);

 // 4.undefined:未定义类型  var b;  console.log(b, typeof b);  var c = undefined;  console.log(c, typeof c);

 // 二.引用类型  // 5.function:函数类型  var m = function () {};  console.log(m, typeof m);

 // 6.object:对象类型  var obj = {};  console.log(obj, typeof obj);

 obj = new Object();  console.log(obj, typeof obj);  // 显示{} object

 // 判断  // instanceof:对象类型判断  console.log(obj instanceof Object);

 // 三.特殊的Object  // Number() String() Boolean() Math  // 7.null:空对象  var o = null;  console.log(o, typeof o);  // 判断  console.log(o == null);

 // 8.Array:数组对象  o = new Array(1, 2, 3, 4, 5);  console.log(o, typeof o);  console.log(o instanceof Object);  // 判断  console.log(o instanceof Array);

 // 9.Date:时间对象  o = new Date();  console.log(o, typeof o);

 // 10.RegExp:正则对象  o = new RegExp();  console.log(o, typeof o);

</script> </html>

7、类型转换 <!DOCTYPE html> <html lang="zh"> <head>  <meta charset="UTF-8">  <title>类型转换</title> </head> <body>  类型转换 </body> <script>  // 类型转换针对 值类型  // number string boolean

 // 一.显性转化  // 1. num,bool => str  var a = 10;  var b = true;

 // var c = new String(a);  // console.log(c, typeof c); // ‘10‘, object

 var c = String(a);  console.log(c, typeof c); // ‘10‘, string  c = String(b);  console.log(c, typeof c); // ‘true‘, string

 c = a.toString();  console.log(c, typeof c); // ‘10‘, string  c = b.toString();  console.log(c, typeof c); // ‘true‘, string

 // 2.bool,str => num  var aa = true;  var bb = ‘10‘;

 var cc = Number(aa);  console.log(cc, typeof cc); // 1 number  cc = Number(bb);  console.log(cc, typeof cc); // 10 number

 cc = + aa;  console.log(cc, typeof cc); // 1 number  cc = + bb;  console.log(cc, typeof cc); // 10 number

 // 针对字符串  cc = parseFloat(‘3.14.15.16abc‘);  console.log(cc, typeof cc); // 3.14  cc = parseInt(‘10.35abc‘);  // 10  console.log(cc, typeof cc);

 // 字符串以非数字开头,结果为NaN  // 1.非数字类型  // 2.不与任何数相等,包含自己  // 3.通过isNaN()进行判断  var res = parseInt("abc10def");  console.log(res, isNaN(res))  // 结果 NaN true

 // 二.隐性转换(自动转换)  // 5 + null  // 5  // "5" + null  // "5null"  // "5" + 1  // "51"  // "5" - 1  // 4  console.log("5" - 1);    // "" + ? // "?"  

</script> </html>

8、运算符 <!DOCTYPE html> <html lang="zh"> <head>  <meta charset="UTF-8">  <title>运算符</title> </head> <body>  运算符 </body> <script type="text/javascript">  // 一.算数运算符

 var a = 5;  var res = a / 2;  // 只存在number类型运算  console.log(res);  // 2.5

 var res = a % 2;  console.log(res); // 商为2余1  1

 // 自增自减

 // 总结:  // 1.++/--在前在后,自身值一定改变, a++/++a => a = a + 1  // 2.++/--在前先自运算,再他运算  // 1.++/--在后先他运算,再自运算

 // a=5  var res = a++;  console.log("res:" + res + ", a:" + a);  // 5, 6

 // a=6  var res = ++a;  console.log("res:" + res + ", a:" + a);  // 7, 7

 // 二.赋值运算符

 // 三.比较运算符  console.log(‘5‘ == 5);   // true, 值相等即可  console.log(‘5‘ === 5);  // false, 值与类型均要相等

 console.log(‘5‘ != 5);  // fasle  console.log(‘5‘ !== 5);  // true

 // 四.逻辑运算符  // 运算结果为true|false  var a = 10;  var b = 20;  var c = 30;  var res = a < b && c == 30;  console.log(res);  // 真,真 => 真  // 真,假 => 假  // 假,真 => 假  短路  // 假,假 => 假  短路  // &&运算,有假即假,所有前面为假,后面没必要被执行,所以被短路

 // 短路  var res = a > b && ++c;  console.log(res, c);  // c=30

 // ||运算,有真即真,所有前面为真,后面没必要被执行,所以被短路  // 真,真 => 真  短路  // 真,假 => 真  短路  // 假,真 => 真  // 假,假 => 假

 // !运算,真则假,假则真,负负得正  console.log(!1, !!1);

 // 三目运算符(三元运算符)  // 结果 = 条件表达式 ? 结果1 : 结果2;  // 结果不一样要与表达式有关系,但表达式为真则结果为结果1,反之为结果2,  var tq = prompt("天气(晴|雨)")  var res = tq == ‘晴‘ ? "今天天气挺好" : "请假回家收衣服";  console.log(res);

</script> </html>

以上是关于第四十一天的主要内容,如果未能解决你的问题,请参考以下文章

第四十一天:协程操作

9 年了,微信公众号终于突破一天一发了?

今日总结

每天一部英文动画20:Ruby’s Hiccups

走入计算机的第四十一天(数据库2表记录的操作)

机器学习100天(四十一):041 对偶支持向量机-公式推导