js教程--从入门到精通 第一篇 js的前世今生以及js中基本数据类型和引入方式
1.1、什么是Javascript
Javascript运行于Javascript 【解释器/引擎】中的解释性脚本语言
Javascript运行环境:
1、Javascript解释器 :NodeJS
2、嵌入在浏览器中的内核(引擎)
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、核心(ECMAScript, ES)
2、文档对象模型(DOM,Document Object Model) 一套操作页面元素的API
DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作
3、浏览器对象模型(BOM,Borowser Object Model) 弹出框、控制浏览器跳转、获取分辨率等 一套操作浏览器功能的API.
1、任何编辑工具都可以编写Javascript,语法类似于Java,C,...
2、无需编译
3、弱类型语言
由值来决定数据类型
1.5 基于对象的编程语言
万物皆对象
1.6 Javascript的用途
JavaScript的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
最初的目的是为了处理表单的验证操作。
2. 服务端开发(Node.js) 服务器的异步数据提交(ajax)
3. 命令行工具(Node.js)
4. 桌面程序(Electron)
5. App(Cordova)
6. 控制硬件-物联网(Ruff)
7. 游戏开发(cocos2d-js)
JavaScript和HTML、CSS的区别
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 变量名称=值;
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 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 + "张翠山";//张无忌殷素素张翠山
特殊:
var i=10;
i++;
++i; ==> i=i+1;
注意:赋值时,=的左边一定是变量
2、获取变量的值(取值)
var uname="张无忌";
console.log(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 结果是否为 0 ?
+ :
1、求和:数字类型的数值求和
2、"" 与 +联用 ,作用是追加
"张无忌" + 123 结果为:张无忌123
123 + "张无忌" 结果为:123张无忌
'12'+25 结果为:1225
注意:由算数运算符 与 操作数 组成的表达式,称为 算数表达式
5、数据类型
1、什么是数据类型
保存在内存中的数据的类型,根据不同的类型内存中所开辟的空间也不一样
2、数据类型
1、原始类型 (基本类型)
1、number 类型
数字
可以表示 32 位 (4字节)的整数,或64位(8字节)的浮点数
浮点数:小数
age=12; //number
age=24.5;//number
字符串
一系列的文本数据
注意:赋值时,必须使用 " " 或 ' ' 扩起
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
...
js教程--从入门到精通 第一篇 js的前世今生以及js中基本数据类型和引入方式的更多相关文章
- SaltStack入门到精通第一篇:安装SaltStack
SaltStack入门到精通第一篇:安装SaltStack 作者:纳米龙 发布日期:2014-06-09 17:50:36 实际环境的设定: 系统环境: centos6 或centos5 实验机 ...
- Android Studio2.0 教程从入门到精通Windows版 - 入门篇
http://www.open-open.com/lib/view/open1468121363300.html 本文转自:深度开源(open-open.com)原文标题:Android Studio ...
- Android Studio教程从入门到精通
最新2.0系列文章参考: Android Studio2.0 教程从入门到精通Windows版 - 安装篇Android Studio2.0 教程从入门到精通Windows版 - 入门篇Android ...
- nginx教程从入门到精通
[转]nginx教程从入门到精通 nginx教程写了一段时间,无意中发现,nginx相关文章已经达到了近100篇了.觉得很有必要汇总到一起,它是我们运维生存时间的一片心血,他是学习nginx的同学必看 ...
- Android Studio2.0 教程从入门到精通Windows版
系列教程 Android Studio2.0 教程从入门到精通Windows版 - 安装篇Android Studio2.0 教程从入门到精通Windows版 - 入门篇Android Studio2 ...
- Promise入门到精通(初级篇)-附代码详细讲解
Promise入门到精通(初级篇)-附代码详细讲解 Promise,中文翻译为承诺,约定,契约,从字面意思来看,这应该是类似某种协议,规定了什么事件发生的条件和触发方法. Pr ...
- 【OpenCV入门指南】第一篇 安装OpenCV
http://blog.csdn.net/morewindows/article/details/8225783/ win10下vs2015配置Opencv3.1.0过程详解(转) http://ww ...
- Java入门到精通——基础篇之多线程实现简单的PV操作的进程同步
Java入门到精通——基础篇之多线程实现简单的PV操作的进程同步 一.概述 PV操作是对信号量进行的操作. 进程同步是指在并发进程之间存在一种制约关系,一个进程的执行依赖另一个进程的消 ...
- SaltStack 入门到精通第二篇:Salt-master配置文件详解
SaltStack 入门到精通第二篇:Salt-master配置文件详解 转自(coocla):http://blog.coocla.org/301.html 原本想要重新翻译salt-mas ...
随机推荐
- Shell脚本备份Mongodb数据库
目录 环境还原 环境创建 编写shell脚本 准备文件 创建shell脚本 执行shell脚本 进阶版 感谢 诚邀访问我的个人博客:我在马路边 更好的阅读体验点击查看原文:Shell脚本备份Mongo ...
- Cash Machine(多重背包二进制转换)
个人心得:多重背包,自己根据转换方程写总是TLE,后面去网上看了二进制转换,不太理解: 后面仔细想了下,用自己的思想理解下把,就是将对应number,cash总和用二进制拆分, 然后全部装入到一个数组 ...
- nodepad++的python环境变量设置
转:http://blog.csdn.net/memray/article/details/42041975
- Thinkphp 自定义404页面
一. 手册->调试->异常处理 在公共config.php 中加入: 'TMPL_EXCEPTION_FILE' => '/Public/404.html', //访问不存在的跳转 ...
- Android Studio导入项目,报错 Error:Unsupported method: BaseConfig.getApplicationIdSuffix().
从GitHub上clone下来的第三方库,由于时间间隔很长,gradle的版本和本机的版本不一致,导入到Android Studio中会报错,错误信息如下: Error:Unsupported met ...
- [转]理解$watch ,$apply 和 $digest --- 理解数据绑定过程
原文地址:http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 注 这篇博文主要是写给新手的,是给那些刚刚开始 ...
- BZOJ4303:数列
浅谈\(K-D\) \(Tree\):https://www.cnblogs.com/AKMer/p/10387266.html 题目传送门:https://lydsy.com/JudgeOnline ...
- 机器学习:PCA(降噪)
一.噪音 噪音产生的因素:可能是测量仪器的误差.也可能是人为误差.或者测试方法有问题等: 降噪作用:方便数据的可视化,使用样本特征更清晰:便于算法操作数据: 具体操作:从 n 维降到 k 维,再讲降维 ...
- Swing编程练习。可能这篇会有错误哦
总结:21岁的思思是华为的初级女java工程师,我等女流怎么办呢? Swing.图形用户界面的编程,panel起了很大作用 package com.da; import java.awt.Color; ...
- codeforce 510C Fox And Names(拓扑排序)
Fox And Names time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...