JavaScript的引入方式和基础语法~1

简介: JavaScript的引入方式和基础语法~

JavaScript简介:

JavaScript是一门跨平台,面向对象的脚本语言,来控制网页行为的,它能使网页可交互

W3C标准:网页主要由三部分组成

结构:HTML
表现:CSS
行为:JavaScript

JavaScript和java是完全不同的语言,无论是概念还是设计,但是基础的语法是相似的


JavaScript(简称JS)在1995年由Brenddan发明,并于1997年称为一部ECMA标准,ECMAScript 6(ES6)是最新的JavaScript版本(发布于2015年)


JavaScript引入方式:

内部脚本:

将JS代码定义在HTML页面中

在HTML中,JavaScript代码必须位于<script>与</script>标签之间

<script>
  alert("hello JS~");
</script>

提示:

在HTML文档中可以在任意地方,放置任意数量的<script>

一般把脚本置于<body>元素的底部,可改善显示速度,因为脚本执行会拖慢显示

举例:

<script>
        alert("hello js");
</script>

右击选择显示的浏览器:

显示如下:

外部脚本:

将JS代码定义在外部JS文件中,然后引入到html页面中

外部文件:demo.js

alert("hello JS~")

引入外部js文件

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

举例:

创建外部脚本myjs.js:

第一步:书写js代码

alert("hello myjs");

第二步:引入外部脚本

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

显示如下:

注意:

外部脚本不能包含<script>标签

<script>标签不能自闭和,如下所示:

若出现srcipt标签自闭和,那么页面效果将无法显示

<srcipt src="../js/myjs.js"/>

书写语法:

1:区分大小写:与java一样,变量名,函数名以及其他一切东西都是区分大小写的

2:每行结尾的分号可有可无

3:注释:

单行注释://注释内容
多行注释:*/注释内容*/

4:大括号表示代码块

if(count==3){
  alert(count);
}

输出语句:

1:使用window.alert()写入警告框,window可省略

举例:

<script>
    window.alert("hello,js1");
</script>

显示如下:

2:使用document.write()写入HTML输出

举例:

<script>
    document.write("hello,js2");
</script>

显示如下:

3:使用console.log()写入浏览器控制台

举例:

<script>
    console.log("hello,js3");
</script>

在网页右击,然后点击检查:

显示如下:

变量:

JavaScript中用var关键字(varable的缩写)来声明变量

var test=20;
test="张三";

JavaScript是一门弱类型语言,变量可以存放不同类型的值

举例:

<script>
    var test=19;
    alert(test);
</script>

显示如下:

<script>
    var test=19;
    test="小明";
    alert(test);
</script>

显示如下:

变量名需要遵循如下规则:

1:组成字符可以是任意字母,数字,下划线(_)或者美元符号($)
2:数字不能开头
3:建议使用驼峰命名

变量的特点:

1:var的作用域范围很广泛,相当于是一个全局变量

在Java中,定义的变量只在代码块中有效,但JavaScript并非如此

举例:

<script>
    {
        var test="你好";
    }
    alert(test);
</script>

显示如下:

即使我们在代码块外部访问该变量,也依然可以

2:变量可以重复定义

在Java中同一个变量是不允许重复定义的,但JavaScript并非如此

如下所示:

<script>
    {
        var test="你好";
        var test=1;
    }
    alert(test);
</script>

显示如下:

它不但没有报错,而且输出的var变量为第二次定义的,因为第二次定义的把第一次定义的覆盖了

ECMAScript 6新增关键字:

let关键字:

ECMAScript 6新增了let关键字来定义变量它的用法类似于var,但是所声明的变量,只在let关键字所在的代码块内有效,且不允许重复声明

举例:

如下所示,在浏览器中打开,会发现页面一片空白,并无警示框出现

<script>
    {
        let test=100;
    }
    alert(test);
</script>

右击点击检查—>控制台,如下所示:

如下所示,在浏览器中打开,会发现页面一片空白,并无警示框出现

<script>
    {
        let test=100;
        let test=10;
    }
    alert(test);
</script>

右击点击检查—>控制台,如下所示:

const关键字:

ECMAScript 6新增了const关键字用来声明一个只读的常量,一旦声明,常量的值就不能改变

举例:

如下所示,在浏览器中打开,会发现页面一片空白,并无警示框出现

<script>
    {
        const test=100;
        test=20;
    }
    alert(test);
</script>

右击点击检查—>控制台,如下所示:

数据类型:

我们上面所讲的通过var/let/const关键字定义变量是不需要指定数据类型的,但并不代表JavaScript就没有数据类型

JavaScript中分为:原始类型[类似于java中的基本类型]和引用类型

number:数字[整数,小数,NaN(Not a Number)]
string:字符,字符串,单双引皆可
boolean:布尔,true,false
null:对象为空
undefined:当声明的变量未初始化时,该变量的默认值是undefined

使用typeof运算符可以获取数据类型

number举例:

alert(typeof age);

举例:

<script>
  //当变量为整型时:
   var age=10;
   //当变量为浮点数时:
   var price=3.14;
   alert(typeof age);
   alert(typeof price);
</script>

在JavaScript中,无论是整数还是浮点数,其类型均为number类型

显示如下:

string举例:

<script>
  //当变量为单个字符时:
  var ch='a';
  //当变量为字符串时:既可以使用单引号,也可以使用双引号
  var name="张三";
  var address='北京';
  alert(typeof ch);
  alert(typeof name);
  alert(typeof address);
</script>

在JavaScript中,无论是单个字符还是字符串,其类型均为string类型

显示如下:

boolean举例:

<script>
  var a=false;
  var b=true;
  alert(typeof a);
  alert(typeof b);
</script>

输出:

null举例:

<script>
  var obj=null;
  alert(typeof obj);
</script>

显示如下:

注:typeof运算符对于null值会返回"Object",这实际上是JavaScript最初实现中的一个错误,然后被ECMAScript沿用了,现在,null被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值

undefined举例:

<script>
  var a;
  alert(typeof a);
</script>

显示如下:

相关文章
|
4天前
|
JavaScript 前端开发 Java
【JavaScript】基础语法(中)
【JavaScript】基础语法
15 1
|
4天前
|
JavaScript 前端开发 Java
【JavaScript】基础语法(下)
【JavaScript】基础语法
9 1
|
4天前
|
Web App开发 JavaScript 前端开发
【JavaScript】基础语法(上)
【JavaScript】基础语法
9 0
|
4天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
14 0
|
4天前
|
JavaScript
JS 基本语法
JS 基本语法
15 1
|
4天前
|
JavaScript 前端开发 C语言
JavaScript编程语法练习
本篇文章是对于javaScript中if ,switch,while ,do-while,,for语法的作业练习.对于我来说也是对自己知识掌握的一种检验.是对js的基础语法进行的一次练习,通过有趣的示例进行练习,使得对于代码能够增加印象,对于知识的掌握更加透彻.
|
4天前
|
JavaScript 前端开发
JavaScript语法(2)
【5月更文挑战第2天】JavaScript语法(2)。
18 3
|
4天前
|
存储 JavaScript 前端开发
JavaScript语法
JavaScript语法。
7 1
|
4天前
|
JavaScript 前端开发 开发者
Vue.js 模板语法
Vue.js 模板语法
|
4天前
|
XML 存储 JavaScript
JavaScript的基本语法是编程的基础
【4月更文挑战第20天】JavaScript的基本语法是编程的基础
18 5