WEB Basic基础-07

1、列表


1、表现特征


1、上下外边距


2、左内边距


3、列表项标识


4、纵向排列


2、列表属性


1、list-style-type


取值：


1、none (不显示任何标识)


2、disc (实心原点)


3、circle (空心圆点)


4、square (实心方块)


... ...






2、list-style


作用：列表的简写属性


常用用法：


list-style:none;


2、转换属性 - transform


1、什么是转换


改变元素在页面中的位置，尺寸，角度的一种方式


2、属性


1、转换属性


属性：transform


取值：


1、none ：默认值，无任何转换效果


2、转换函数


如果有多个转换函数的话，中间要用空格隔开


2、转换原点


1、什么是转换原点


转换原点就是转换操作所围绕的一个点


2、语法


属性：transform-origin


取值：使用空格隔开的两个值


1、以 px 为单位的数值


2、以 % 为单位的数值


3、关键字


top / bottom / center / left / right


注意：默认的转换原点是在元素的中心位置处


3、转换效果


1、位移


1、作用


改变元素在页面中的位置


2、语法


属性：transform


取值(函数)：


1、translateX(x)


x表示元素在x轴上的位移距离(横向)


x取值为正，元素右移


x取值为负，元素左移


2、translateY(y)


y表示元素在y轴上的位移距离(纵向)


y取值为正，元素下移


y取值为负，元素上移


3、translate(x)


等同于 translateX(x)


4、translate(x,y)


同时在x轴和y轴上做位移操作


2、缩放


1、作用


改变元素在页面中的大小


2、语法


属性：transform


取值(函数)：


1、scaleX(x)


x表示横向缩放比例


x默认值为1，原始大小


大于1的数字：放大的比例


大于0小于1的数字：缩小的比例


小于0：物极必反


2、scaleY(y)


y表示纵向缩放比例


效果等同于 x


3、scale(value)


value表示x轴和y轴的缩放比例是相同的


3、旋转


1、作用


改变元素在网页中的角度


2、语法


属性：transform


取值：


1、rotate(ndeg)


n为旋转角度


n取值为正，顺时针旋转


n取值为负，逆时针旋转


3、注意


1、转换原点会影响转换效果


2、旋转操作时，会连同坐标轴也一同跟着旋转。会影响旋转之后的位移操作。


3、JavaScript概述


1、什么是JavaScript


JavaScript 简称"JS",是一种运行于JS解释器或执行引擎中的解释性脚本语言


2、JS发展史


1、1992年Nombas公司开发了一款脚本语言，能够运行在网页中，名称 CMM(C--),更名为 ScriptEase


2、1995年Netscape(网景)为自己的浏览器Navigator2.0开发了另一款脚本语言 - LiveScript,后更名为 JavaScript


3、1996年Microsoft，为自己的浏览器IE3.0开发了一款JavaScript的克隆版本JScript


4、1997年Netscape找到了ECMA(欧洲计算机制造商联合会)。Netscape将JS的核心交给了ECMA，从此JS的核心被更名为 ECMA Script，简称ES






完整的JS组成：


1、核心 - ECMAScript


包含了JS中最基本的语法规范


2、浏览器对象模型 - BOM模型


Browser Object Model


提供了一系列的可操作方法和属性用于和浏览器进行交互


3、文档对象模型 - DOM模型


Document Object Model


提供了一系列的可操作方法和属性用于和文档进行交互


4、JS的使用方式


1、在元素事件中编写JS代码


事件：用户在元素上所激发的行为操作


onclick：当用户单击元素时激发的操作


语法：


<标记 οnclick="JS执行代码">


JS可执行代码：


console.log("向控制台中输出一句话");


console.log('向控制台中输出一句话');


2、将代码嵌入在网页的<script></script>里


语法：


在网页的任意位置处，均可以嵌入


<script>


可执行的JS代码


</script>


特点：


网页加载时就执行






document.write("向网页中输出的一句话!");


注意：将document.write编写在按钮中的话，在执行时，会刷新网页中的内容


练习：


在一个按钮中，单击时，执行 document.write()


3、将JS代码编写在外部的JS文件中


1、创建一个js文件(xxx.js)，编写JS代码


2、在使用的网页中对js文件进行引入


<script src="JS文件路径"></script>






注意：在引入的JS标记中是不能编写JS脚本的


练习：


1、使用元素事件方式，向控制台中输出一句话"我的第一个JS练习"


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


2、使用<script></script>，向网页中输出一句话"我的第一个JS练习"


<script>


document.write("我的第一个JS练习");


</script>


3、使用外部JS文件的方式，在网页中弹出一句话"我的第一个JS练习"


xxx.js:


window.alert("我的第一个JS练习");


xxx.html


<script src="xxx.js"></script>


5、JS的基础语法


1、JS都是由语句来组成的


1、由运算符，关键字 和 表达式构成的


2、JS中严格区分大小写


console.log("..."); 正确


Console.log("..."); 错误


3、每条语句必须以 ; 表示结束


4、所有的标识符，符号必须都是英文的


console.log("");


console.log(“”)；


2、JS中的注释


单行：// 


//这是一段有注释的内容，其中文字包含比较多，自动换行了


多行：/*  */


6、JS中的变量 和 常量


1、变量


1、声明变量


声明：var 变量名;


赋值：变量名 = 值;


声明并赋值：var 变量名=值;


ex:


声明一个变量名称为 uname，值为 王小明


var uname = "王小明";


console.log(uname);


document.write(uname);


window.alert(uname);






var name = ""; //尽量不要用 name 做变量


2、注意


1、在声明变量时，尽量使用 var 关键字，如果省略var的话，也可以，但容易出问题。


2、声明变量如果未赋值的话，默认值为 undefined


3、变量名的命名规范


1、不能是JS中的关键字和保留关键字


2、由字母，数字，下划线(_)和$  


var $ = 35;


var _46 = 46;


3、数字不能开头


4、尽量不要重复


5、尽量要见名知意


6、如无特殊需求，尽量使用小驼峰命名法


var age;


var gender;


var userName;


4、变量的使用方式


1、为变量赋值


只要变量出现在赋值(=)符号的左边,一律都是赋值操作


var age = 35;


var newAge = age;


2、获取变量的值


只要变量没出现在赋值(=)符号的左边，一律都是取值操作


console.log(uname);


var age = 35;//赋值


age = age + 35;






赋值操作：


1、先运算赋值符号右面表达式或值，再赋值给左边的变量


2、赋值符号的左边只能是变量


2、常量


1、什么是常量


一经声明就不允许被修改的数据就是常量


2、语法


const 常量名=值;


注意：


1、常量声明好之后是不允许被修改的，所以一定要赋值


2、常量名一般采用全大写形式






练习：


1、创建一个网页06-JS-const-exer.html


2、声明一个常量PI，赋值为3.14


3、声明一个变量 r，表示一个圆的半径，随意赋值


4、通过PI和r计算圆的周长，并将结果保存在变量 l 中 （2*π*r）


5、通过PI和r计算圆的面积，并将结果保存在变量 s 中 （π*r*r）


半径为...的圆的周长是...


半径为...的圆的面积是...


保留到小数点 n 位


var l = 62.8000000000004;


l = l.toFixed(n);