尚马JavaScript 6月2日

三种引入方式
1.使用style标签编写css代码
 
2.在元素上使用style属性
我的标题
3.使用link标签引入css文件

使用规则:
style标签 调试代码时使用
调试完毕 代码放入css文件 使用link标签引入到html文件中
直接使用style属性 尽量不用

描述性语言
选择器{
    样式属性1:样式值;
	样式属性2:样式值;
}

常用选择器 
	1.标签(元素)选择器
	2.class选择器
	3.id选择器
			 
	优先级 id选择器>class选择器>标签(元素)选择器
			100       10           1

其他常用选择器
	4.并集选择器   选择器,选择器   同时选取多种元素
	5.交集选择器   选择器选择器    通过多条件选取元素 先元素 再其他
	6.后代选择器   选择器 选择器   符合嵌套关系的元素  可以跨代
	7.子代选择器   选择器>选择器   符合嵌套关系的元素  只能选取子元素
	8.属性选择器   [属性] [属性="属性值"] 通过属性选取元素 
     通常用在表单元素上 搭配交集选择器一起使用  input[type="button"]
	9.全局选择器   *

color  文字颜色   使用16进制 rgb值红绿蓝 光学成像三元素  #006633 简写为 #063
width  宽        100px   像素
height 高
		 
常用显示器比例  16:9           1920*1080  1080p     2k      4k  决定分辨率上限
		               16:10 
		                4:3              *** 作系统中的分辨率 可以往小调
font-size: 50px;           字体大小
font-family:"楷体" ;        字体类型
font-weight: 900;          字体宽度
text-decoration: none;     文字修饰  去a标签下划线
text-align: right;         文字对齐方式
vertical-align: top;       图片与文字对其方式
border: 10px dashed red;    边框   粗细   线条类型  颜色
border-radius: 10px;        边框圆角
line-height  : 100px;      行高   经常用在使单行文本 在块中居中
		                                   行高与块高相同
background-color: #ADD8E6;   背景颜色
background-image: url(img/jt.jpeg);  背景图片
background-repeat: no-repeat;  背景颜色重复方式
list-style: url(img/jt.jpeg);  列表标题

display  显示方式
		   block  块
		   inline 行内
		   inline-block 行内块
		   none   不显示(隐藏)
 盒子模型相关属性
 content  width
		  height
 padding  内部填充   可以四边分开设置 也可以统一设置
 border   边框       可以四边分开设置 也可以统一设置
 margin   外边距     可以四边分开设置 也可以统一设置  0px auto;在父元素中自动居中
 
 overflow: hidden; 内部元素超过父元素边界  隐藏
 
 float 漂浮  靠左 靠右 让块元素水平排列  让元素都漂浮 效果容易调整
 页面调整文字位置
 cursor: pointer; 光标   pointer手指型
 经常配合伪类选择器使用
 伪类选择器  选取元素的特殊状态
			hover  鼠标悬停 
		    active 鼠标点击
			.mydiv:hover{
				cursor: pointer;
			}
 position 定位
        static  元素排列位置使用默认文档流规则 
		relative  相对定位  元素不脱离文档流  以元素本身位置进行偏移
		absolute  绝对定位  元素脱离文档流   以页面位置进行偏移
		fixed     固定定位  元素脱离文档流   以页面位置进行偏移 并固定在此处
top: 40px; 向下偏移 负值反方向
left: 40px;向右偏移 负值反方向
z-index: 8; 层叠顺序

账号
密码 常见问题 诚聘英才 关于中网 广告服务 付款方式 服务条款 友情链接 法律声明 市场部:0577-6272377 客服电话:0577-62751363                   

JavaScript（简称js）是一种描述语言，基于对象和事件驱动的脚本语言

JavaScript特点:
    脚本语言（一种轻量级的编程语言）
    一种解释性语言（无需预编译）
    被设计为向HTML页面添加交互行为
    运行于客户端（浏览器）

什么是ECMAScript

ECMAScript定义了脚本语言的所有属性、方法和对象
包括语法、类型、关键字、保留字、运算符、对象等
除了JavaScript外，同时也是Nombas的ScriptEase和Flash脚本ActionScript的基础

什么是DOM

  Js中将整个文档对象（html文件）描述成树状模型结构，有元素节点、属性节点、文档节点等等。节点之间有父子关系 js可以通过描述出的节点及关系，动态的 *** 作节点和节点属性。

什么是BOM

Js可对浏览器窗口进行访问和 *** 作
例如：d出新的浏览器窗口，移动、关闭浏览器窗口及调节浏览器窗口大小，WEB浏览器详细的定位对象

1.使用 script 标签       调试代码用
2.使用 script 标签 通过src属性 引入js文件 代码成型后 写成js文件再引入
3.直接在元素事件上编写JavaScript代码    不建议使用

var 定义变量

1.全局作用域

2.函数内作用域

let

1.全局作用域

2.函数内作用域

3.块级作用域

const   常量

Number 数字类型
String 字符串类型
Boolean 布尔类型
Undefined 未定义或未初始化类型
Object  复合类型  包含js中的各种对象
type of 关键字 可以检查变量当前类型
undefined:变量被声明后,但未被赋值
string:用单引号或双引号来声明的字符串
boolean:true或false
number:整数或浮点数
function:函数方法
object:对象 或 数组 或Null 类型

算术运算符  +  -  *  /  %  ++  --
赋值运算符  =  +=  -=  *=  /=  %=
比较运算符: >   <  >=  <=  !=   ==
逻辑运算符:&&  ||  !
       小数相加是会丢失精度  如:0.1+0.2 需要取位数 使用 toFixed(位数)
==与===区别


    "==" 的比较规则:
    先检查两个操作数的数据类型是否相同
    如果相同，则比较两个数是否相等
     如果不同，则先将两个数转换为相同数据类型，再进行比较




    "==="的比较规则:
    先检查两个操作数的数据类型是否相同
    若不同，直接返回false
    若相同，则比较二者是否相等

条件语句
if结构
if(){}
  else if(){}
     else{}
switch结构
   switch(sens){
case '1':doSomething;break;
case '2':doSomething;break;
default:doSomething;
}
循环语句
for 循环结构 有限次数的循环
for(let i=0;i<=10;i++){
}
for(let idx in arr){
}
while 循环结构 不定次数的循环
while(bol){
doSomething
}
do{
doSomething
}while(blo)

系统函数
  系统中已存在的函数
  parseInt()  //转换为整数
  parseFloat()  //转换为 浮点数
  isNaN()是否 不是数字
  eval() 把字符串转成可运算的算式   并计算结果
自定义函数
   需要程序员自己编写 定义
function myFun(a,b){
     console.log("myFun运行了");
  let myRes=a+b;
   console.log(myRes); //控制台输出结果
return true;
}
形参不需要指明数据类型    需要返回值是 加上return 不需要指明返回值类型

onclick              鼠标点击
onmouseover          鼠标悬浮于页面的某个热点之上
onfocus              在表单中选取输入框
onchange             内容改变
onload               页面或图像载入
onkeyup              键盘按键
onsubmit             表单提交

在js中 经常用正则表达式配合进行前端校验，给用户相应提示
语法：/ reg /
两个特殊的符号'^'和'$'。他们的作用是分别指出一个字符串的开始和结束。
例：/^xxxxxx$/
	字符匹配符
（1）[…]：匹配方括号中包含的字符集中的任意一个字符。例如，正则表达式“[abc]”，字符“a”、“b”、“c”都可以与之匹配。
（2）[^…]：匹配方括号中未包含的任何字符。例如，正则表达式“[^ab]”，除了字符“a”、“b”之外,其他的任何字符都可以与之匹配。
（3）[a-z]，[1-9]：匹配指定范围内的任何字符。
（4）[^a-z]，[^1-9]：匹配不在指定的范围内的任何字符。
（5）\d：匹配任意一个数字字符，等效于[0-9]。
（6）\D：匹配任意一个非数字字符，等效于[^0-9]。
（7）\s：匹配任何空白字符，包括空格、制表符等。
（8）\S：匹配任何非空白字符。
（9）\w：匹配任何英文字母、数字和下划线，等效于[A-Za-z0-9_]。
（10）\W：匹配任何非英文字母和数字类字符，但不包括下划线，等效于[^A-Za-z0-9_]。
（11）.：匹配除换行符\n之外的任何单字符。
   次数限定符
（1）{n}:出现n次
（2）{n,}：规定前面的元素或组合项至少出现n次。例如“o{2,}”，字符串“bod”不能与之匹配，但“foood”可以与之匹配。
（3）{n,m}：规定前面的元素或组合项至少连续出现n次，至多连续出现m次，其中n≤m，逗号和数字之间不能有空格。例如“o{1,3}”，字符串“food”和字符串“foood”都能与之匹配。
（4）+：规定前面的元素或组合项必须出现一次或连续出现多次，等效于{1,}。
（5）*：规定前面的元素或组合项可以出现零次或连续多次，等效于{0,}。例如“zo*”，字符串“z”和“zoo”都能与之匹配。
（6）?：规定前面的元素或组合项出现零次或一次，等效于{0,1}。例如“zo?”,字符串“z”和“zo”都能与之匹配。
  常见正则表达式
1．匹配身份z号码：^\d{15}$|^\d{18}$
2．邮箱：^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$;
3．中国的邮政编码：^\d{6}$
4．匹配字符串中的中文字符：[\u4e00-\u9fa5]
5．验证5到12位的qq号：^\d{5,12}$	
6.验证手机号 ^1(3|4|5|7|8)\d{9}$

控制小人移动 当达到1 或 8 禁用按钮


	
		
		
		
	
	
	
		

		
		
		
		
		
	
	
	

制作简易计算器