您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JavaScript基础语法

时间:2020-01-16 11:00:02  来源:  作者:

 

JavaScript基础语法

 

 

一、JAVAScript的诞生

JavaScript 诞生于 1995 年。由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言 名字起源: Mocha->LiveScript->JavaScript

二、js用途

它的主要目的是,验证发往服务器端的数据、增加 Web互动、加强用户体验度等。可用于开发网站、游戏、移动端App

三、js语言的组成

javascript = ECMAScript + BOM + DOM

  1. 核心(ECMAScript)
  2. 浏览器对象模型(BOM)
  3. 文档对象模型(DOM)
1、关键字

breakdoinstanceoftypeofcaseelsenewvarcatchfinallyreturnvoidcontinueforswitchwhiledebuggerfunctionthiswithdefaultifthrowdeleteintry

2、保留字

classenumextendssuperconstexportimport

3、术语
  • 返回值:运算后得到的值
  • 程序的三大流程控制我们的计算机在执行一个程序的时候,最基本的方式是一条语句接一条语句的执行。但不可能所有的问题都能用顺序执行方式就能解决,总会有一些跳转。采用结构化的程序设计,可以大大提高开发程序的速度、提高程序的可读性、程序运行的速度和效率顺序:从上朝下执行的代码就是顺序分支(选择):根据不同的情况,执行对应代码循环:重复做一件事情

javascript = ECMAScript + BOM + DOM

  1. 核心(ECMAScript)
  2. 浏览器对象模型(BOM)
  3. 文档对象模型(DOM)

四、js代码的编写位置

  • html属性 <a href="javascript:alert(100)"></a>
  • script标签<script type="text/javascript">
    alert('你好')
    </script>
  • js文件 独立的js文件需要引入页面才能执行 <script type="text/javascript" src="js/common.js"><script> script标签属性type:类型src :js文件路径 带src属性的script标签内不能写js代码

五、JS变量的定义

  • 变量定义(使用var关键字):变量是存储数据的容器 var age; //var 是关键字,age是变量名var obj = / /; 是JavaScript中正则对象的写法
  • 赋值: age = 20;
  • 定义的同时赋值: var age=20;
  • 可以一次定义多个变量: var name="zhangsan", age=18, weight=108;
1、数组Array

一系列数据的集合,每一项可以保存任何类型的数据,称为数组的元素,每个元素之间用逗号隔开

数组格式:[1,2,3]

2、数组创建方式
//1)字面量(推荐)var arr = [1,2,3];​//2)使用构造函数创建var arr = new Array();//创建一个空数组var arr = new Array('王大锤',18 ,'普通青年','广州');//创建数组并同时写入数据
3、数组访问与写入
  • 索引(下标):从0开始var arr = ['html5','css3','javascript'];

    //访问
    arr[0]; //=> 'html5'
    arr[2]; //=> 'javascript'

    //写入
    arr[3] = 'web前端';
  • length:表示数组的长度 arr.length; //=> 3
4、数组遍历
  • for循环格式:for(变量初始化;判断条件;变量更新){执行语句}var arr = ['html5','css3','javascript'];
    for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
    }
5、数组方法
  • push: 往数组尾部添加一个或多个元素,返回数组新的长度
  • pop:删除数组最后一个元素,返回删除的元素
  • unshift:往数组开头添加一个或多个元素,返回数组新的长度
  • shift:删除数组第一个元素,返回删除的元素
  • splice(start,deleteNum,…items):在数组中插入、删除、替换的通用方法start:起始索引位置deleteNum:要删除的数量items:插入的元素(可以是多个)
  • slice(start[,end]):返回数组的片段或子数组,从start开始到end(不包括end所对应的元素)如果省略end参数,则截取到数组的最后一项 支持负数
  • sort:将数组中的元素排序,并返回排序后的数组默认以字符串的排列方式(转换成ASCII码进行对比)
  • reverse:将数组中的元素颠倒顺序,返回逆序后的数组
  • join(separator) 返回字符串值,其中包含了连接到一起的数组的所有元素separator为分隔符,默认为逗号
  • indexOf(keyword)方法返回keyword所在数组中的索引值,如果数组不存在keyword,则返回-1
  • forEach(fn) 遍历方法,for循环没有太大差别,比for循环方便
  • map(fn)返回一个数量相等的数组,内容是什么取决于在fn中返回的值以上方法都对数组中的每一项运行给定函数fn,,函数中有三个形参分别为item:数组中的每一项,index:遍历过程中对应的索引值,array:对数组的引用

 

6、对象Object
  • 字面量(推荐):var obj = {name:'小明',age:18}
  • 构造函数:var obj = new Object();
7、读取属性值

obj.name;//==>小明

如果读取一个不存在的属性,返回undefined

8、添加属性
   obj.sex = '男';   obj.marry = false;   obj['weight'] = 60
9、删除属性
   var obj = {name:'laoxie',age:18,gender:'man'}​   //删除age属性   delete obj.age;
10、遍历对象for…in
  var obj = {    name:'laoxie',    age:18    gender:'男'   }​  //遍历对象  for(var attr in obj){    //遍历过程把每次把对象属性赋值给attr    //所以获取对象属性值为:obj[attr]    document.write(obj[attr]);//分别输出:'laoxie',18,'男'   }
11、数组与对象的组合
    [{        id:'001',        name:'iphone7 plugs',        imgurl:'img/ip7.jpg',        price:5899.00,        sale:5888.00,        color:'土豪金'    },{        id:'002',        name:'Note7',        imgurl:'img/note7.jpg',        price:3899.00,        sale:998.00,        color:'黑色'    },{        id:'003',        name:'荣耀7',        imgurl:'img/honor7.jpg',        price:1999.00,        sale:1899.00,        color:'白色'    }]

 

六、输出

  • alert() 弹窗输出
  • console.log() 输出到控制台
  • innerHTML 输出到双标签元素内容
  • value 输出到表单元素

七、JS代码规范:

  • JS变量的命名规范变量名必须是数字,字母,下划线_和美元符$组成;第一个字符不能为数字不能使用关键字或保留字
  • 代码可读性标识符区分大小写,如:age和Age是不同的变量。但强烈不建议用同一个单词的大小写区分两个变量。变量命名尽量遵守驼峰原则: myStudentScore变量命名尽量见名知意保持代码缩进JS语句的末尾尽量写上分号;运算符两边都留一个空格, 如 var n = 1 + 2;注释单行注释://注释内容多行注释(和CSS注释一样)/*注释内容*/多行注释不能嵌套

八、JS数据类型

  • 基本数据类型Number:数字NaN:是一个特殊的值,即非数值(Not a Number)。数学运算无法得到数字时,就会返回NaN不代表任何值,也不等于任何值,甚至自己都不等于自己任何数据与它运算都返回NaNisNaN(a):用来判断a到底是不是非数字,返回布尔值String:字符串 用引号(单/双引号)括起来的内容Boolean: 布尔类型 Boolean 类型有两个值:true和false
  • 引用数据类型Array:数组Object:对象
  • 特殊数据类型Null Null 类型是一个只有一个值的数据类型,即特殊的值 null。它表示一个空对象引用(指针)Undefined Undefined类型只有一个值,即特殊的 undefined,在使用 var 声明变量,但没有对其赋值,这个变量的值就是 undefined
  • 数据类型判断typeoftypeof 'html5'; //=>string typeof 100; //=>number typeof true //=>boolean typeof null //=>object
  • 数据类型转换基本数据类型转换:利用内置函数进行转换(主动) var str = '10';//string Number(str);//10,number Boolean(str);//true 隐式转换(被动)如果运算不能进行下去,内部就会尝试进行数据类型的转换支持隐式转换的运算:逻辑运算、关系运算、算术运算

九、运算

1、算术运算:

+, -, *, /, %:加,减,乘,除,取余(取模)

  • toFixed(num): 在数字后面调用,num为小数位,有四舍五入的功能,得到一个字符串
  • parseInt():取整:获取到第一个不为数字的字符为止
  • parseFloat():取小数

+ 的特殊用法:字符串拼接

+号两侧只要有一个是字符串则为字符串拼接

2、赋值操作:

  • = var num1=10;//表示把10赋值给num1变量
  • +=:在原来的内容基础上追加内容 str += 'test' <==> str = str + 'test'
  • -=: var n=10; n -= 2 <==> n = n - 2
  • *=,/=,%=

3、关系运算(返回布尔值)

  • ==(等于), !=(不等于)
  • <(小于)、>(大于)、<=(小于等于)、>=(大于等于)
  • ===、恒等于/全等于,比较的时候要求值和类型都相等(不会进行类型隐式转换)
  • !==、不全等于
  • 关系运算符的比较规则: 1. 数字和数字比较, 直接比较大小 2. 数字和字符串比较, 字符串转换为数字后再比较 3. 字符串和字符串比较, 进行字符的ASCII码值比较

 

4、逻辑运算(返回布尔值)

  • &&: 逻辑与&&比||优先级高
  • ||:逻辑或
  • !: 逻辑非!true //=> false !false //=> true

5、一元运算

  • ++: 自增1(在原来的数值基础上加1)
  • –:自减1(在原来的数值基础上加1)
  • 前置:var num = 10; ++num;--num; 返回值:返回值是减1(加1)之后的值
  • 后置:var num = 10; num++;num-- 返回值:返回值是没减1(加1)之前的值

十、条件判断语句

if语句

  • if单分支:if(条件){ //条件成立(返回true)时,执行这里的代码,否则不执行 }
  • if双分支: 当if括号内的表达式结果成立,执行执行语句1,否则执行执行语句2 if(条件){ 语句1 //条件成立(返回true)时,执行这里的代码,忽略以下代码 }else{ 语句2 //条件不成立(返回false)时,执行这里的代码 }
  • if多分支: 从上往下,满足哪个条件就执行其相对应的语句,都不满足时,执行最后的else的语句,只能进入其中之一if(条件1){ //条件1成立(返回true)时,执行这里的代码,忽略以下代码 }else if(条件2){ //条件2成立(返回true)时,执行这里的代码,忽略以下代码 }else{ //以上条件都不成立(都返回false)时,执行这里的代码 }

1、三元运算

格式:条件 ? 条件成立代码 : 条件不成立代码

var a=20;var b = 50;var sum = a>b ? a-b : a+b;

2、switch语句

switch(值) {    case value1: //要求value1与值恒等        //如果表达式的值恒等于value1,代码从这里开始执行        break;    case value2:        //如果表达式的值恒等于value2,代码从这里开始执行        break;    case value3:         //如果表达式的值恒等于value3,代码从这里开始执行        break;    case value4:         //如果表达式的值恒等于value4,代码从这里开始执行        break;    default:         如果以上条件都不成立,默认执行这里的代码}
  • switch语句在比较值时使用的是全等操作符,因此不会发生类型转换
  • case: 当符合条件时,会从符合条件的那一条case语句开始,依次顺序向下执行
  • break: 跳出switch语句
  • default: 当所有的case都不满足的情况下会执行defalut下面的语句

十一、循环语句

  • 循环就是重复做一件事, 在JS中指的是循环执行某部分代码.
  • 循环结构是程序中一种很重要的结构,其特点是在给定条件成立时,反复执行某程序段,直到条件不成立为止

只要条件成立,就会不断地执行花括号里的语句 编写条件时,要避免出现死循环

1、while循环

//变量初始化while(条件){    //条件成立就会不断地执行这里的代码,直到条件不成立    //所以这里一般会伴随着条件的更新}

2、do…while

//变量初始化do {    //不管条件是否成立,先执行一次这里的代码,再进行条件判断,    如果条件依然成立,则再次执行这里的代码,依此类推    //所以这里一般会伴随着条件的更新} while(条件)

3、for循环

for(变量初始化; 条件判断; 变量更新){    //循环条件成立,则执行这里的代码}
  • 两个分号必须写

 

十二、函数

1、函数的定义

  • 关键字声明(声明式): 格式:function 函数名(){}function sum(){} 函数的声明会提前 ==> 解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问); 函数表达式(赋值式)var sum = function(){}

2、函数的执行

  1. 手动调用: sum();
  2. 事件驱动: 格式:元素.事件 = 函数名; buton.onclick = sum;事件发生都是一瞬间的

3、常见事件触发函数

  • onclick:点击事件
  • ondblclick:双击事件
  • onmouseover:鼠标移入事件
  • onmouseout:鼠标移开事件
  • onchange:内容改变事件(一般用于表单元素)
  • onkeyup:键盘按键弹起事件
  • onkeydown: 键盘按下时触发(会连续触发)

4、作用域

俗称“使用范围”,即能够使用某个变量的范围,分<全局作用域>和<局部作用域>

  • 全局变量与局部变量全局变量:在全局作用域下声明的变量,可以在任意地方中使用,作用范围比较大,我们称为全局变量局部变量:在函数内(局部作用域)声明的变量,只在函数中可以使用,作用范围较小,我们称之为局部变量
  • 变量的访问规则就近原则(如查找变量a):使用变量a时先从当前函数查找,如果当前函数有变量a则使用;如果当前函数无变量a,则往父级函数查找,如果找到则使用,并停止查找;如果在父级函数还是无法找到,则继续往上一层函数查找,以此类推,直到最顶层(全局作用域),如果还是没找到,则报not defined错误;作用域链:每个函数在定义时就形成了局部作用域,如果存在多个函数嵌套,他们之间就会建立起某种联系,直到全局作用域,这种联系称之为作用域链。当函数访问变量时,根据就近原则在这个作用域链中从内到外查询变量【声明提前:提前到当前作用域最顶部】。比如: var name = 'liang'; function show(){ console.log(name); var name = 'xiao'; } 由于js的声明提前,name会提前到函数show内的最顶部, 执行语句console.log(name)时会输入undefined。

5、函数的参数

  • 形参,就是局部变量
  • 形参与实参的区别:形参:声明函数时圆括号内定义的变量实参:函数执行时传入的参数形参和实参的数量可以不同
  • arguments 函数内部隐藏的对象(是一个类数组),保存着实参的信息length: 实参的数量
  • 引用数据类型与基本数据类型的传参(引用传递与值传递)函数作为参数传递

6、函数返回值

  1. 终止函数的执行,return后的代码不会执行
  2. return后如果有值,则把这个值返回到函数执行的地方如果函数没有return,执行完后返回undefined

7、函数中的this

函数中的this是一个关键字,表示当前对象,而当前对象是谁,取决于谁调用了这个函数。

十三、文档对象模型 DOW

节点操作 * 操作属性 * 设置css样式 * 操作内容

  • 绑定事件
  • 生成document.createElement()
  • 插入父级元素.appendChild(添加的元素) : 追加
  • 获取节点:document.getElementById();//nodegetElementsByClassName();//[node,node]getElementsByTagName();//[node,node]获取元素的捷径 * html: document.documentElement * body: document.body * a : document.links //[] * image: document.images //[]
<body><h1 class="title">节点操作</h1><div id="list"><a href="#">google</a><a href="#" id="baidu">Baidu</a><a href="#">Yahoo</a></div><a href="#">360</a><script>        var baidu = document.getElementById('baidu');        //node        console.log(baidu);        var title = document.getElementsByClassName('title');        //[node]        console.log(title);        var link = document.getElementsByTagName('a');        console.log(link);        var list = document.getElementById('list');        var list_link = list.getElementsByTagName('a');        console.log(list_link);        // 生节成点        var h2 = document.createElement('h2');        h2.id = 'subTitle';        h2.innerHTML = '人工智能';        // 获取body     // var body = document.getElementsByTagName('body')[0];     //[body]        var body = document.body;        body.appendChild(h2)</script></body>

 

十四、浏览器对象模型 BOM

  • window 可省略不建议省略window的场景事件属性事件onload 页面所有元素(包括DOM,图片等资源文件)加载完成后执行函数(方法)alert() 弹出框parseInt() 字符转为整型parseFloat() 字符转为浮点型Number() String()Boolean()浏览器可视区域的宽高:window.innerWidthwindow.innerHeight自动:设置定时器:var timer = setInterval(fn,duration)每个duration时间(ms),执行一次fn,返回一个定时器标识clearInterval(timer) :清除定时器 对象document<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02函数的执行</title> <style> #box{width:200px;height:100px;background-color: #f00;} </style> <script> window.onload = function(){ var box = document.getElementById('box');//节点(对象) //节点(对象) function show(){ console.log('laoxie'); } // 手动执行(主动) show(); // 事件驱动执行(被动) box.onclick = show; box.onmouseover = function(){ console.log('over'); } box.onmouseout = function(){ console.log('out') } // document.onkeyup = function(event) {console.log(event.keyCode,event.key) // // 事件对象:event // console.log('upupup') // } // document.onkeydown = function(event){ // // 事件对象:event // if(event.keyCode === 38){ // } // console.log('down') // } // 表单改变事件onchange username.onchange = function(){ console.log(666) } } </script> </head> <body> <div id="box"></div> <input type="text" id="username"> </body> </html>


Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === &#39;a&#39;) { b = true} else { b = false}// goodb = a === &#39;a&#39;2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Tags: JavaScript  点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  Tags: JavaScript  点击:(20)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Tags: JavaScript  点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  Tags: JavaScript  点击:(35)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  Tags: JavaScript  点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== &#39;&#39;) { let username = username1; }优化后...【详细内容】
2021-10-28  Tags: JavaScript  点击:(51)  评论:(0)  加入收藏
1、前言async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法。async和await关键字让我们可以用一种更简...【详细内容】
2021-09-17  Tags: JavaScript  点击:(61)  评论:(0)  加入收藏
为什么要使用 debugger这篇文章将介绍如何使用断点来进行 JavaScript 调试。在读这篇文章之前,需要问一个问题:为什么要使用断点来进行调试?我们首先需要认可使用断点的是必要...【详细内容】
2021-08-26  Tags: JavaScript  点击:(66)  评论:(0)  加入收藏
JavaScript 可以做很多好玩的事, 从复杂的框架到处理API,有太多的东西需要学习。但是,它也能让我们只用一行就能做一些了不起的事情。1. 获得一个随机的布尔值(true/false)该函数...【详细内容】
2021-08-19  Tags: JavaScript  点击:(77)  评论:(0)  加入收藏
JavaScript 提供了大量不同的处理数组的方法,这里花几分钟时间介绍 8 个项目中可以用到的数组方法。1. Array.map()使用.map() 方法,可以创建一个基于原始数组的修订版数组。....【详细内容】
2021-08-19  Tags: JavaScript  点击:(95)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === &#39;a&#39;) { b = true} else { b = false}// goodb = a === &#39;a&#39;2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== &#39;&#39;) { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条