认识js
含义
是运行在js解释器的解释型、弱类型、面向对象的脚本语言
书写js的两种方式
1、在html页面创建 后之间写 2、在外部创建js文件。需引入
输出方式3种
console.log(); document.write(); alert();
注释
单行注释：// 多行注释：/** **/
变量
var 变量名=变量值； （默认值：undefined） 注意：不能以数字开头。不能用关键字。
常量
const 常量名=值； 创建后不允许修改。
运算符
算术运算符：+ - * / %
%====》读模，取余数。 可用来判断奇偶性。
算术运算具有隐式转换
关系/比较运算符：
****> < >= <= == ！= 以上6个运算符的结果一定都是一个布尔值：true、false
逻辑运算符
与 && （全真才为真，一假则假） 或 || （有一真则为真，全假才为假） 非 ！ （颠倒布尔值）
数据类型：（两大类）
原始/基本/值类型：5个 1、String --- 字符串，必须 "" 或 '' 包裹
2、Number --- 数字
3、Boolean ---- 布尔，取值只有2个，true和false
4、Undefined - ---取值只有一个：undefined，变量未赋值时的默认值，没有任何用处
5、Null - 取值只有一个：null，空，释放内存/变量
引用/对象类型：11个对象（属性和方法）
数据类型转换
页面上的一切数据，数据类型都是一个字符串
隐式转换
算术运算符的隐式转换：
默认两边都会转为是数字再运算 特殊：1、+运算，如果碰到一个字符串，两边都会转为一个字符串，最后变为拼接操作 2、其他类型转为数字会为： true->1 false->0 undefined->NaN null->0 3、字符串也可转数字，但是前提必须是纯数字组成的字符串才可以，若包含了一个非数字字符则为NaN 4、NaN：参与任何算术运算结果都为NaN。参与任何比较运算结果都为false。
强制/显式转换
1、转为字符串： var str=x.toString();
2、转数字*
①var num=parseInt(str/num); ②var num=parseFloat(str); ③Number(x);
分支结构
1、if(条件){ 操作 }
2、if(条件){ 操作 } else{ 默认操作 }
3、if(条件1){ 操作1 } else if(条件2){ 操作2 } else{ 默认操作 }
循环结构
含义：反复执行相同或相似的操作
1、while循环
var循环变量=几，
while(循环条件){ 循环体； 循环变量变化起来： }
2、死循环 不确定循环次数的时候使用。 语法：while(true){ 循环体; }
3、for循环
for(var 循环变量=几; 循环条件; 循环变量的变化) { 循环体; }
Function函数的基础
创建函数
语法： function 函数名( ){ 函数体;//若干操作 }
调用函数
函数名();====》程序员使用
<标签 onclick="函数名()"></标签>；=====》用户使用
带参数的函数
1、创建
function 函数名(形参列表){ 函数体;//若干操作 }
2、调用
函数名(实参列表)
数组
多个元素/数据组成的一个集合，保存在一个变量名：一个变量可以保存多个数据
下标都是从0开始的，到最大长度-1
创建数组
直接量方式： var arr=[ ];
构造函数方式：var arr=new Array();
访问数组中的元素
数组名[下标];
追加/替换元素
数组名[下标]=值;
下标有无元素，如果有，则为替换，如果没有，则为追加
数组唯一的属性：length - 长度
语法：数组名.length
重要：
1、向末尾添加元素：arr[arr.length]=值;
2、获取倒数第n个元素：arr[arr.length-n];
3、缩容：删除倒数n个元素：arr.length-=n;
遍历数组：
把数组中的每个元素取出来执行相同、相似的操作。循环数组得到每个元素。
for(var i=0;i<arr.length;i++){
console.log(arr[i]); }
DOM
获取元素
通过 HTML 的特点去获取元素
1、通过 id：var elem=document.getElementById("id")
2、通过 标签名：var elems=document/parent.getElementsByTagName("标签名")
3、通过 class名：var elems=document/parent.getElementsByClassName("class名")
通过 关系 去获取元素
父：elem.parentNode;
子：elem.children; - ---是集合
第一个儿子：elem.firstElementChild;
最后一个儿子：elem.lastElementChild;
前一个兄弟：elem.previousElementSibling
后一个兄弟：elem.nextElementSibling;
操作元素
绑定事件
elem.onclick=function(){ 操作; }
this的使用===》 单个元素：this就是这个元素。 多个元素：this就是当前触发事件的元素
样式
获取样式：elem.style.css属性名;
设置样式：elem.style.css属性名="css属性值";
内容
1、内容能识别标签
获取：elem.innerHTML;
设置：elem.innerHTML="新内容";
2、不能够识别标签，只认识纯文本**
获取：elem.innerText;
设置：elem.innerText="新内容";
3、input标签
获取：input.value;
设置：input.value="新内容";
属性
获取属性值：elem.getAttribute("属性名");
设置属性值：elem.setAttribute("属性名","属性值");
简化版： 获取属性值：elem.属性名; 设置属性值：elem.属性名="属性值";
注意：1、class必须写为className 2、只能操作标准属性，不能操作自定义属性
扩展：
用户输入框
var user=prompt("提示文字","默认值");
随机整数的公式：
var r=parseInt(Math.random()*(max-min+1)+min);
eval(str)：计算字符串
