JavaScript笔记(1)

今天开始正式开启JS,超级激动了!开始学习叭

这里我感谢学习Python后奠定的一些基础,其实语言之间很多东西都是相通的.

编程

编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程.

计算机程序:就是计算机所执行的一些列指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令.

注意:上面所定义的计算机指的是任何能够执行代码的设备,可能是智能手机,ATM机,服务器等.

计算机语言

计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介.

计算机语言种类非常的多,总的来说可以分成机器语言,汇编语言和高级语言三大类.

实际上计算机最终所执行的都是机器语言,它是由"0"和"1"组成的二进制,二进制是语言的基础

编程语言

可以通过类似于人类语言的"语言"来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming Language).

编程语言是用来控制计算机的一系列指令,它有固定的格式和词汇(不同编程语言的格式和词汇不一样),必须遵守,如今通用的编程语言有两种形式:汇编语言和高级语言.

• 汇编语言和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆.
• 高级语言主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包括了很多编程语言,常用的有C语言,C++,Java,Python等

翻译器

高级语言所编制的程序不能直接被计算机识别,必须经过转换才能被执行,为此,我们需要一个翻译器,翻译器可以将我们编写的源代码转换成机器语言,这也被称为二进制化,记住0和1.

编程语言(JS)和标记语言(HTML)的区别

• 编程语言有很强的逻辑和行为能力,在编程中,你会看到很多if/else/for等具有逻辑性和行为能力的指令,这是主动的.
• 标记语言:不用于向计算机发出指令,常用于格式化和链接,标记语言的存在是用来被读取的,他是被动的.

JavaScript

JavaScript是什么

• JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言(script是脚本的意思)
• 脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行.
• 现在也可以基于Node.js技术进行服务器端编程.

本文由“壹伴编辑器”提供技术支持

JavaScript的作用:

• 表单动态验证(js产生的最初目的)
• 网页特效
• 服务端开发(Node.js)
• 桌面程序
• APP
• 控制硬件-物联网
• 游戏开发

本文由“壹伴编辑器”提供技术支

HTML/CSS/JS的关系:

本文由“壹伴编辑器”提供技术支持

浏览器执行JS简介

浏览器分成两部分:渲染和JS引擎.

• 渲染引擎:用来解析HTML和CSS,俗称内核,比如Chrome浏览器的blink,老版本的webkit
• JS引擎:也称为JS解释器.用来读取网页中的JavaScript代码,对其处理后运行,比如Chrome的V8.

浏览器本身并不会执行JS代码,而是通过内置的JavaScript引擎(解释器)来执行JS代码.JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行.

本文由“壹伴编辑器”提供技术支持

JavaScript的组成

• ECMAscript(JavaScript语法)
• DOM(页面文档对象模型)
• BOM(浏览器对象模型)

1.ECMAscript

ECMAscript是由ECMA国际进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMAscript语言的实现和扩展.

ECMAscript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准.

2.DOM

文档对象模型(Document Object Model),是W3C组织推荐的处理可标记语言的标准编程接口,通过DOM提供的接口可以对页面上的各种元素进行操作(大小,位置,颜色等)

3.BOM

BOM(Brower Object Model)是指浏览器对象模型,它提供了独立于内容的,可以与浏览器窗口进行互动的对象结构,通过BOM可以操作浏览器窗口,比如弹出框,控制浏览器跳转,获取分辨率等.

本文由“壹伴编辑器”提供技术支持

JavaScript的书写位置

JavaScript的书写方式有三种:行内/内嵌/外部

1.行内 行内就是在元素的内部直接书写:

 <input type="button" value="hhh" onclick="alert('哈哈哈')" >

• 可以将单行或少量JS代码写在HTML标签的时间属性中(以on开头的属性)如:onclick
• 注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
• 可读性差,在html中编写大量JS代码时,不方便阅读.
• 引号易错,引号多层嵌套匹配时,非常容易弄混.
• 特殊情况下使用

2.内嵌 书写的方法就和CSS的类似,将<style></style>换成<script></script>即可:

<script>
    alert("哈哈哈哈")
</script>

• 可以将多行代码写到<script>标签中
• 内嵌JS是学习时常用的方式

3.外部 通过单独创建文件然后引入文件的方法,但是注意不是link了,而是下面的代码:

<script scr='...js文件地址...'></script>

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

• 利用HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用
• 引用外部JS文件的script标签中间不可以写代码.
• 适合于JS代码量比较大的情况下.

本文由“壹伴编辑器”提供技术支持

JS注释

单行注释:// 快捷键:Ctrl+/

多行注释:/* */ 快捷键:Shift+Alt+A

本文由“壹伴编辑器”提供技术支持

JavaScript输入输出语句

尝试:

    <script>
        prompt("请输入你的年龄:")
</script>

那console控制台输出的内容在哪里呢?在网页F12后,点击console,就可以看到内容啦.

本文由“壹伴编辑器”提供技术支持

变量

概念:什么是变量

白话: 变量就是一个装东西的盒子

通俗:变量是用于存放数据的容器.我们通过变量名获取数据,甚至数据可以修改.

变量在内存中的存储

本质:变量是程序在内存中申请的一块用于存放数据的空间

本文由“壹伴编辑器”提供技术支

变量的使用

变量在使用时分为两步:1.声明变量 2.赋值

1.声明变量

var

• var是一个JS关键字,用来声明变量(variable).使用该关键字声明变量后,计算机会自动为变量分配内存空间.
• var后面跟的是变量名:如 var age,我们要通过变量名来访问内存中分配的空间.

2.赋值

变量名=...

• =用来把右边的值赋给左边的变量空间中,此处代表赋值的意思
• 变量值是程序员保存到变量空间里的值

本文由“壹伴编辑器”提供技术支持

声明变量特殊情况

变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定

var age = 10; // 这是一个数字型
var areYouOk = '是的'; // 这是一个字符串

在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断的，运行完毕之后, 变量就确定了数据类型。

JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型.

本文由“壹伴编辑器”提供技术支持

简单的数据类型

• number类型既可以用来保存整数值,也可以保存小数.
• 现阶段我们只需要记住:在JS中,八进制的前面是0,十六进制的前面是0x

isNaN()

用来判断一个变量是否为非数字的类型,返回true(非数字)或false(数字).

转义字符

(不过最后一个应该是退格的意思)

length

获取字符串长度

var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11

布尔值

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1); // 2
console.log(false + 1); // 1

Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

检测变量的数据类型

typeof 可用来获取检测变量的数据类型

var num = 18;
console.log(typeof num) // 结果 number

今天就先学到这里啦,学了30P,效率还是低了