JavaScript修炼之路 --- 初识js、练气段

coding_ke
300 阅读6分钟

写在开头：
个人“才疏学浅”，小白一枚，下述内容均为学习过程中的笔记总结与个人感悟，若有错误之处敬请斧正

关于标题：标题取为修炼之路一是个人曾经是修仙类小说爱好者，二是偶然间看到过杨逸飞大神所著JavaScript百炼成仙一书有感而发

JavaScript 基础介绍 --- 了解js大陆

JavaScript 简称 JS

js简介

  • 是一种脚本语言（script意为脚本，java只是当时为了蹭热点而加上的前缀，本身与java关系不大） 参考MDN技术文档 图片.png
  • 是一种弱类型语言：此处的弱是相对于其他如c语言、Java等语言来讲的，弱在何处？
    • 语法要求不严格、数据类型的分类相对于其他的语言没那么细致、分类也较少（后续会展现）
  • 直译型 即直接翻译（即英语中讲到的按实际意思逐字逐词翻译）

js作用

  • 最早的作用是为了解决表单的验证问题
  • 加强页面的动画效果（结合H5、css3）
  • 前后端数据交互（接受、传送数据） 所以在js代码中，如果不输出，也就是没有对页面进行任何操作的时候，那么此js代码基本没有任何用处

JS 大陆三国鼎立，分别为：ESMAScript、DOM(document object model)、BOM(browser object document) 图片.png

图片出自此处 js的组成

  • ESMAScript: ECMA是（欧洲计算机制造商协会）它规定了js的语法标准。
  • DOM: 文档对象模型，规定了文档的显示结构，可以轻松地删除、添加和替换节点
  • BOM: BOM是浏览器对象模型，就是浏览器自带的一些功能样式，如搜索框，设置，等学习浏览器窗口交互的对象
  • 参考：js的三大核心组成部分

js 引用的语法： 与css类似，js也有三种引用方式：

  • 行内js：行内js即写在html标签内部，例如：<input onclick = function a()>
  • 内部js：即写在<script></script>内部的js代码
  • 外部js：通过<script src="../js/tools.js"></script>进行调用html外部的js文件 注意：
    说到引用的语法，就不得不说的是： js 的<script></script>标签必须写在<body></body>的内部，并且要放在html所有代码的下面！！！

原因： 这是为了让浏览器先加载html代码后再加载js代码，并且script内部的js代码执行是由js代码去找对象（即html的元素），这是与css代码运行的方式不同的

为什么css代码可以写在html的上面？
因为浏览器在运行代码时，会从头开始读取代码，读取到style标签后，系统会跳过style的内部的样式代码，先往下执行html代码，最后再根据html的标签去查找style里面的css样式代码

通俗的来讲就是：js和css在运行时的规则是不同的!

  • css在执行时，只会读到style标签处，内部的css样式是暂缓不读取的，此后会直接去读取html代码，每读到一个标签就会查找一次css内部是否有设置此标签的样式。
  • js 能够与html和css样式进行连接，完全依靠的就是DOM调用html中的标签，获取到标签对象以后才能够对标签对象进行js代码的运行，也就是说运行过程中读取到script标签以后就会直接读取js的代码！

上文讲到js是一种弱类型语言，那么具体体现在哪些方面呢？
注：如下列举目前所遇到的两点，不全面，后期再有就再续杯

1.代码结束符“;”可写可不写。在一般编程语言中，每一句代码的结束严格来讲都必须要写分号，而在js中并无此类严格要求，也就是说不打分号浏览器也能正常识别。

2.变量的类型分类不细致。在其他的编程语言中，变量必须要声明具体类型才可以使用，并且明确声明的变量是无法赋值其余数据类型的内容的。例如：

在c语言中 声明一个短整型的变量 int a ;
此时a变量只能赋值整数数字，而不能赋值字符串或者是小数。

而在js中，声明的变量相当于就只是给了一个能装数据的盒子，这个盒子里面装什么数据，这个盒子就会变成什么样的数据类型

举个栗子：

var a ; //此时若打印变量a的数据类型，将会得到undefined

也就是说在没有给a赋值之前，这个a的数据类型是未定义的

a = 10 ; // 此时若打印变量a的数据类型，将会得到number

a = 'string' ; //此时若打印变量a的数据类型，将会得到string

a = true ; //此时若打印变量a的数据类型，将会得到boolean

a = null ;//此时若打印变量a的数据类型，将会得到object

这个时候就需要介绍到js大陆上关于变量的五种职业（数据类型）了

  • number 数字型（包括整数和浮点数）
  • string 字符串型（一切字符串都要打引号、一切打了引号的都是字符串；另外，字符串内部含有引号时，使用外单内双或者外双内单的原则进行使用）
  • boolean 布尔值（包含true 和 false 两个值）
  • null 空（值）对象（这里要注意的是，如果使用typeof打印null，将会得到的是object，即对象，关于对象的内容后续将会谈到）
  • undefined 未定义（这个是js特有的一种数据类型属性，即如上文提到的通过var声明一个变量但是没有给这个变量赋值时，他的数据类型就是undefined）

讲完了数据类型,下面要说的就是变量的命名了

  • 变量命名的要求（即必须满足否则报错）：
    • 变量名由数字、大小写字母、下划线、美元$符号四种内容构成
    • 不能使用数字作为变量命名的开头
    • 不能使用关键字、保留字 注：
      关键字：js当中正在使用的具有特殊意义的单词
      保留字：js将来可能定义为关键字的单词
  • 变量命名的规范（即建议，如果不使用也不会报错）：
    • 不使用拼音进行命名
    • 建议使用驼峰命名法进行命名
    • 命名尽量做到见名知意（使用有意义的英文单词或缩写） 注：
      驼峰命名法：变量名称中含有多个英文单词时，首个单词字母小写，后续单词首字母大写，例如：getElementById 就是驼峰命名

今天先写到这里吧，着实码字累了😭，感谢各位看官能看到这里（假装有）~

avatar
文章
阅读
粉丝