新闻资讯  快讯  焦点  财经  政策  社会
互 联 网   电商  金融  数据  计算  技巧
生活百科  科技  职场  健康  法律  汽车
手机百科  知识  软件  修理  测评  微信
软件技术  应用  系统  图像  视频  经验
硬件技术  知识  技术  测评  选购  维修
网络技术  硬件  软件  设置  安全  技术
程序开发  语言  移动  数据  开源  百科
安全防护  资讯  黑客  木马  病毒  移动
站长技术  搜索  SEO  推广  媒体  移动
财经百科  股票  知识  理财  财务  金融
教育考试  育儿  小学  高考  考研  留学
您当前的位置:首页 > IT百科 > 程序开发 > 语言 > 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   点击:()  评论:()
声明:本站部分内容来自互联网,内容观点仅代表作者本人,如有任何版权侵犯请与我们联系,我们将立即删除。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
一、JavaScript的诞生JavaScript 诞生于 1995 年。由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言 名字起源: Mocha->LiveScript->Jav...【详细内容】
2020-01-16   JavaScript  点击:(0)  评论:(0)  加入收藏
实际应用中,目标字符串的生成可能需要多个数据的拼接。  由于应用频繁,几乎是所有编程语言都必须掌握的操作,当然每种语言具有各自特点。  本文将通过代码实例详细介绍...【详细内容】
2019-12-25   JavaScript  点击:(16)  评论:(0)  加入收藏
2003 年,保罗&middot;格雷厄姆(Paul Graham) 曾撰文提到,他的公司决定使用 Lisp。在该文章中他将 Lisp 描绘成计算机语言界的法语,它独特、深邃,能够表达难以描述的事物。如果 Li...【详细内容】
2019-12-23   JavaScript  点击:(17)  评论:(0)  加入收藏
JavaScript 的节流和防抖已经是老生畅谈的问题了,对于前端行业技术大牛来讲不过是小菜一碟,而对于绝大多数前端小白或初级工程师,绝对是必备的知识,值得学习。接下来小郭就带大...【详细内容】
2019-12-23   JavaScript  点击:(14)  评论:(0)  加入收藏
算法是一种艺术,给人感觉很不好接近,但是一旦你和ta熟络了,你就能发现这门艺术的内在是多么美妙且多变。对于前端来说,算法也许不是最重要的,在日常工作中,几乎很少用到。所以很多...【详细内容】
2019-12-23   JavaScript  点击:(10)  评论:(0)  加入收藏
在前端的 JavaScript 开发中,发现开发者对于错误异常的处理普遍都比较简单粗暴,如果应用程序中缺少有效的错误处理和容错机制,代码的健壮性就无从谈起。本文整理出了一些常...【详细内容】
2019-12-19   JavaScript  点击:(17)  评论:(0)  加入收藏
或多或少我们都应该知道JavaScript,主要还是分为三部分:ECMAScript(核心),DOM(文档对象模型),BOM(浏览器对象模型)。 ECMAScript(核心):ECMAScript是一个语言标准,javascript则是基于...【详细内容】
2019-12-12   JavaScript  点击:(20)  评论:(0)  加入收藏
DOM 或文档对象模型是 web 页面上所有对象的根。它表示文档的结构,并将页面连接到编程语言。它的结构是一个逻辑树。每个分支结束于一个节点,每个节点包含子节点、对象。DOM API非常庞大,在本文中,咱们只讨论比较常用有有...【详细内容】
2019-12-11   JavaScript  点击:(14)  评论:(0)  加入收藏
1. document.formName.item("itemName") 问题 说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用do...【详细内容】
2019-12-10   JavaScript  点击:(19)  评论:(0)  加入收藏
更好地了解数据结构如何工作这听起来是否熟悉:"我通过完成网上课程开始了前端开发"您可能正在寻求提高计算机科学的基础知识,尤其是在数据结构和算法方面。 今天,我们将介绍一...【详细内容】
2019-12-09   JavaScript  点击:(16)  评论:(0)  加入收藏
前言看了数千个项目后,发现了 10 个最常见的 JavaScript 错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生。如果你能够避免落入这些 “陷阱”,你将会成为...【详细内容】
2019-06-21   JavaScript  点击:(21)  评论:(0)  加入收藏
1,前言下面是2008年Github创建以来,各种编程语言的排名情况 排名其中JavaScript自2013年之后就盘踞第一名,成为github上被使用最多的语言,早期,JS的使用还主要集中于浏览器中,但是...【详细内容】
2019-12-03   JavaScript  点击:(14)  评论:(0)  加入收藏
多年来,业界已经发布了大量 JavaScript 框架,怎样进行选择可能是一个挑战。如果你感到困惑,不知道应该选哪个或者究竟哪个适合你,那么我已经帮你解决了问题。在本文中,我将列出用...【详细内容】
2019-12-02   JavaScript  点击:(19)  评论:(0)  加入收藏
JavasScript 特性本章简要回顾我们到现在为止学到的 JavaScript 特性,并特别注意了一些细节。代码结构语句用分号分隔:alert(&#39;Hello&#39;); alert(&#39;World&#39;);通...【详细内容】
2019-11-29   JavaScript  点击:(26)  评论:(0)  加入收藏
笔试面试经常涉及各种算法,本文简要介绍常用的一些算法,并用JavaScript实现。1、插入排序1)算法简介插入排序(Insertion-Sort)的算法描述是一种简单直观的排序算法。它的工作原...【详细内容】
2019-11-22   JavaScript  点击:(14)  评论:(0)  加入收藏
前端日常开发中,我们使用喜爱的 IDE 调试 JavaScript 代码,比如我喜欢的代码编辑器有两个,Sublime Text 3 和 VS Code,前几年还使用过 Atom,偶尔我们会遇到临时需要快速分享给同...【详细内容】
2019-11-14   JavaScript  点击:(16)  评论:(0)  加入收藏
目录: 第一部分:数组 第二部分:函数 第三部分:字符串 第四部分:对象 第五部分:数字 第六部分:浏览器操作及其它1. 第一部分:数组1. `all`:布尔全等判断const all = (arr, fn = Boole...【详细内容】
2019-11-12   JavaScript  点击:(18)  评论:(0)  加入收藏
Promise 是 CommonJS 中的规范,它能够帮助我们控制代码流程,避免函数的多层嵌套。现在 Web 前端异步编程越来越普遍,它的出现让异步编程变得更佳的容易理解。由于它越来越受到...【详细内容】
2019-11-11   JavaScript  点击:(17)  评论:(0)  加入收藏
1. 内容概要本文主要讨论以下两个问题: JavaScript 的位运算:先简单回顾下位运算,平时用的少,相信不少人和我一样忘的差不多了 权限设计:根据位运算的特点,设计一个权限系统(添加、...【详细内容】
2019-11-07   JavaScript  点击:(15)  评论:(0)  加入收藏
先看一道面试题 让 a==1&&a==2&&a==3,这个问题主要查看对js隐式转换的理解,首先a不可能是一个原始类型,那么a只有可能是个对象类型了,查阅犀牛书52页《3.8.3对象转换为原始值...【详细内容】
2019-11-06   JavaScript  点击:(11)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条