JavaScript基础语法及DOM简单操作
一.js简单语法
- js严格区分大小写,要注意.
- Js中每一条语句以分号结尾.
- 如果不写分号,浏览器会自动添加,但是会消耗一些系统资源.
- 而且有些时候,浏览器为加错分号,所以在开发中分号必须写
- js中会忽略多个空格和换行,所以可以利用进行格式化.
Js基本输出语句
- alert(“”); 弹出一个警告框.
- ducoment.write(““); 在body里显示.
- Console.log(“”); 在控制台显示.
- Prompt(‘’); 弹出一个文本框.
二.变量
在js中 声明变量用var
命名规范:
三.数据类型
一.简单介绍
- 数字型
isNaN() 方法用来判断是否为数字 并且返回一个值 如果是数字返回false 如果不是返回true.
2. 字符串型
字符串嵌套.内单外双,外单内双.
转义符:
字符串的长度用 length
字符串的拼接 + 只要有字符串和其它类型相拼接 最终的
结果是字符串类型. 数值相加,字符相连.
3. boolean型
布尔型与数字型相加时,true为1,false为0
4. undefined 未定义
5. null 空值
二.获取数据类型
关键字:typeof 变量名
Prompt 取过来的值 是字符串型的
三.数据类型转换
1.转换为字符串型
1.toString()方法 变量.toString()
2.利用 String(变量)
3.利用 + 拼接字符串的方法实现转换效果
2.转换为数字型
1.parseInt(变量) 可以把字符型的转换为数字型 得到的是整数.也可以去掉单位.
2.parseFloat(变量) 可以把字符型的转换为数字型 得到的是小数,浮点数.
3.利用 Number(变量)
4. 利用了算术运算 - * / 隐式转换
3.转换为布尔型
Boolean()函数 其他类型转换为布尔型
代表空.否定的值会被转换为false ,如 ‘’.0 NaN null undefined
其余值都会被转换为true
四.运算符
1. 算术运算符
(加减乘除)递增++,递减–
注:后置自增: 先返回原值后变量自加1,前置自增: 先自加1后返回值
2. 比较运算符
默认转换数据类型 会把字符串型的数据 转换为数字型
=== 判断两边的值和数据类型是否完全相同
逻辑中断很重要,会影响程序运行的结果
3. 逻辑与短路运算
如果表达式1结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1
4. 逻辑或短路运算
如果表达式1结果为真 则返回表达式1 如果表达式1为假 那么返回表达式2
运算符优先级:
五.流程控制
1. 分支结构
(1).If条件语句
If (条件表达式) {
执行语句
} else{
执行语句
}
多分支结构:
If () {
} else if() {
} else if() {
} else{
}
(2).Switch 语句
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
.
.
.
Default:
执行最后的语句;
}
(3).三元表达式
语法结构:
条件表达式 ? 表达式1: 表达式2
如果条件表达式为真 则返回 表达式1 的值 如果条件表达式为假 则返回 表达式2的值
2. 循环结构
1. for 循环
重复执行某些代码,通常跟计数有关
for(初始化变量;条件表达式;操作表达式){
循环体
}
双重for循环
for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
//执行语句
}
}
2. while 循环
while(条件表达式) { //while 当…时候
//循环体
}
3. do-while 循环
do{
//循环体
}while();
六.数组
使用new 关键字创建数组
- Var 数组名 = new Array() ;
- Var 数组名 = [ ]; 如var arr =[1,2,’pink老师’,true];
遍历数组
For(var i=0; i<3; i++){
Console.log(arr[i]);
}
数组中新增元素
可以通过修改length 长度以及索引号增加数组元素
- 手动修改 为length赋值 arr.length=4;
- 主动追加索引号 arr[4]=’pink’
七.函数
函数就是封装了一段可以被重复使用的代码块 目的:就是让大量代码重复使用
1. 函数的使用
-----声明函数,调用函数
1.1 声明函数
function 函数名() {
//函数体
}
// function 声明函数的关键字 全部小写
// 函数是做某件事情 函数名一般是动词
// 函数不调用自己不执行
1.2 调用函数
函数名();
//调用函数时千万不要忘记加小括号
2. 函数的参数
2.1 形参和实参
function 函数名(形参1,形参2…){ //在声明函数的小括号里面的是形参.
}
函数名(实参1,实参2…); //在函数调用的小括号是实参
形参是接收实参的,相当于一个变量。
1.如果实参的个数多于形参的个数 会取到形参的个数
2.如果实参个数小于形参的个数 多于形参定义为undefined
2.2 函数的返回值
function 函数名(){
return 需要返回的结果;
}
只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名()=return 后面的结果
Return 只能返回一个值
3. arguments
八.预解析
- 我们js引擎运行js 分为两步: 预解析 代码执行
(1)预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
(2)代码执行 按照代码书写的顺序从上往下执行 - 预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)
在函数里,不声明直接赋值相当于全局变量
(1)变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
(2)函数提升 就是把所有的函数声明提升到当前的作用域最前面 不提升调用
九.对象
1. 创建对象
-
利用字面量创建对象
-
利用new Object 创建对象
-
利用构造函数创建对象
2. 使用对象
3.遍历对象-for in 循环
4.对象小结
十.内置对象
1. 查文档
- MDN
2. Math 对象![在这里插入图片描述](https://img-blog.csdnimg.cn/a2876d0f8d764fabb408cfa4940bcbfe.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-95rGC772e,size_20,color_FFFFFF,t_70,g_se,x_16)
3.Date 对象
倒计时案例
4.数组对象
判断是否为数组:
Instanceof 关键字
Array.isarray() 方法
5.字符串对象
十一.DOM部分操作
1. 获取元素
1.1 通过id 获取
1.2 通过标签名获取
2. 事件基础
3. 操作元素
3.1 改变元素内容
3.2 改变元素属性
3.3 改变表单属性
4. 节点操作
兄弟节点
js学了将近一半,但属性及各种操作繁多,还需要多练习,通过敲代码,做案例来属性各种知识。
相关文章
- 测试JavaScript函数的性能
- 面试开发常用的JavaScript知识点总结
- 前端基础(一)_初识JavaScript
- AngularJs - Javascript MVC 框架
- 7个去伪存真的JavaScript面试题
- 【JavaScript】Boolean
- JavaScript(一)-- 基础
- 浏览器环境下的javascript DOM对象继承模型
- JavaScript 基础(三) - Date对象,RegExp对象,Math对象,Window 对象,History 对象,Location 对象,DOM 节点
- JavaScript基础
- JavaScript基础对象---Map
- JavaScript 01 javaScript基础认知/数据类型/运算符
- javaScript 03 数组详解(数组声明/基础操作)
- 【笔记】JavaScript版数据结构与算法——基础算法之“正则类”(459. 重复的子字符串)
- 【笔记】JavaScript版数据结构与算法——基础算法之“数组类”(89. 格雷编码)
- 【笔记】JavaScript版数据结构与算法——基础算法之“数组类”(914. 卡牌分组)
- javascript 基础案例(循环)
- JavaScript获取某年某月的最后一天
- JavaScript 开发者经常忽略或误用的七个基础知识点
- JavaScript(JS) date.setUTCDate(dayValue)
- Javascript调用ActiveX对象
- 如何理解并学习javascript中的面向对象(OOP)
- JavaScript易错知识点整理
- Javascript async异步操作库简介
- JavaScript 之实现一个简单的 Vue
- Javascript常用API合集
- 07前端学习之JavaScript 基础语法(一): 变量