Javascript 20分钟快速入门

简介: JavaScript是目前web开发中不可缺少的脚本语言,js是解释性语言,不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。

简介:


JavaScript是目前web开发中不可缺少的脚本语言,js是解释性语言,不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。


诞生于1995年,当时的主要目的是验证表单的数据是否合法。


JavaScript本来应该叫Livescript,但是在发布前,想搭上当时超热的java,临时把名字改为了JavaScript。(也就是说js跟java没有关系,当时只是想借助java的名气)。


特点:



交互性(它可以做的就是信息的动态交互)


安全性(不允许直接访问本地硬盘)


跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关)


核心



(1)核心(ECMAScript):这一部分主要是js的基本语法。


(2)BOM:Brower Object Model(浏览器对象模型),主要是获取浏览器信息或操作浏览器的,例如:浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。


(3)DOM:Document Object Model(文档对象模型),此处的文档暂且理解为html,html加载到浏览器的内存中,可以使用js的DOM技术对内存中的html节点进行修改,用户从浏览器看到的是js动态修改后的页面。(增删改查)


书写的3种方式



内嵌式:


理论上js可以书写在页面的任意位置。


<script>
        // js标签内的js代码
        alert('Hello World!');
</script>


外链式:


首先新建一个文件类型为.js的文件,然后在该文件中写js语句,通过script标签对引入到html页面中。


<script src="js文件路径地址">这里不能写js语句</script>


行内式:


直接书写在标签身上,是一个简写的事件,所以又称之为事件属性。 onclick单击事件


<input type="button" value="点我" onclick="alert('木有');">
<button onclick="alert('恭喜你,一个对象到手');">点我</button>


注释


两种注释:单行注释和多行注释,注释是用于表示解释代码的,并不会被执行,是给我们程序员看的,方便增删改查……


//我是一个单行注释
/*
我是
一个
多行
注释
*/


变量


<script>
        //定义变量
        var num = 1;
        var name = 'liusen'
    </script>


万物皆var


js是弱类型语言,声明的变量在赋值之前,并不知道是什么数据类型,赋值之后就会判断其数据类型


没有赋值的变量返回的是undefined,表示空


命名规范:


首字符可以是数字,下划线,美元符号,不可以是数字,其他字符可以是数字,字母,下划线,$……


以$开头的一般是jQuery库或者其他类库声明的变量


object是对象类型的命名,变量以o开头


首字符是下划线的一般表示私有变量


驼峰命名,有多个单词时,从第二个单词开始首字母用大写

不推荐使用中文或拼音,尽量通用且见名之意


条件控制



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //定义变量
        var num = 79;
        var name = 'liusen'
        //条件控制
        if(num>60 && num<70){
            alert('及格');
        }else if(num>70 && num<80){
            alert('良好');
        }else{
            alert('其他');
        }
    </script>
</head>
<body>   
</body>
</html>


运行结果:


1dd859ffb48645afa9b795e7d350df35.png



注意:Javascript是严格区分大小写的


调试:浏览器打开----检查-----控制台


Elements:元素


Console:控制台


Sources:源码,调试


Network:网络


Application:应用


17d64d249b6a4d7c97c5d79a28c46b0d.png



打断点调试


数据类型



number:js不区分整数和小数
123  //整数
123.3 //浮点数
123e3 //科学计数法123000
-99  //负数
NaN  //not a number
Infinity//无穷


字符串


'abc'   "abc"
'\n'


布尔值


false
true


逻辑运算


&&  //两个都为真,结果为真
||  //一个为真,结果为真
!     //真即假,假即真


比较运算符⭐⭐⭐


=  //赋值
==  //等于,类型不一样,值一样,也会判断为true
===  //绝对等于,类型一样值一样,才会判断为true


这是一个js的缺陷,坚持不要用==比较


NaN与所有的数值都不相等,包括自己

只能通过 isNaN(NaN)来判断这个数是否是NaN


浮点数问题:


04da31584dfe42bbb7bf7687f2b47eae.png


尽量避免使用浮点数进行运算,存在精度问题


Math.abs(1/3-(1-2/3))<0.000000001


null和undefined


null 空

undefined 未定义


数组


Java的数组必须是相同类型的,js中不需要这样!


//保证代码的可读性,尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'Hello');


数组下标越界,会:


e4197c55290d4872845f6a09209b30c7.png


对象


var person = {
            name:"liusen",
            age:3,
            ta:['js','CSS','html']
        }


对象是一个大括号,数组是中括号


每个属性之间用逗号隔开,最后一个不需要添加


娶对象的值:


person.age
> 3
person.name
> "liusen"



相关文章
|
2月前
|
存储 监控 JavaScript
Node.js 性能平台5分钟快速入门
首先,确保拥有阿里云账号并开通服务,以及一台可上网的服务器。然后,创建应用并记下App ID和App Secret。通过tnvm安装Node.js性能平台组件,包括alinode和agenthub,检查安装成功的方法是`which node`和`which agenthub`命令显示路径包含`.tnvm`。接着,启动agenthub,并在服务器上运行一个示例应用(demo.js),该应用模拟计算密集型任务。最后,通过阿里云控制台观察监控数据和执行诊断操作。注意,性能平台每分钟上传一次日志,可能需等待几分钟才能看到数据。详细部署指南可参考官方文档。
38 6
|
1月前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
17 2
|
14天前
|
SQL 前端开发 JavaScript
JavaScript快速入门 有这一篇就够!
JavaScript快速入门 有这一篇就够!
|
14天前
|
存储 JavaScript 前端开发
如何快速入门使用Vue.js
如何快速入门使用Vue.js
12 0
|
1月前
|
JavaScript 前端开发 Java
JavaScript快速入门
JavaScript快速入门
11 1
|
1月前
|
Web App开发 存储 JavaScript
JavaScript快速入门
JavaScript快速入门
12 0
|
2月前
|
JavaScript 前端开发 Java
JavaScript 快速入门手册
JavaScript 快速入门手册
|
2月前
|
JavaScript 前端开发 Java
JavaScript 快速入门手册
JavaScript 快速入门手册
22 0
|
2月前
|
JavaScript 前端开发
node.js 快速入门
node.js 快速入门
43 0
|
11月前
|
JavaScript
【JS】快速入门DOM
【JS】快速入门DOM
45 0