JS(JavaScript):负责页面逻辑
是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
-1.基础语法:
统一的标准:ES5(ECMA Script5)\ES6(ECMA Script6)
微软:Type Script ECMA Script 的发展方向都借鉴了TS,并且很多大型框架使用TS coffeeScript
ES5 可以不使用var关键字去定义 不需要设置变量的类型 var: 用于定义变量
定义变量的基本公式: 语句结束的分号,可加可不加
JavaScript 显示数据

1.声明变量:var 变量名; (一条语句) 2.给变量赋值(前提是已经声明过的变量):变量名=值

3.声明变量的同时赋值 var变量名=值

调试代码方法
1. alert(变量) 如下

alert 以弹出框的方式弹出变量的值
2. Console.log(变量) 在控制台里面 输出日志

在控制台输出变量

报错处理:可以通过第一行 后面的提示知道在哪个文件的多少行出错。点击可以进入到 出错的位置 xxx is not defined 某一个变量没有定义 解决方式 声明提示的变量。
代码优化:

多个变量一起声明

数据的基本类型:
1.String 字符串类型 字符串用于存储和处理文本

双引号、单引号括起来的的内容就是字符串 注意区分变量名和字符串

常用转义字符 换行符\n 回车符\r

2.Number 数值型 如 var num= 1;

3.boolen 布尔型 boolen:true/false(空字符串,0) 多配合条件判断语句使用

算术运算符 +-*/% ++ -- 如

可以通过弹出框窗口输入文本内容 字符串

parseInt(),可以把字符串 转换成整数 忽略小数点的部分
parseFloat(),可以把字符串 转换成小数

----自增 自减-------

--赋值运算符---

if条件语句 if (表达式){...}else {...} 如果xxxx,那就干.... 否则...

逻辑运算符 &&当两个条件同时满足 才是真的

|| 或 两个条件满足其中之一就好

! 取反

Math.random()999 0--999之间的随机数

三目运算的公式

-2.!importantDom操作:
Dom:文档对象模型
操作:一、查询DOM元素 可以通过选择器来查找dom对象 document.querySelector(选择器)

点击事件onclick 点击box的时候执行哪些代码

通过JS更改css样式: 如:dom.style.borderRadius="50%"
引入JS方式 格式<script src="... .js"></script>


如果非要放在<head></head>的话 那么window.onload=function(){} (监听window加载完毕的状态)

二、创建元素 添加元素
1.innerHTML("html") 会把父元素里边内容清空,重新放置元素
也可以通过innerHTML去清除父元素中的内容

2.创建var dom = document.createElement("标签的名字") 添加:父元素.appendChild(子元素)
数组:有序排列的容器 里面的元素按照一定顺序排列 可通过一个序号(下标)找到里边的元素

for 循环 循环代码块指定的次数
如果你想运行相同的代码,并且每次的值都不同的时候,用循环会方便很多
语法

具体事例:

定时器 :每隔多久就会执行一次任务

1.样式 2.属性 3.内容 4.事件
-3.日期对象、字符串处理、数据处理、正则......
-4.Bom、(面向对象、闭包 (面试时常见问题))、命名空间......
-5.封装插件 (封装UI、工具类插件)
网友评论