01-JavaScript基础

核心知识点

javaScript书写位置
javaScript变量
javaScript数据类型
javaScript数据类型转换
javaScript运算符

今日学习目标

能够定义一个变量并完成变量的赋值
能够说出每一种具体的数据类型
能够数据类型之间的相互转化
能够掌握各种运算符的作用

序言

JavaScript发展历史(js)

1. 1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器--只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办        法，一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。2. 1995年Sun公司将Oak语言改名为Java，正式向市场推出。Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运     行"(Write Once, Run Anywhere)，它看上去很可能成为未来的主宰。3. 网景公司动了心，决定与Sun公司结成联盟4. 34岁的系统程序员Brendan Eich登场了。1995年4月，网景公司录用了他,他只用10天时间就把Javascript设计出来了。  （多肽语言）5. (1)借鉴C语言的基本语法; (2)借鉴Java语言的数据类型和内存管理; (3)借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位; (4)借鉴Self语言，使用基于原型(prototype)的继承机制。

JavaScript是什么？

JavaScript： 基于对象和事件驱动，运行在浏览器客户端的脚本语言。[js]✔ js的运行环境： 运行在浏览器端的一种语言✔ 最后将所有的js代码都要以对象的形式去执行，都要通过事件的方式去触发执行【DOM】对象： 现实世界中的对象：  将任何一个具体的事物都是一个对象【万事万物皆对象】编程中的对象： 对现实中对象的抽象描述面向对象特征：  封装   继承   多态编程思想：✔面向对象：【推荐】代码执行都要以一个具体的对象为整体去执行✔面向过程：代码执行的时候，一行一行执行的。

JavaScript能干什么？

  ☞ 常见的网页效果【表单验证，轮播图。。。】☞ 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】☞ 实现应用级别的程序【 http://naotu.baidu.com】☞ 实现统计效果【http://echarts.baidu.com/examples/】☞ 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】☞ 在线学编程【https://codecombat.163.com/play/】☞ js可以实现人工智能  【面部识别】☞ 可以实现服务端功能  nodejs

JavaScript组成

  ☞ ECMASCRIPT    定义了javascript的语法规范,描述了语言的基本语法和数据类型☞ BOM （Browser Object Model） 即浏览器对象模型。浏览器对象模型,一套操作浏览器功能的API,通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等☞ DOM (Document Object Model) 文档对象模型,一套操作页面元素的API,DOM可以把HTML看做是文档树，通过       DOM提供的API可以对树上的节点进行操作 【js+HTMl+css】

JavaScript书写位置

内嵌式写法

 ☞  在html页面内部设置<script type="text/javascript">js</script>注意：该标签可以放到head标签中或者body标签中

外联式写法[推荐写法]

 ☞ 1. 新建js文件2. 通过script标签引用到当前页面中<script type="text/javascript" src="test.js"></script>注意：1. 不能将代码写到外联式标签中。2. 一个网页中可以同时调用多个外部js文件<script type="text/javascript" src="test.js"></script><script type="text/javascript" src="test.js"></script><script type="text/javascript" src="test.js"></script><script type="text/javascript" src="test.js"></script>

行内式写法（不推荐）

☞  将js代码写到标签内部
<div onclick="js代码"></div>注意：onclick 是一个点击事件： 当点击div的时候，会触发该事件，执行该事件中的代码

JavaScript中输入消息方式


alert();document.write('<h1>我是一段文字</h1>');   在网页中输出信息prompt("请输入姓名","测试");   //接收用户输入的confirm("确定不听课么");console.log("adsadsfafds");    //在控制台中输出消息总结：1. 在js中如果希望输出一个具体的文本信息，必须带引号2. 在使用document.write();的时候，可以在方法内输出html标签，加引号。

变量（重点）

变量概念

 ☞ 变量：  变量指的是在程序中保存数据的一个容器

定义变量及赋值

 ☞ 定义变量var  变量名;☞ 赋值变量名 = 值;☞ 总结：1. 一个变量一次只能保存一个值2. 最后一次的赋值结果3. 变量是区分大小写（js区分大小写）

变量命名规范

☞ 规则    必须遵守的，不遵守的话 JS引擎 发现并报错 1. 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：var usrAge, num01, _name2. 区分大小写 强调：JS 严格区分大小写 ，var app; 和 var App; 是两个变量3. 不能 以数字开头，或者汉字定义变量名4. 不能 是关键字、保留字 和 代码符号，例如：var、for、while、&, class5. 不能出现空格☞ 规范  建议遵守的，不遵守的话 JS引擎 也不会报错1. 变量名必须有意义2. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

课堂测试

1.下面四个变量声明语句中，哪一个变量的命名是正确的？A．var for               B．var txt_name               C．var myname myval      D．var 2s2.下面哪一个语句定义了一个名为 Myval 的变量并将它的值赋为2205？A．var myval=2205         B．var MyVal = 2205C．var Myval=2205         D．Myval=2205 【不规范】3. 气温表示方式有两种：摄氏度和华氏度华氏度=9/5*摄氏度+32请使用代码完成：让用户输入任意的摄氏度，得到对应的华氏度。4. 交换两个变量的值var a = 1;var b = 2;最后通过程序的方式将变量a的值改为 2，变量b的值改为15. 定义两个变量，求和

数据类型（重点）

数据类型

 ☞ 数据类型：  数据类型指的是变量的数据类型

简单数据类型

数字类型(number)

☞ 凡是数字都属于该类型【整数，小数，负数】☞ 只要变量的值是一个具体的数字，那么当前变量的数据类型就是数值类型☞ number类型表示的数字大小：
最大值是±1.7976931348623157乘以10的308次方    Number.MAX_VALUE
最小值是±5 乘以10的-324次方                   Number.MIN_VALUE

字符串类型(string)

☞ 字符串可以是引号中的任意文本。可以使用单引号或双引号☞ 在js中一般写字符串类型的变量时候，推荐使用单引号。☞ 注意：1. 单引号和双引号之间的嵌套例如： 输出    我是"高帅富"程序猿;  2. 转义字符\n 换行\\  斜杠\'  单引号\"  双引号\r  回车符例如：var strMsg = 'I'm the GOD of my world ~!';   //输出：I'm the GOD of my world ~!var strMsg2 = "I"m the GOD of my world ~!";  //输出：I"m the GOD of my world ~!var strMsg3 = '反斜杠是这个 \\，神奇！';  //输出：反斜杠是这个 \，神奇！

布尔类型(boolean)

☞ true  和 false

undefined类型（了解）

       //如果一个变量没有赋值，该变量的默认是undefinedvar n1;//如果一个变量的值是undefined，那么该变量的数据类型就是undefined类型

复杂数据类型（目前不讲）

object类型

课堂测试

请说出如下变量分别对应的数据类型是什么？var  a1=123;    var a2="123";    var a3=true;  var a4="false";   var a5="1.63";var  a6;        var a8="null"

数据类型判断

 ☞ 使用  typeof 变量  可以得到对应变量的数据类型☞ 例如：var n1 = 123;//获取n1的数据类型console.log(typeof n1);var n2 = '123';console.log(typeof n2);var n3 = true;console.log(typeof n3);

判断一个变量是不是数字

isNaN(x) 方法例如：var usrAge = 21;var isOk = isNaN(usrAge);console.log(isNum); // false ，21 不是一个 非数值var usrName = "James";console.log(isNaN(usrName));//true ，"James"是一个 非数值

数据类型转换

转数值类型

 ☞Number(变量)：总结：1. 可以通过该方法将数据类型转换为数值类型var n1 = '123';console.log(typeof n1);//方法一：通过Number()n1 = Number(n1);console.log(typeof n1);2. 在转换的过程中可以将原来的值保留，遇到小数直接保留下来，不会舍去3. 如果变量无法转换为数值类型，那么返回的结果是NaN； 对应的数据类型依然是数值类4. 如果将布尔类型转换为数值类型，true 转化后的结果是 1  false 转化后的结果是0☞parseInt(变量)var num1 = parseInt("12.3abc");   // 返回12，如果第一个字符是数字会解析知道遇到非数字结束var num2 = parseInt("abc123");   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN备注：1  只会保留整数部分，通过该方式进行数据类型转换后得到就是一个整数2. 如果一个变量中的值无法转换为具体数字，那么返回的结果是一个 NaN 的值3. NaN (not  a  number)   ----NaN对应的数据类型是数值类型4. 通过该方法可以将其他数据类型转为数值类型☞parseFloat(变量)总结：1. 通过该方法可以将其他数据类型转换为数值类型2. 在转换过程中，如果遇到小数，那么会直接将小数部分保留3. 如果转化不成功过，返回的结果NaNparseFloat()把字符串转换成浮点数

转字符串类型

 ☞  变量.toString()var num = 5;console.log(num.toString());☞  String(变量)备注：String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null

转布尔类型

 ☞ Boolean() 备注：0  |''(空字符串) | null | undefined | NaN  会转换成false  其它都会转换成 true

算数运算符

 + 运算总结：1. 如果是数值类型的变量相加，结果就是一个数值类型的结果2. 如果是一个字符串类型的变量相加，最后的结果就是字符串（加号起到的作用就是拼接字符串的功能）-运算总结：1. 如果是数值类型的变量相减，结果就是一个数值类型的结果2. 如果是数字的字符串相减，得到的结果也是一个数值类型结果（发生了隐式类型转化）var n1 = '123';var n2 = '123';3. 如果是非数字的字符串相减，得到的结果是NaN*运算/运算1.如果是数值类型的变量相除，结果就是一个数值类型的结果2. 如果是数字的字符串相除，得到的结果也是一个数值类型结果（发生了隐式类型转化）3. 如果是非数字的字符串相除，得到的结果是NaN4. 如果除数是0 ，得到的结果是 Infinity （无穷大的值）%取余（获取余数）

赋值运算符

 += |  -=   |  *=  |  /=  |   %= var  a += b ;    =====> 等价于        a = a+b;

一元运算符

前置++ 和后置 ++
前置-- 和后置–

比较运算符

1.   >  2.   <3.   >=     大于 或者 等于，只要有一个满足即可4.   <=     小于 或者 等于，只要满足一个即可5.  ==      只用来比较变量中的值是否相等，不考虑数据类型6.  ===     用来判断值和数据类型必须同时相等7.  !=       判断值是否不相等，不考虑数据类型8.  !==      判断值和数据类型☞ 总结：✔ 通过比较运算符得到的结果只有两个结果，一个是正确的，一个是错误的✔ 通过比较运算符得到的结果 只有 true[正确] 和 false[错误]

逻辑运算符

 1.   ||  或： 条件只要有一个满足即可总结：1. 如果条件中有一个结为true(代表有一个条件满足了)，那么通过或运算后最后的结果为true2. 如果条件中结果都不满足，那么通过或运算后结果为false2.   &&  且： 要求所有的条件都必须满足才可以总结：1. 如果条件都为真（true），那么通过且运算后最后的结果也是真（true）2. 如果条件中自少有一个条件不满足（false），那么通过且运算后的结果为false3.   !     非（取反） :

运算符优先级（了解）

优先级从高到底1. ()  优先级最高2. 一元运算符  ++   --   !3. 算数运算符  先*  /  %   后 +   -4. 关系运算符  >   >=   <   <=5. 相等运算符   ==   !=    ===    !==6. 逻辑运算符 先 &&   后 ||7. 赋值运算符

javaScript第一天（1）相关推荐

自学JavaScript第一天- JS 基础
自学JavaScript第一天- JS 基础 JS 写在哪里注释行内 js 内部 js 外部 js JS 基础语法语句大小写代码块折行变量声明 var .let.const 及作用域 ...
你不知道的JavaScript·第一部分
第一章: 作用域是什么 1. 编译原理 JavaScript 被列为 '动态' 或 '解释执行' 语言,于其他传统语言(如 java)不同的是,JavaScript是边编译边执行的. 一段源码在执行前 ...
前端之JavaScript第一天学习(1)-JavaScript 简介
javaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript 是脚本语言 JavaSc ...
javascript第一天
javascript:脚本语言,由浏览器去解析并且执行的 1.弱类型 :弱类型在定义变量的时候是不需要声明数据类型的,数据类型是由变量值来决定的 (JavaScript) 强类型 :强类型在定义变量的 ...
JavaScript第一天学习
行内式js写法 <a href="javascript:alert('hello world')">点击 // 代码写在了script标签里面会立即执行 // 写在行内 ...
原生JavaScript第一篇
js的历史在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司. 由于网景公司希望能在静态HTML页面上添加一些动态效果,于是叫Bren ...
跟班学习JavaScript第一天——运算符、数据类型、ECMAScript
1.js概述 js属于脚本语言,属于弱类型的编译性语言 JAVAScript=ECMAScript(es)+bom(browser object model)+dom(document object ...
学习JavaScript第一弹(上)——ECMAScript(JavaScript基础)
1.编程语言.ECMA.JavaScript.浏览器的发展史 1.1 编程语言编程编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计 ...
光明顶开课了 JAVAscript 第一课（预解释）
作者混元霹雳手-Ziksang 本文章将是一套系列课程,偏进阶,面向有JAVAscript基础的读者,文章以精简.通俗意通为主要讲解方式,全方位的带你进入JAVAscript集中知识点学习,让零散的 ...

javaScript第一天（1）

01-JavaScript基础

核心知识点

今日学习目标

序言

JavaScript发展历史(js)

JavaScript是什么？

JavaScript能干什么？

JavaScript组成

JavaScript书写位置

内嵌式写法

外联式写法[推荐写法]

行内式写法（不推荐）

JavaScript中输入消息方式

变量（重点）

变量概念

定义变量及赋值

变量命名规范

课堂测试

数据类型（重点）

数据类型

简单数据类型

复杂数据类型（目前不讲）

课堂测试

数据类型判断

判断一个变量是不是数字

数据类型转换

算数运算符

赋值运算符

一元运算符

比较运算符

逻辑运算符

运算符优先级（了解）

javaScript第一天（1）相关推荐

最新文章

热门文章