js第一周

用户482029743929
71 阅读3分钟

概述

javascript是一个运行在客户端浏览器的 解释型 弱类型 面向对像

解释型

运行前不检查，运行后碰到错误停止后续代码

js的使用

直接在html上写一个script标签，里面写js 或者在js文件中写，然后引入

三种输出方式

在控制台输出

console.log(内容)

在页面上输出

docunment.write(内容)

在弹出框输出

alter（内容）

变量

一种创建后可以反复修改和使用的数据,相当于一个代数，使用这个代数就是在使用里面的值 使用： var 变量名=值;

常量

创建后值不能被修改，只能设置一次值 使用： const 常量名=值;

算术运算符

  • ① % ：两个数相除，不取商，取除不尽余下的值 一般用来判断奇偶性 获得一个数字的倒数n位
  • ② + ：左右两边如果出现一个字符串则转为字符串的拼接
  • ③ -*/% ：不仅可以计算数字。也可以把纯数字的字符串转化为数字，但是字符串中有非数字的字符，则转化为NaN NaN参与任何计算结果都为NaN，参与任何判断都为false

数据类型

原始值：

  • 1：number 数字 取值无数个
  • 2：string 字符串 取值无数个
  • 3：boolean 布尔 取值：true/false
  • 4：undefined 创建一个变量没有赋值 就为undefined
  • 5：null 空 释放变量节约内存空间

分支结构

判断不同情况下对应的代码执行不同内容 执行了一条就不会执行其他 if（判断条件）{操作；} else if(判断条件){操作；} else if(判断条件){操作；} else{默认操作；}

  • 1：else if想写多少写多少 最后else可以不写 如果什么条件都不满足及什么都不执行
  • 2：书写顺序需要判断需求来写，不能乱写

用户输入弹出框

  • var 变量名=prompt（“提示文字”，“默认值”）
  • 默认值位置可以不写，用户输入的字符出现在那个位置

数据类型的转化

  • 1.算术运算符（隐式转化）

  • ①. + 左右任意一边碰到字符串，就不在是加法，而是左右两边内容的拼接

  • ②. ture可以转化成1

  • false可以转化成0

  • undefined可以转化成NaN

  • null可以转化成0

  • ③. -*/% 可以把纯数字字符串转化成数字，不是纯数字则转为NaN

  • 2.显性转化（强制转化）

  • ①：parseLnt(str/num)

  • 从左到右一次读取字符，提取数字直到碰到非数字就停止，只能转化为整数，如果一开始就碰到非数字，则为NaN

  • ②：parseFloat（str）

  • 同上，但可以识别一个小数点

  • ③：var str=x。toString（）；

  • ④：Number（x） 完全等效隐式转化 不如用 x-0，x*1，x/1，x%1

  • NaN的常用用法

  • ！isNaN（内容） ture 是一个有效数字 false则为NaN，，

  • 通常用来判断内容是不是数字

function的基础

需要提前预定义好，可以反复使用的代码段 function 函数名(){代码；}

  • 调用：1.要么在js中直接写要执行几次 ：函数名（）；
  •  2.绑定触发事件`<elem onclick="js代码">内容</elem>`

带参数的函数

function 函数名（形参）{函数体}

  • 使用：实参：
  •   函数名（实参） 实参是具体的值，需要使用的时候再调用
  • 实参和形参是一一对应的，可以有多个，中间用逗号隔开

程序的流程控制语句

  • 顺序执行：默认从上到下执行
  • 分支结构：通过条件的判断 选择代码执行
  • 循环结构：通过条件的判断，选择要不要重复执行代码

比较运算符

,<，>=,<=,==,!= 结果一定是一个布尔值

逻辑运算符

&&：并 ||: 或 ！：颠倒布尔值

循环结构

循环三要素

  • 循环条件：开=开始到结束 循环的次数
  • 循环体：做的操作时什么
  • 循环变量：记录当前的时在哪一次，不断变化，往往都朝着不满足条件进行

while循环

var 循环变量名=几 while（循环条件）{ 循环体； 循环变量的变化；}

  • 如果满足条件就做循环体操作，直到循环条件不满足，就会退出循环
  • 宏观上循环一瞬间就结束了，但微观上来说是一次一次执行的

for循环

for(var 循环变量名=几；循环条件；变量的变化){ 循环体；}

死循环

for循环和while循环都可以 while(ture){循环体} for（；；）{循环体}

  • 退出死循环：break(只能在循环中使用，多半是搭配死循环使用)

数组的基础

  • 是一个可以保存多个数据的集合
  • 都是线性排列，除了第一个元素，每个元素都有一个唯一的前驱元素，除了最后一个元素，每个元素都有一个唯一的后继元素
  • 每个元素独有一个自己的位置，成为下标，下标从0开始，到最大长度-1

创造数组

  • 1.var arr=[数据1，数据2，]
  • 2.var arr=new Array(数据1.数据2，，，)
  • 获取数组中的数据：数组名[下标]；
  • 添加、替换：数组名[下标];
  • 数组的三大不限制 1.不限制元素个数 2.不限制元素类型 3.不限制下标越界 1.如果下标越界，获取元素会返回一个undefined 2.如果下标越界，添加元素会得到一个稀疏数组
  • 4.数组中的唯一属性：长度：数组名.length；获取当前数组的长度：最大下标+1
  • 5.三个固定套路
    ①获取倒数第n个元素 ：arr[arr.length-n] ②始终向末尾添加元素：arr[arr.length]=新值 ③缩容 删除倒数n个元素：arr。length-=n

遍历数组

for(var i=0;i<数组名.length;i++){}

查找元素

  • 通过id查找： var elem=document.getElementById("id值")
  • 通过标签名： var elems=document.getElementsByTagName("标签名") 找到的是一个集合
  • 通过class查找： var elems=document.getElementsByClassName("class名") 找到的是一个集合
  • 通过关系查找 必须先找到一个元素才能调用关系 1.父元素：elem.parentNode 2.子元素：elem.children 集合 3.第一个儿子：elem.firstElementChild 4.最后一个儿子：elem.lastElementChild 5.前一个兄弟：elem.previousElementSibling 6.后一个兄弟：elem.nextElementSibling

操作元素

  • 前提是找到元素，dom集合不能直接操作，要遍历
  • 获取内容：elem.inner.HTML,设置内容：elem.inner.HTML="新内容"，获取文本内容：elem.inner.Text,设置文本内容：elem.inner.Text="新内容"，获取input内容：input.value,设置input内容：input.value="新值"
  • 获取属性值：elem.getAttribute("属性名");设置属性值：elem.setAttribute("属性名","属性值");
  • 简化版获取属性值：elem.属性名;设置属性值：elem.属性名="新属性值";简化版写class必须写classNa，并且不能操作自定义属性
  • 获取样式：elem.style.css属性名;设置样式：elem.style.css属性名="css属性值";css样式中有-的地方要去掉-，改为小驼峰命名法

绑定事件

  • elem.on事件名=function(){}
  • this关键字，是一个指针，用在事件内；如果单个元素绑定事件：this->这个元素；如果多个元素绑定事件：this->当前触发事件的元素

- 计算字符串

去掉字符串的"" :eval(str)

avatar
文章
阅读
粉丝