javaScript第一天(1)

标签: Javascript  javascript

01-JavaScript基础

核心知识点

  1. javaScript书写位置
  2. javaScript变量
  3. javaScript数据类型
  4. javaScript数据类型转换
  5. javaScript运算符

今日学习目标

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

序言

JavaScript发展历史(js)

1. 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版,这是世界上第一款比较成熟的网络浏览器,
	轰动一时。但是这是一款名副其实的浏览器--只能浏览页面,浏览器无法与用户互动,当时解决这个问题有两个办		法,一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。

2. 1995年Sun公司将Oak语言改名为Java,正式向市场推出。Sun公司大肆宣传,许诺这种语言可以"一次编写,到处运	 行"(Write Once, Run Anywhere),它看上去很可能成为未来的主宰。

3. 网景公司动了心,决定与Sun公司结成联盟

4. 34岁的系统程序员Brendan Eich登场了。19954月,网景公司录用了他,他只用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, _name
    2. 区分大小写 强调:JS 严格区分大小写 ,var app;var App; 是两个变量
    3. 不能 以数字开头,或者汉字定义变量名
    4. 不能 是关键字、保留字 和 代码符号,例如:varforwhile&, class
    5. 不能出现空格
        
☞ 规范  建议遵守的,不遵守的话 JS引擎 也不会报错
	1. 变量名必须有意义
    2. 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U9KGbaVe-1582980220655)(assets/1532417089018.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-48rLPyV3-1582980220656)(assets/1532417108565.png)]

课堂测试

1.下面四个变量声明语句中,哪一个变量的命名是正确的?
    Avar for               Bvar txt_name               
    Cvar myname myval      Dvar 2s
    
2.下面哪一个语句定义了一个名为 Myval 的变量并将它的值赋为2205Avar myval=2205         Bvar MyVal = 2205
    Cvar Myval=2205         D.Myval=2205 【不规范】
    
3. 气温表示方式有两种:摄氏度和华氏度
	   华氏度=9/5*摄氏度+32
   请使用代码完成:让用户输入任意的摄氏度,得到对应的华氏度。

4. 交换两个变量的值
     var a = 1;
	 var b = 2;

    最后通过程序的方式将变量a的值改为 2,变量b的值改为1

5. 定义两个变量,求和

数据类型(重点)

数据类型

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

简单数据类型

  • 数字类型(number)
☞ 凡是数字都属于该类型【整数,小数,负数】

☞ 只要变量的值是一个具体的数字,那么当前变量的数据类型就是数值类型

☞ number类型表示的数字大小:
最大值是±1.7976931348623157乘以10308次方    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)
truefalse 
  • undefined类型(了解)
		//如果一个变量没有赋值,该变量的默认是undefined
		var 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. 如果转化不成功过,返回的结果NaN
         
	parseFloat()把字符串转换成浮点数
  • 转字符串类型
 ☞  变量.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. 如果是非数字的字符串相除,得到的结果是NaN
       4. 如果除数是0 ,得到的结果是 Infinity (无穷大的值)
	 
 %取余(获取余数)  

赋值运算符

 += |  -=   |  *=  |  /=  |   %= 

var  a += b ;    =====> 等价于        a = a+b;

一元运算符

  • 前置++ 和 后置 ++

  • 前置-- 和 后置–

比较运算符

1.   >  
    
2.   <
    
3.   >=     大于 或者 等于,只要有一个满足即可
    
4.   <=     小于 或者 等于,只要满足一个即可

5.  ==      只用来比较变量中的值是否相等,不考虑数据类型
    
6.  ===     用来判断值和数据类型必须同时相等
    
7.  !=	    判断值是否不相等,不考虑数据类型
 
8.  !==      判断值和数据类型
    
    
☞ 总结:
	  ✔ 通过比较运算符得到的结果只有两个结果,一个是正确的,一个是错误的
      ✔ 通过比较运算符得到的结果 只有 true[正确]false[错误]

逻辑运算符

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

运算符优先级(了解)

优先级从高到底
	1. ()  优先级最高
	2. 一元运算符  ++   --   !
	3. 算数运算符  先*  /  %+   -
	4. 关系运算符  >   >=   <   <=
	5. 相等运算符   ==   !=    ===    !==
	6. 逻辑运算符 先 &&||
	7. 赋值运算符
版权声明:本文为weixin_44694682原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44694682/article/details/104581437

智能推荐

Qcon演讲纪实:详解如何在实时视频通话中实现AR功能

2018年4月20日-22日,由 infoQ 主办的 Qcon 2018全球软件开发大会在北京如期举行。声网首席 iOS 研发工程师,iOS 端移动应用产品设计和技术架构负责人龚宇华,受邀分享了《基于 ARkit 和 ARcore,在实时视频通话中实现 AR 功能》,在演讲中剖析了 AR 与 VR 差异,ARKit 的工作原理,以及逐步讲解如何基于 ARKit 与声网Agora SDK 创建 AR...

POJ2348 UVa10368 HDU1525 Euclid's Game【博弈】

Euclid's GameTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 4106    Accepted Submission(s): 1947 Probl...

使用Breeze.js编写更好的查询

这篇文章是由同行评审Agbonghama柯林斯 。 感谢所有SitePoint的审稿作出SitePoint内容也可以是最好的! 数据量正在迅速发展,他们正在变得越来越复杂,维护。 许多开发人员希望避免由数据问题他们的工作过程中造成的问题和头痛。 一个使我们的工作更轻松的图书馆是Breeze.js 。 在这篇文章中,我们将讨论我们如何能够写出更好的查询与Breeze.js。 但是首先,我们应该知道什...

Netty框架构建Nio编程

~~~ 随手点赞,养成习惯 ~~~ 为什么选择Netty框架 Netty是业界最流行的NIO框架之一,它的健壮性、功能、性能、可定制性和可扩展性在同类框架中都是首屈一指的。 优点: ① API使用简单,开发门槛低 ②功能强大,预置了多种编解码功能,支持多种主流协议 ③ 定制能力强,可以通过ChannelHandler对通信框架进行灵活地扩展; ④性能高,通过与其他业界主流的NIO框架对比,Nett...

【JZOJ5262】【GDOI2018模拟8.12】树(DP,性质题)

Description Solution 首先我们可以知道两个性质:1、路径u-v和路径v-w可以合并为路径u-w;2、路径u1-v1加路径u2-v2和路径u1-v2加路径u2-v1是等价的(就是起始点和终点可以互换) 那么知道这些性质之后就很好做了。我们只用知道每个点多少次做起点和多少次做终点。 我们设f[i]表示满足i子树的需求i上的值要是多少。 那么枚举i的所有儿子,判断a[i]-f[i],...

猜你喜欢

【String-easy】541. Reverse String II 反转的元素,有反转个数和间隔

1. 题目原址 https://leetcode.com/problems/reverse-string-ii/ 2. 题目描述 3. 题目大意 给定一个字符串,和字符串的间隔k, 这个k表示每k个数反转一次,然后再间隔k个元素再反转k个元素。 4. 解题思路 只要按照间隔去反转就可以了。然后间隔k个元素不反转是通过让i每次递增 2*k完成的。 5. AC代码 6. 相似题型 【1】344. Re...

【C语言笔记结构体】

我们都知道C语言中变量的类型决定了变量存储占用的空间。当我们要使用一个变量保存年龄时可以将其声明为int类型,当我们要使用一个变量保存某一科目的考试成绩时可以将其声明为float。 那么,当我们要做一个学生信息管理系统时,需要保存学生的姓名、学号、年龄等信息,该怎么做呢? 如当要保存三个学生的信息时, 方法一是: 方法二是: 显然,方法二跟更清晰,因为它把name、num、age都集成在一个模板,...

39. Combination Sum 回溯算法简析

LeetCode传送门     这道题要求给你一组正数 C,然后给你一个目标数 T,让你从那组C中找到加在一起等于 T 的那些组合。     例如:给你 [2,3,6,7] 和 7,则返回 [[2,2,3],[7] ] 。      想解决这个问题前,我们首先引入一个新问题,图(树)的遍历问题。  ...

git安装|Linux系统安装 git|Linux如何安装git?Linux通过远程安装git|

Git是一个开源的分布式版本控制系统,可以有效、高速地处理项目版本管理。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 开发者需要一个GIT账号,通过这个查看项目的提交记录,可以更加清楚项目的开发情况,便于版本控制。 以下介绍在CentOS8操作系统搭建GIT服务器。   一、安装GIT服务器流程   安装GIT...