pythonweb day07

程序员文章站 2022-06-13 12:36:42

...

pythonweb day07

1.JavaScript概述

什么是JavaScript
简称JS，是一种运行于JS解释器或执行引擎中的脚本代码，是一种浏览器解释型的语言
主要用来实现页面的交互与动态效果
JS的组成
1. 核心语法 - ECMAScript 规范了JS的基本语法
2. 浏览器对象模型 -BOM
  Browser Object Model，提供了一系列操作浏览器的方法
3. 文档对象模型 -DOM
  Document Object Model . 提供了一系列操作文档的方法

2.JS使用方式

在元素标签中绑定JS代码，主要指JS事件
事件：用户在元素上所激发的行为操作（单击）
语法：
```
<标签 onclick="JS 操作">
```
JS 操作如果涉及代码非常多，一般会抽离出来单独写在JS文件中，如果是简单的代码，可以以属性值字符串的形式书写
et：
```
console.log("在控制台中输出一句话");
```
将JS代码嵌套在文档中，使用<script></script>标签
语法：
```
<script>
    JS代码
</script>
```
注意：<script></script>标签可以书写在文档的任意位置，书写多次，但是不同的位置会影响代码最终的执行效果
特点：
网页加载到标签时就会执行内部的JS代码
et：
```
<script>
    console.log('');
    //在页面中输出，会重写网页主体内容
    document.write('');
</script>
```
外部链接
语法：
创建外部的JS文件 .js
在文档中使用<script src='JS路径'></script>引入
src 引入的外部资源是网页加载所必须的一部分，网页加载src文件时，会等待文件加载完毕再执行后面的代码
href 网页在加载href文件时，不会等待加载完毕，边加载边向后执行
注意：在JS 的引入标签中
<script src='JS路径'></script>
不能再书写任何JS代码
常用操作：
1. alert(' '); 普通的网页弹框
2. prompt(' '); 接收用户输入的弹框，返回用户输入的内容
3. document.write('<h1>hello</h1> ');
  1. 在使用事件方式写入时，会重写网页内容（事件涉及网页刷新），
  2. 可以识别HTML标签，脚本代码可以在文档任何地方书写，如果是普通写入（不涉及事件），区分代码的书写位置，在当前位置中插入，如果是在head中嵌入，内容会作为body的首行内容显示，
4. console.log(); 控制台输出，多用于代码调试
  练习：
  1. 使用元素绑定事件的方式，在控制台输出一句话‘我的第一个JS练习’ 使用button标签
  2. 使用script标签在文档中嵌入JS代码，实现网页中写入一级标题，内容不限
  3. 创建外部的JS文件，HTML中引入，实现弹框提示，alert(),提示内容不限
```
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
	<script type="text/javascript">
		console.log("文档中嵌入的JS代码");
		document.write("asdghfhfjh");
	</script>
	
</head>
<body>
	

	<div onclick="document.write('网页中显示内容');"></div>

	<button onclick="console.log('我的第一个JS练习');">点我</button>

	<script type="text/javascript">

		document.write('<h1>一级标题</h1>');
	</script>

</body>
</html>
```

3.基础语法

JS 是由语句组成的
1. JS语句可以由运算符，关键字，表达式组成
2. JS语句必须以英文分号结束;
3. JS中严格区分大小写
  console.log():正确写法
  Console.log():错误写法
4. 所有涉及的标点符号，必须使用英文的
JS中的注释
1. 单行注释 //
2. 多行注释 /* 注释文本 */

4.JS的变量与常量

变量
1. 创建变量
  1. 先声明，后赋值，使用关键字 var 进行声明
    声明：var 变量名;
    赋值：变量名 = 值;
  2. 声明的同时赋值
    var 变量名 = 值;
    et:
    声明一个变量 uname，取值 ‘韩梅梅’
    var uname = '韩梅梅';
    输出变量的值
    console.log(uname);
    document.write(uname);
    alert(uname);
2. 使用注意
  1. 声明变量时，关键字 var 可以省略，不建议省略，容易出问题
  2. 变量如果只声明，未赋值， var a; 变量默认值为 undefined
3. 变量名的命名规范
  1. 不能与JS中的关键字和保留字冲突（ et：var default break class function for ...）
  2. 自定义的变量名可以由数字，字母，下划线，$ 组成，不能使用数字开头
  3. 变量名称严格区分大小写
    var a = 10;
    var A;
  4. 命名尽量有意义一些，做到见名知意
  5. 多个单词组成变量名，采用小驼峰标识
    var userName
4. 变量的使用方式
  1. 赋值
    赋值符号 =
    作用：将赋值符号右边的值赋给左边的变量
    et：
    var a = 10;
    var b = a;
  2. 访问
    1. 直接输出
      console.log(a);
    2. 变量出现在赋值符号右边，表示访问变量的值
      var age = 10;
      age = age + 20;
    3. 注意：
      赋值符号左边只能是变量，不能是常量
```
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		// 变量声明与使用
		var uname = "张思睿";

		var uage;
		uage = 18;

		// 同时声明多个变量
		var a = 10, b = 100, c = 1000; //声明的同时赋值
		var m,n,q; //同时声明多个变量

		// 变量使用
		console.log(uname);
		console.log(uname,uage);
		console.log(a,b,c);
		console.log(m,n,q);

		console.log("姓名 ：",uname);
		console.log("姓名 ：" + uname);
		console.log("年龄 ：",uage);
		console.log("年龄 : " + uage);





	</script>
</head>
<body>

</body>
</html>
```
常量
1. 一经声明就不允许再被修改的数据就是常量
2. 语法:
  const 常量名 = 值;
  注意：
  1. 常量在声明的同时必须赋值
  2. 为了与变量名区分，常量名一般采用全大写的方式
    et：
    const PI = 3.14;
    练习：
    1. 创建一个常量PI ，赋值 3.14
    2. 常见一个变量r，表示半径，取值任意
    3. 计算圆的周长，并在控制台输出、
    4. 计算圆的面积，在控制台输出
    5. 输出格式
      半径为... 的圆的周长为 ...
      半径为... 的圆的面积为 ...
```
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		//声明常量
		const PI = 3.14;
		//声明变量
		var r = 10;
		var l = 2 * PI * r;
		var s = PI * r * r
		console.log('半径为',r,'的圆的周长为',l.toFixed(2));
		console.log('半径为'+r+'的圆的面积为'+s);
	</script>
</head>
<body>

</body>
</html>
```
  3. 操作小数位
    保留小数点后n位
    toFixed(r);
    使用：
    var num = 3.1415926;
    //保留当前变量小数点后两位
    var res = num.toFixed(2);
    或者
    num = num.toFixed(2);

5.数据类型

基本数据类型（简单数据类型）
1. number 类型
  数字类型，表示32位的整数或者是64位的浮点数
  1字节 = 8位
  整数占4字节，浮点数占8字节
  1. 整数
    常用的：十进制表示方法
    八进制以数字0开头，
    以8位基数，采用0~7八个数字表示，逢8进1
    et：
    //0*8**0 + 1*8**1
    var = num = 010
    十进制转八进制，需要先将十进制转换为二进制，再将二进制转换为八进制
    十六进制：以0x为前缀
    et：
    var num3 = 0x35;
    // 3*16**1+5*16**0
    注意：使用console.log()输出整数时，不管用哪一种进制表示，都会转成十进制输出
  2. 小数
    1. 小数点计算法 3.14
    2. 指数计算法 1.5e3
      e表示以10为底
      e后面的数字表示10的次方数
      1.5e3 = 1.5 * 10**3
```
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		// 整数声明
		var n1 = 100;
		var n2 = 011;
		var n3 = 0x35;
		console.log(n1,n2,n3);

		//小数声明
		var f1 = 1.2345;
		var f2 = 1.5e3;
		console.log(f1,f2);
	</script>
</head>
<body>

</body>
</html>
```
2. 字符串类型
  string 类型，可以由 Unicode 的字符，数字或标点来组成
  注意：
  1. 字符串在使用时必须使用' ' 或 " "引起来
    et：
    var = 10;
    var = '10';
  2. 每个字符都有对应的Unicode码
    
    查看字符的Unicode码
    var s1 = ‘张’；
    方法：charCodeAt(index)
    作用：
    用来查看指定位置的字符对应的Unicode编码
    注意：
    1. 字符串中的字符都对应有一个下标，参考数组的存储方式，下标从0开始
      var s = 'hello';
      s.charCodeAt(2);
    2. Unicode
      编码中前128位与ASC码值一致
    3. 可以查看中文字符对应的Unicode码，如果想把中文的Unicode码转换成字符，需要先将码值转换为16进制，再进行汉字字符的转换
      转换16进制：
      toString(16);
      et:
      var s = '张';
      var r = s.charCodeAt(0);
      r = r.toString(16);
      16进制字符串转换汉字字符
      '5f20'
      添加\u转义
      var s = '\u5f20';
      注意：
      不能写 var s = '\u'+'5f20';
    4. 中文范围
      '\u4e00' ~ '\u9fa5'
    5. 转义字符
      \n : 换行
      \t : 制表符
      \" : "
      \' : '
      \\ : \
```
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		//字符串必须使用引号
		var s = 100; //number类型
		var s1 = '100';
		var s2 = "aA";
		var s3 = "张";

		console.log(s1.charCodeAt(0));
		//查看第一个字符的Unicode码
		console.log(s2.charCodeAt(),s2.charCodeAt(1));

		var r = s3.charCodeAt(0);
		r = r.toString(16);
		console.log(r);

		var str = "\u5f20";
		// var str1 = '\u'+r; //语法错误
		console.log(str);

		var str2 = "\u4e00";
		var str3 = "\u9fa5";
		console.log(str2,str3);

		var num = true;
		console.log(typeof s1,typeof s,typeof(num));


	</script>
</head>
<body>

</body>
</html>
```
3. boolean 布尔类型
  用来表示真或假
  注意：
  布尔类型表示真或假，是可以参与数学运算的，true = 1 / false = 0
4. undefined 类型
  1. 变量声明未赋值时，为undefined
  2. 如果访问对象不存在的属性时，也为undefined
5. null 类型
  空类型
判断数据类型
typeof
使用：
var n = 'asda';
console.log(typeof n);
console.log(typeof(n));
引用数据类型（复杂数据类型）
数组函数对象

6.数据类型转换

相同数据类型的变量进行运算时，保持数据类型一致

隐式类型转换（自动转换）
1. number + string
  当字符串与其他数据类型相加时， + 表示字符串的拼接，不再是数学运算
  转换规则：将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串
  et：
  var num = 15;
  var str = '18';
  var r1 = num + str; //'1518'
  var r2 = 15 + 18 + '18'; //'3318'
  var r3 = '18' + 15 + 18; //'181518'
2. boolean + string
  将布尔类型转换为字符串进行拼接
  var n = true;
  var r = n + '你好'; //'true你好';
3. number + boolean
  将布尔类型转换为数字进行运算
  true = 1;
  false = 0;
  et:
  var n = true +15; //16
  var n1 = false + 20; //20

强制类型转换

toString()
将任意非字符串类型的数据转换为字符串类型，并返回转换后的结果
et：
var n = 100;
var r = n.toString();
console.log(typeof n,typeof r);
Number()
将数字字符串或者是布尔值转换成number 类型，如果字符串中包含非数字字符，转换失败，会返回NaN （Not a Number）
et：
var r = Number('35.5'); //35.5
var r2 = Number(true); //1
var r3 = Number('18a'); //NaN
parseInt()
解析字符串中的数字，只解析字符串开头中的数字，如果字符串不是以数字开头的，都返回NaN,并且只解析整数
et：
var r = parseInt('18.2a'); //18
var r2 = parseInt('a18'); //NaN
var r3 = parseInt(35.5); //35
如果parseInt方法是参数不是字符串，会自动先使用toString() 转换成字符串，之后在进行判断

parseFloat()
作用等同于parseInt(),解析结果包含小数部分
et：
var r = parseFloat('35.5')
注意：如果字符串中出现指数计算法表示的小数
'1.5e3'，都视为是小数

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		// 1. 自动类型转换
		var r1 = 15 + "18";
		var r2 = 15 + 18 + "18";
		var r3 = "20" + true;
		var r4 = 10 + true;
		var r5 = true + false;
		console.log(r1,r2,r3,r4,r5);

		//2. 强制类型转换
		//2.1 toString()
		var n1 = 100;
		var n2 = true;

		var res1 = n1.toString();
		var res2 = n2.toString();
		console.log(res1,res2);
		console.log(typeof n1, typeof res1);
		console.log(typeof n2, typeof res2);

		//2.2 Number() 将非数字转换为数字类型
		console.log(Number("18"),Number(true),Number("18a"));

		//2.3 parseInt()解析字符串中的整数
		console.log(parseInt("35.5"),parseInt("20Hello"),parseInt("10Hello20"),parseInt("hao123"));


		//2.4 parseFloat() 解析字符串中的数字，包含整数和小数部分
		console.log(parseFloat("35.5"),parseFloat("3.14PI"),parseFloat("1.5e3"),parseFloat("hao123.5"),parseFloat("1.5a3"));
	</script>
</head>
<body>

</body>
</html>

7.运算符

赋值运算符
=
将右边的值赋给左边变量
算法运算符
1. + - * / % ->加减乘除取余
2. ++ -- 自增或自减运算符
  变量的自增和自减指的是在自身基础上进行 +1 或 -1 的操作
  var n = 5;
  n++; //n+1;
  console.log(n); //6
  ++ n;
  console.log(n); //7
  注意：
  1. 自增或自减运算符在单独与变量结合时，放前和放后没有区别
  2. 如果自增或自减运算符与其他运算符结合使用，要区分前缀和后缀,做前缀，那就先++/--,再进行赋值或其它运算，如果做后缀，就先结合其它运算符，再进行++ / --
    et：
    var num = 5;
    var res = num ++;
    console.log(num,res) // 6 5
    如果是var res = num ++;
    1. 先找变量
    2. 从变量位置从右向左结合运算符
      et：
      var num = 5;
      var res = ++ num;
      console.log(num,res) //6 6
      
      思考：
      var n = 5;
      // 5 + 7 + 7 + 9 + 9
      var r = n++ + ++n + n++ + ++n + n;
      r = ？
```
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		var r1 = 5 / 2;
		var r2 = 5 % 2;
		console.log(r1,r2);
		var n = 5;
		n ++; // n = n + 1;
		console.log(n); // 6
		++ n;
		console.log(n); //

		var num = 5;
		var res = num ++;
		console.log(num,res); // 6 5 

		var num1 = 5;
		var res1 = ++ num1;
		console.log(num1,res1); // 6 6


	</script>
</head>
<body>

</body>
</html>
```

上一篇： PHP通用alert函数

下一篇： php判断大小写字母函数

pythonweb day07

1.JavaScript概述

2.JS使用方式

3.基础语法

4.JS的变量与常量

5.数据类型

6.数据类型转换

7.运算符

PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上

day07

day07 反射

PythonWeb框架Django搭建过程

java 学习笔记 day07 类的继承、多态、super关键字

Day07 动态页面技术（JSP）

day07 java基础变量常量作用域

【脚本语言系列】关于PythonWeb访问ftplib，你需要知道的事

pythonweb django的学习

荐 Python菜鸟入门：day07

pythonweb day07

1.JavaScript概述

2.JS使用方式

3.基础语法

4.JS的变量与常量

5.数据类型

6.数据类型转换

7.运算符

PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上

day07

day07 反射

PythonWeb框架Django搭建过程

java 学习笔记 day07 类的继承、多态、super关键字

Day07 动态页面技术（JSP）

day07 java基础 变量 常量 作用域

【脚本语言系列】关于PythonWeb访问ftplib，你需要知道的事

pythonweb django的学习

荐 Python菜鸟入门：day07

day07 java基础变量常量作用域