js基础语法

js基础语法

. 简介

1.概述:

JavaScript是一种基于对象的，事件驱动的，跨平台的，客户端脚本语言

2.javascript能做什么：

对页面进行渲染，让页面有行为。让页面动起来，与后台数据进行交互。

3.javascript简史:

1995年时，由Netscape公司的布兰登.艾奇（Brendan Eich）开发出来的，最初中liveScript,为了快速发展，借用了当时一个业界非常流行的词语java,于是更名为javaScript.

​ 后来微软进入浏览器行业，从IE3.0开始的搭载了一个javaScript的克隆版JScript.因为行业的竞争,导致出来了多个不同的版本，使得各种浏览器，在兼容程序方面出现了混乱。

​ 为了统一语法标准，1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA），第 39 技术委员会（TC39）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义，由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262，该标准定义了名为 ECMAScript 的全新脚本语言。

.js的组成部分

ECMAScript: 核心 语法规则

DOM（document object module）:文档对象模型

BOM（browser object module）:浏览器对象模型

.js运行

三种运行方式

1.内联(内部)【script标签可以放在除了title标签外的其他任何地方】

<script type="text/javascript">
    //这里写内联的JS代码
    //当浏览器渲染页面的时候，只要遇到script标签，立刻解析js代码，并逐步执行。
    alert("hello js");
    //到这里执行结束
</script>

2.外联【script标签可以放在除了title标签外的其他任何地方】

<script src="js/index.js"></script>

3.行内

<div id="tom" onclick="alert('hello')"></div>

.输出

1.alert(); 是一个弹出框，阻止后面代码的运行，当点击了确定按钮之后才会执行下面的代码，一般用于程序的测试。

alert("hello js");

2.document.write();(了解即可)

document是一个文档对象，write是document对象下的一个方法；
//document.write("hello.js");//在页面中输出小括号中的内容；
//document.write("hello,js","1","2");//一次性输出多个
//document.write("<br>he<span style='color:blue;'>11<span>o,<br>js")//可以渲染html标签

3.console.log();(常用)

//在浏览器控制台的console选项卡中输出
//console.log(1,2,3,4);//程序遇到点操作符时，点的前面是对象，后面是这个对象下的某个属性

.变量的声明

1.概念（有变化的量）

.有具体的数据 .有一个标识 .使用过程中会发生变化

2.语法（=：赋值操作 ）

var 标识符(变量名) = 值(数据);

  例:var sharen = "100吨砂仁";
  例：   var a = 9;
        var b = 10;
        var c = 3;
        console.log(c); //输出3
        c = 4;//变量c被修改了
        console.log(b,c,a);//输出 10 4 9

.变量运算

1.基本运算（+ - * /）

2.有一边为字符串时（，加法计算连接起来，其它计算，如减，乘，除都是正常计算。）

var a = 10;   //是一个数字
var b = "5"; //有双引号的值在程序中叫字符串
alert(a + b);//105,相加结果连接起来了
//以下其它运算正常
alert(a - b);//5
alert(a * b);//50
alert(a / b);//2

3，字符串之间的连接操作

    //字符串之间的拼接
        var userName = "aili";
        var a = "hello";
        var b = "你好吗";
        alert(a + ", " + userName + ", " + b);//用加号将多个字符串连接起来

4，小数之间计算的精度问题

alert(0.1+0.2);//0.30000000000000004
【简单处理办法】
alert((0.1*10+0.2*10)/10);//0.3

.声明多个变量及变量声明的书写方式

每一行代码结束以分号结束

 var a = 6;//如果一行代码结束，请加分号
 var b = 7;

多个变量写在一行，不加分号，程序会报错
逗号隔开，可用一个var声明多个变量

var a = 7,b = 8, c = 9;//一个var声明多个变量；

最优写法

var a = 7,
    b = 8, 
    c = 9;//易于阅读

多个变量是同一个值的情况

var a = b = 7;//多个变量是同一个值时
              //这种写法只有a变量才是用var声明的变量，b变量与var没有关系
              //没有var也可以声明变量

变量声明区分大小写
不使用var也可以声明变量

a = 2;//不使用var声明的变量，这时的a变量是一个全局变量，不受作用域限制（什么是作用域，什么是全局变量后文会讲解到，这里不作解释）

.变量命名规则

1.变量名开头字符：以“字母、$、_” 三种字符开头；

2.其它字符：可以使用“字母、$、_、数字”四种字符

3.关键字不能用来命名

break、else、new、var、case、finally、return、void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instranceof、typeof。

4.保留字不能用来命名

abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、super、char、final、native、synchronized、class、float、package、throws、const、goto、private 、transient、debugger、implements、protected 、volatile、double、import、public。

.变量声明原则：最大的原则是“语义化”

。语义化命名：增强程序的可读性

var userName = "tom";//声明一个用户名变量

。驼峰命名法：由多外单词构成的变量名，从第二个单词开始，每个单词的开头使用大写，将各个单词区分开来，便于程序阅读（最常用）

var guLiNaZha = "古力娜扎";//

。匈牙利法:根据不同的数据类型的变量来命名

//string(字符串),以简写s开头，表示这个变量是一个字符串的值
var sUserName = "tom";
//int(整形) ，以简写i开头，表示这个变量是一个整数形的数字
var iage = 19;
//float(小数),以简写f开头，表示这个变量是一个小数的值
var fprice = 3.2;

.变量的数据类型

。type操作符的使用：用于检测一个变量是什么数据类型的值

var a = 4;
alert(typeof a);//number

。数据类型的分类

基本数据类型：有五种，分别为 number,string,null,boolean,undefined;

1，number类型:数字类型

var num = 19;
console.log(typeof num);//number

2,string类型:字符类型

var str="这是一个字符串";
console.log(typeof str);//string

3.null类型：空对象的引用，有一个值，null值

 var obj = null;
 console.log(typeof obj);//null,未来可能保存的是一个对象的值，null为空对象的引用。

4.boolean类型：布尔类型，有两个值，true和false,表示真和假。

var flag = true;
console.log(typeof flag);//boolean,布尔值，该值为真

5.undefined类型：未被定义的，只有一个值undefined值

var a;//声明未定义。
console.log(typeof a);//声明了一个变量a,并未初始化，a变量是未被定义的。结果是undefined;

6.引用数据类型：又称为对象类型，主要有“数组，对象，函数”

 var arr = [];//数组，是引用数据类型
 var obj = {};//对象，是引用数据类型
 var fn = function(){};//函数，是引用数据类型引用数据类型的具体操作在后面的章节中讲解

.数据类型间的转换

  • 转字符类型
1.var num = 10;
  var str = num.toString();
  console.log(str);
2.console.log(String(num));
3.console.log(num + '');
  • 转数字类型
1.parseInt(变量)转化为数字型 得到的是整数
 var age = prompt("请输入年龄");
 console.log(parseInt(age));
 console.log(parseInt('3.14'));//3
 console.log(parseInt('120px'));//去掉单位
 console.log(parseInt('rem120px'));//NaN
2. parseFloat(变量)转化为数字型 得到的是浮点数
  console.log(parseFloat('3.14'));//3.14
  console.log(parseFloat('120px'));//去掉单位 
  console.log(parseFloat('rem120px'));//NaN
3.利用Number(变量)
  var str='123';
  console.log(Number(str));
  console.log(Number('12'));
4.利用算术运算 - */
  console.log('12' - 0);
  console.log('12' * 1);
  console.log('12' / 1);
  • 转化为boolean型
 console.log(Boolean('')); //false
 console.log(Boolean(0)); //false
 console.log(Boolean(NaN)); //false
 console.log(Boolean(null)); //false
 console.log(Boolean(undefined)); //false
 console.log(Boolean('123')); //true

  • 运算符

    • 运算符分类：

      • 小括号运算符（）

      • 算术运行符: + - * / %

      • 关系运算符: > < >= <= == === != !==

      • 赋值运算符:

        1，简单赋值： =

        2，复合赋值： += -= *= /=

      • 自增自减运算符：++ --

      • 逻辑运算符 ：

        1，逻辑与：&&

        2，逻辑或：||

        3，逻辑非：！

        4,【案例】：

            var a = false || 5 && 0 && 6;alert(a);
    var a = !null && undefined || "" && 6;alert(a);
    var a = !null && undefined || " " &&  6;alert(a);
    var a = !null && undefined || "0" &&  6;alert(a);
    var a = !null && undefined || 0 &&  6;alert(a);

+ 三目运算符： 

  1.语法：条件   ？ true  :  false;

  2.【案例】：判断一个年份是平年还是润年

  ```
  var y = 2020;
  y % 4 === 0 && y % 100 != 0 || y % 400 === 0 ? alert(y + "年是闰年") :  alert(y + "年是平年") 
  ```

  • 运算符的优先级

    var a = 3;
var b = 10 + ++a * (2 + 4) > 30 ||  false ? 6 : 7;

    【优先级】（）> 自增自减运算符 > 算术运行符 > 关系运算符 > 逻辑运算符 > 三目运算符 > 赋值运算符

  • toFixed()方法的使用

    方法说明：如：num.toFixed(3)，功能是将num这个小数保留3位小数并四舍五入

    var num = 3.13456;
var result = num.toFixed(3);
alert(result);//3.135
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,874评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,102评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,676评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,911评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,937评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,935评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,860评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,660评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,113评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,363评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,506评论 1赞 346
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,238评论 5赞 341
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,861评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,486评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,674评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,513评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,426评论 2赞 352