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 前端开发
Node.js的基本语法
【8月更文挑战第12天】Node.js的基本语法
149 1
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
35 0
|
4月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
4月前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
5月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
167 4
|
6月前
|
存储 JavaScript 前端开发
JavaScript 语法
JavaScript 语法
39 5
|
5月前
|
存储 JavaScript 前端开发
|
6月前
|
JavaScript 前端开发
JavaScript语法关键点:变量用`var`、`let`、`const`声明
【6月更文挑战第22天】JavaScript语法关键点:变量用`var`、`let`、`const`声明;七种数据类型包括`Number`、`String`、`Boolean`、`Null`、`Undefined`、`Symbol`和`Object`;运算符如算术、比较、逻辑和赋值;流程控制有`if...else`、`switch`和各种循环。了解这些是JS编程的基础。
63 3
|
5月前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
691 0