js教程--从入门到精通 第一篇 js的前世今生以及js中基本数据类型和引入方式

1、Javascript前世今生
   1.1、什么是Javascript
      Javascript运行于Javascript 【解释器/引擎】中的解释性脚本语言
      Javascript运行环境:
      1、Javascript解释器 :NodeJS
      2、嵌入在浏览器中的内核(引擎)

1.2、Javascript 发展
      1、1992年 Nombas公司 开发了一款脚本语言 ScriptEase ,可以嵌入在网页中
  大概在 1992 年,一家称作 Nombas 的公司开发了一种叫做 C 减减(C-minus-minus,简称 Cmm)的嵌入式脚本语言。Cmm 背后的理念很简单:一个足够强大可以替代宏操作(macro)的脚本语言,同时保持与 C (和 C ++)足够的相似性,以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中,它首次向开发人员展示了这种语言的威力。
         Nombas 最终把 Cmm 的名字改成了 ScriptEase,原因是后面的部分(mm)听起来过于消极,同时字母 C “令人害怕”。
         现在 ScriptEase 已经成为了 Nombas 产品背后的主要驱动力。
      2、1995年 Netscape[neitskeip]公司(美国Netscape公司,以开发Internet浏览器闻名) 为 [?n?v?ge?t?(r)]Navigator2.0浏览器开发了一款脚本语言 LiveScript ,
         为了赶时髦 将其命名为 Javascript。Javascript与Java没有一点关系
      3、1996年,Microsoft[maikrisouft] ,为了IE3.0,发布了一个Javascript克隆版本 JScript
      4、1997年 Javascript1.1 作为草案提交给了 ECMA(欧洲计算机制造商协会)
         --> ECMA-262标准 -->ECMAScript

1.3  Javascript (JS)的组成:
   1、核心(ECMAScript, ES)
          2、文档对象模型(DOM,Document Object Model) 一套操作页面元素的API
             DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作
          3、浏览器对象模型(BOM,Borowser Object Model) 弹出框、控制浏览器跳转、获取分辨率等 一套操作浏览器功能的API.

1.4  Javascript特点
         1、任何编辑工具都可以编写Javascript,语法类似于Java,C,...
         2、无需编译
         3、弱类型语言
          由值来决定数据类型

强数据类型:由数据类型 决定值
    1.5 基于对象的编程语言
         万物皆对象
 
     
    1.6 Javascript的用途
         JavaScript的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
  最初的目的是为了处理表单的验证操作。

### JavaScript现在的意义(应用场景)

JavaScript 发展到现在几乎无所不能。

1. 网页特效 客户端数据计算 表单验证 非空验证 数据范围验证 浏览器事件的触发和处理 
 2. 服务端开发(Node.js) 服务器的异步数据提交(ajax)
 3. 命令行工具(Node.js)
 4. 桌面程序(Electron)
 5. App(Cordova)
 6. 控制硬件-物联网(Ruff)
 7. 游戏开发(cocos2d-js)
    JavaScript和HTML、CSS的区别

1. HTML:提供网页的结构,提供网页中的内容
 2. CSS: 用来美化网页
 3. JavaScript: 可以用来控制网页内容,给网页增加动态的效果
2、使用javaScript
   2.1 浏览器说明
 浏览器是指可以显示网页服务器或者文件系统的HTML文件内容,并让用户与这些文件交互的一种软件。
 通俗的讲:可以显示页面的一个软件,
 国内网民计算机上常见的网页浏览器有,QQ浏览器、Internet Explorer、Firefox、Safari,Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世界之窗浏览器等,浏览器是最经常使用到的客户端程序。
 常用的五大浏览器:chrome,firefox,Safari,ie,opera
 我们用chrome(谷歌浏览器)
   2.2、JavaScript初体验(JavaScript的书写位置)
        CSS:行内样式、嵌入样式、外部样式
       A:写在行内
  <input type="button" value="按钮" onclick="alert(‘Hello World‘)" />
       B:写在script标签中
  <head>
    <script>
      alert(‘Hello World!‘);
    </script>
  </head>
      C: 写在外部js文件中,在页面引入
 <script src="main.js"></script>
      注意点
         引用外部js文件的script标签中不可以写JavaScript代码
   2.3语句
      被Javascript引擎所解释执行的一句代码
      组成:
           表达式、关键字、运算符
    运算符:+,-,*,/,%,> ....
    表达式:由一个或多个运算符以及一个或多个操作数组成的。 如:1+2,
      特点:以分号表示结束
            console.log();
     document.write();
     window.alert();
      习惯:一行只写一条语句
      注意:严格区分大小写
            console.log();
     console.Log();
   2.4、注释
         单行注释://
  多行注释:/* */
     /*
          /*
  
   */
    
     */

/*
     console.log();
     /*window.alert();
     document.write()*/
     console.log();*/
3、变量
   内存 : 临时性保存据算计程序在【运行过程中】要用到的数据。
   TB->GB->MB->KB->B->bit
   8bit = 1B
   1024B=1kb
   Javascript
   硬盘 : 永久性保存数据
   0x000000000000000000a13247aaccxx
   3.1、什么是变量
      就是内存中的一段空间,用于保存程序运行过程中要用到的数据。就是存储数据的容器。
   3.2、为什么要使用变量
      使用变量可以方便的获取或者修改内存中的数据
   3.3、什么是变量名
      内存空间的一个别名,为了方便记忆。即变量的名字。
   3.4、如何使用变量 到内存中开辟一段空间用于保存数据
       语法:var 声明变量
             var age;
      变量的赋值
          将数据保存进变量
             运算符:=   赋值运算符
      语法:
      变量名=值;
 var name;
      name="张无忌";    
  
        初始化:声明变量并赋值
     var 变量名称=值;

注意:没有被赋值的变量自动取值为undefined

var name;
 var age;
 var hobby;
 一条语句中声明多个变量:
 var name,age,hobby;
 var name="张三丰",age=30;
     3.5、变量名命名规范
         1、要求
     1、不允许使用关键字以及保留关键字命名
        标准关键字:
        eg : var , function , if , for ,true,false ...
        保留关键字:
        class,int,float,double ... ...
  2、命名规范
     a、可以包含字母、数字、下划线 _、$
     b、不能以数字开头
        var name;
        var name1;
        var 1name;错误
     c、不允许重复
     d、尽量见名知意
        var name;
        var age;

var a,b,c,d,....aa,ab,ac,ad;
        var xingming,nianling;
     e、推荐采用
          匈牙利命名法
       控件缩写+功能
       txtName
       rdoGender
       chkHobby
       selCity
   下划线命名法
       _功能名称
       _name;
       _age;
   驼峰命名法
     如果变量名称由多个单词组成,第一个单词全部小写,第二个单词开始,首字符变大小
     userName
     txtusernmae --> txtUserName
    下面哪些变量名不合法

```
   a    
   1
    age18
    18age
    name
   $name
   _sex
   &sex
    theworld  theWorld
      3.6、变量使用注意问题
         1、未初始化变量的使用
     只定义未赋值,值为undefined
     未定义,使用,错误,not defined
  2、在可能的情况下,声明变量时尽量初始化
     var age=10;
     var name="张三";
     var isHappy=true;
  3、将变量的声明和赋值分开操作
     var name;
     var age;
     name="";
     age=18;
  4、对变量进行的存取操作
     1、设置变量的值(赋值,存)
         =
  var name="张三丰";//张三丰
  name="张无忌";//张无忌
  name+="殷素素";//张无忌殷素素
  name = name + "张翠山";//张无忌殷素素张翠山

name = name+""; ==> name+="";
  特殊:
     var i=10;
     i++;
     ++i; ==> i=i+1;
  注意:赋值时,=的左边一定是变量
     2、获取变量的值(取值)
         var uname="张无忌";
  console.log(uname);

var newName = uname;
  uname : 取值操作(=右边使用)
  newName : 赋值操作(=左边使用)
4、运算符 
   1、算数运算符
      +,-,*,/,%
      %:取余(模),计算两个数字相除后的余数
        5%2 结果为 1
 3%5 结果为 3

常用场合:
    1、获取数字的最后一位
       1234
       1234%10=123 ... 4
       1234%100 = 12 ... 34
     
    2、判断奇偶性 或 判断 是某数字的倍数
       58 % 2 结果是否为 0?

78 是 3的倍数吗??
       78 % 3 结果是否为 0 ?
 + :
    1、求和:数字类型的数值求和
    2、"" 与 +联用 ,作用是追加
       "张无忌" + 123 结果为:张无忌123
       123 + "张无忌" 结果为:123张无忌

12+25 结果为:37

"12"+25 结果为:1225
       ‘12‘+25 结果为:1225
 注意:由算数运算符 与 操作数 组成的表达式,称为 算数表达式
5、数据类型
   1、什么是数据类型
      保存在内存中的数据的类型,根据不同的类型内存中所开辟的空间也不一样
   2、数据类型
      1、原始类型 (基本类型)
         1、number 类型
     数字
     可以表示 32 位 (4字节)的整数,或64位(8字节)的浮点数
     浮点数:小数

var age;
     age=12; //number
     age=24.5;//number

2、string 类型
     字符串
     一系列的文本数据
     注意:赋值时,必须使用 " " 或 ‘ ‘ 扩起
     var name="张三丰";//string
     var age = "12"; //string

特殊字符,可以通过转移字符实现
     "Hello World"
     console.log(""Hello World"");错误
     \ 作为开始
       \" : 表示一个 "
       \‘ : ‘
       \n : 换行
       \t : 制表符
       \\ : \
 
       console.log("Hello World");
  3、boolean 类型
     布尔
     只表示 肯定(真)  或  否定(假)的数据
     值:true(真) 和 false(假)
     使用场合:作为程序的条件(判断、循环)
     在与 number 类型做运算时,true=1,false=0
  4、null 类型
     空
  5、undefined 类型
     未定义
     表示 不存在的数据
      2、引用类型
         Object
  Number
  Boolean
  String
  Date
  ...

原文地址:https://www.cnblogs.com/lijun6/p/10230770.html

时间: 2024-10-10 21:11:16

js教程--从入门到精通 第一篇 js的前世今生以及js中基本数据类型和引入方式的相关文章

SaltStack 入门到精通 - 第一篇: 安装SaltStack

实际环境的设定: 系统环境: centos6 或centos5 实验机器: 192.168.1.100 软件需求: salt 套件,及其需求环境 实验目的: 成功安装salt,并实现salt主从间通讯 特殊设置: 其它目的: 安装SaltStack(下面简称为salt) epel安装:salt安装需要epel源支持,所以在安装salt前需要先安装epel包 # centos5 下载下面rpm  wget -O    epel.rpm https://dl.fedoraproject.org/pu

nginx教程从入门到精通

[转]nginx教程从入门到精通 nginx教程写了一段时间,无意中发现,nginx相关文章已经达到了近100篇了.觉得很有必要汇总到一起,它是我们运维生存时间的一片心血,他是学习nginx的同学必看教程- -!,我们将会继续更新内容,不过内容难免有错误,希望大家指正. Nginx基础 1.  nginx安装 2.  nginx 编译参数详解 3.  nginx安装配置+清缓存模块安装 4.  nginx+PHP 5.5 5.  nginx配置虚拟主机 6.  nginx location配置

【OpenCV入门指南】第一篇 安装OpenCV

[OpenCV第一篇]安装OpenCV 本篇主要介绍怎样下载OpenCV安装程序,怎样在VS2008下安装配置OpenCV,文章最后还介绍了一个使用OpenCV的简单小样例. <OpenCV入门指南>系列文章地址:http://blog.csdn.net/morewindows/article/category/1291764 一.OpenCV的下载 能够到http://www.opencv.org.cn/index.php/Download,然后选一个较新版本号下载.我下的是V2.3.1版本

[转]Android OpenGL ES 开发教程 从入门到精通

本文转自:http://blog.csdn.net/mapdigit/article/details/7526556 Android OpenGL ES 简明开发教程 Android OpenGL ES 简明开发教程一:概述 Android OpenGL ES 简明开发教程二:构造OpenGL ES View Android OpenGL ES 简明开发教程三:3D绘图基本概念 Android OpenGL ES 简明开发教程四:3D 坐标变换 Android OpenGL ES 简明开发教程五

26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱佛脚.深圳最近的天气反常,许多人感冒了,我也成为其中之一,大家注意身体... 这一篇,我来简单的讲一下接下来项目中会用到的一些杂七杂八的技术. 区域及分离 在15.ASP.NET MVC入门到精通——MVC-路由中,我已经简要说明了区域的分离. 1.右键单击Web项目,“添加”——“区域”,区域名,

Egret入门学习日记 --- 第一篇

第一篇(了解篇): 我人比较笨,得慢慢学,我就一点一点来好了. 首先,我个人喜欢游戏.网页开发相对游戏开发来说,网页开发实在太枯燥了,没劲.所以打算转游戏开发了. 游戏开发要选择游戏引擎,我去看了一些博客: 1.看的第一篇(发布于:2017年06月01日 22:20:16) https://blog.csdn.net/sujun10/article/details/72824248 说实话我被他的书写方式逗笑了,哈哈,真香.大佬最终还是选择了Egret. 2.看的第二篇(发布于:2018年04月

前端开发工程师从入门到精通学习过程及资源总结(持续更新中)

职位名称:前端开发工程师 学习概要:1.先了解基础,html/css/JavaScript是基础.html/css就是做静态页面的,javascript是做动态的. 2.学习框架:jQuery(基于DOM的,必学),Vue(基于数据的,目前比较流行的框架) 一.编辑工具 用sublime text3,下一个安装就行了.如果想用的更加方便,可以百度一下常用的插件,安装几个最常用的就够了. 二.HTML/CSS 1.先看慕课网的基础教程:HTML+CSS基础课程(非常适合零基础入门) 其他教学视频:

火云开发课堂 - 《Shader从入门到精通》系列 第十节:在Shader中实现模糊滤镜

<Shader从入门到精通>系列在线课程 第十节:在Shader中实现模糊滤镜 视频地址: http://edu.csdn.net/course/detail/1441/22674?auto_start=1 交流论坛:http://www.firestonegames.com/bbs/forum.php 工程下载地址:请成为正式学员获取工程 课程截图: 版权声明:本文为博主原创文章,未经博主允许不得转载.

火云开发课堂 - 《Shader从入门到精通》系列 第二十一节:在Shader中对3D模型进行区域遮罩

<Shader从入门到精通>系列在线课程 优惠链接:http://edu.csdn.net/combo/detail/90 第二十一节:在Shader中对3D模型进行区域遮罩 视频地址: http://edu.csdn.net/course/detail/1441/22685?auto_start=1 交流论坛:http://www.firestonegames.com/bbs/forum.php 工程下载地址:请成为正式学员获取工程 课程截图: 版权声明:本文为博主原创文章,未经博主允许不得