从零开始学习前端JAVASCRIPT — 1、JavaScript基础

1:定义:javascript是一种弱类型、动态类型、解释型的脚本语言。

弱类型:类型检查不严格,偏向于容忍隐式类型转换。

强类型:类型检查严格,偏向于不容忍隐式类型转换。

动态类型:运行的时候执行类型检查。

静态类型:编译的时候就知道每个变量的类型。

解释型:程序不需要编译,程序在运行的时候才翻译成机器语言,每执行一次都要翻译一次,因此效率比较低,但是跨平台性好。

编译型:程序在执行之前需要一个专门的翻译过程,把程序编译为机器语言的文件,运行时直接使用编译的结果就行了。

标记语言:标记语言的存在就是用来被读取(浏览)的,而其本身是没有行为能力的,在标记语言里你会看到<和>这些尖括号,这是用来写出“层次”和”属性”的,换句话说,它是被动的。并不具备与访问者互动的能力。

编程语言:它是具有逻辑性和行为能力,这是主动的。说通俗一点,它是有思想的。

脚本语言:它介于标记语言和编程语言之间,脚本语言不需要编译,可以直接用,由解释器来负责解释。


2:JS历史

1)Netsape发明了javascript。

2)JS之父Brendan Eich(布兰登 · 艾奇)

3)为什么叫JavaScript

4)JS和JAVA语言没有任何关系

5)JS标准化---ECMAScript


3:JS组成


4:文件引入

 <script>标签用于定义客户端脚本。它既可以包含脚本语句,也可以通过src属性指定外部脚本文件。

属性:

language:用来指定<script>标签中的脚本类型,即javascript。已废弃,大多数浏览器已经忽略它了,所以不要在使用。

type:它也是用来指定<script>标签中的脚本类型,即text/javascript。它也是type的默认值,所以可以忽略指定。

src:指定外部的脚本文件。如果指定该属性,script标签包含的JS脚本不会执行。

不可以使用单标签,即<script type=“text/javascript”/>。

1) 引入外部文件

<script type="text/javascript" src="JS文件"></script>

2.存放在HTML的<head>或<body>中

<script type="text/javascript">
    Js代码内容
</script>
  • HTML的head中
  • HTML的body代码块底部(推荐)

3) 为什么要放在<body>代码块底部?

  • HTML代码从上到下执行,先加载CSS,避免html出现无样式状态;
  • 将JavaScript代码块放在<body>最后,可以让网页尽快的呈现给用户,减少浏览者的等待时间,避免因为JS代码块阻塞网页的呈现。

5:js注释

注释可用于提高代码的可读性。Javascript不会执行注释,用户也不会看到注释,注释只是方便开发者更好的理解JS代码。

单行注释:以//开头。

// 这是一行单行注释

多行注释:以/*开头,以*/结尾。

/*
	第一行注释
	第二行注释
*/

文档注释:以/**开头,以*/结尾。

/**
	这是文档的注释
*/

  

重要注释:以/*!开头,以*/结尾

/*!
	这是非常重要的注释
*/

6:js变量

变量是存储信息的容器,用var关键词来声明(创建)变量。

1)变量定义(声明):

先定义后赋值:

var age;    //var 是关键字,age是变量名

age = 20;  //20是数据 “=”是赋值

定义的同时赋值: var age=20;

一条语句中声明多个变量,该语句以var开头,并使用英文逗号分隔。

var x= ‘加数‘, y= ‘加数‘,z=‘和‘;

2)局部变量必须以 var 开头申明,如果不写 var 则为全局变量

<script type="text/javascript">

    // 全局变量
    name = ‘xiaoming‘;

    function func(){
        // 局部变量
        var age = 18;

        // 全局变量
        sex = "man"
    }
</script>

注:1, 变量也可以不定义,但强烈不推荐。 2, 变量必须先赋值再使用



7:变量命名规则及常用命名法

1)变量命名规则:以字母、数字、下划线和$组成,但是不能以数字开头。且JS语句和JS变量都是严格区分大小写不能用拼音来命名。

2)变量常用命名法推荐西班牙命名法,以 小写字母b,f,i,s开头表示类型,后接大写开头的有意义的单词。

驼峰命名法(Camel):第一个单词的首字母小写,后面的单词首字母大写。

帕斯卡命名法(Pascal):所有单词的首字母大写。

匈牙利命名法(Hungarian):在变量名最前面添加相应小写字母来标识变量的类型,后面的单词首字母大写。

// 驼峰命名法
// var haveGoodGoods = ‘有好货‘;

// 帕斯卡命名法
// var HaveGoodGoods;

// 匈牙利命名法
// var sHaveGoodGoods = ‘有好货‘;

 3)尽量使用有意义的单词作为变量名(语义化),也尽量不要与HTML、CSS中的关键字冲突。

                  保留关键字列表

原文地址:https://www.cnblogs.com/witkeydu/p/8289837.html

时间: 2024-07-29 00:35:20

从零开始学习前端JAVASCRIPT — 1、JavaScript基础的相关文章

从零开始学习前端JAVASCRIPT — 5、JavaScript基础ES5

1:ES5简介 ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准的修正. 与HTML5规范进程本质类似,ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化. 2:严格模式的意义 相对于正常模式而言: 1:消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为. 2:消除代码运行的一些不安全之处,保证代码运行的安全. 3:提高编译器效率,增加运行速度. 4:为未来新版本的Java

从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM

1:DOM(Document  Object  Model)的概念和作用 document对象是DOM核心对象:对html中的内容,属性,样式进行操作. 节点树中节点之间的关系:父子,兄弟. 2:DOM常用属性 title:返回或设置当前文档的标题. all:返回所有元素的集合. forms:返回对文档中所有form对象的引用. 通过集合来访问相应的对象: 1.通过下标的形式. 2.通过name形式. 3:DOM查询方法 1.getElementById(id):返回拥有指定id的(第一个)对象

从零开始学习前端JAVASCRIPT — 4、JavaScript基础Math和Date对象的介绍

Math对象的介绍 1:Math对象 Math 对象用于执行数学任务.并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math().您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法. 2:Math属性 PI:返回圆周率(约等于3.14159). 3:Math方法 Math.round(3.6);   // 四舍五入. Math.random();     // 返回大于等于0到小于1之间的随机数. // 随机数如何设定范围 // 0 - 100(包含)

从零开始学习前端JAVASCRIPT — 3、JavaScript基础string字符串介绍

1:字符串 JS中的任何数据类型都可以当作对象来看.所以string既是基本数据类型,又是对象. 2:声明字符串 基本数据类型:var sStr = '字符串'; 对象的方法:var oStr = new String('字符串'); //统计每个字符出现的次数,结果显示 a 2.b 1.c 2.d1,去掉重复的字符,使结果显示 abcdfgj. //var定义的变量赋值字符串以对象[]的方式访问单个字符IE8以上支持 var str="abcdafgcj"; var arr={};

从零开始学习前端JAVASCRIPT — 14、闭包与继承

1:闭包 1 . 概念:闭包就是能够读取其他函数内部变量的函数.在JS中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解为”定义在一个函数内部的函数”. 2 . 闭包的特点 1)可以读取函数内部的变量. 2)让这些变量的值始终保存在内存中. 3 . 闭包的原理 理解闭包,首先必须理解JS变量的作用域.变量的作用域无非就是两种(es5):全局变量和局部变量. JS语言的特殊之处,就在于函数内部可以直接读取全局变量.另一方面,函数外部自然无法读取函数内的局部变量. 注意: 1)函数内部

从零开始学习前端开发 — 15、CSS3变形基础过渡、动画

一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 eg: transition: all 1s; ident 指定要过渡的css属性列表 eg: transition:border-radius 1s,background 2s; none 没有属性发生过渡 注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的transition属性

从零开始学习前端开发 — 5、CSS布局模型

一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元素设置float后会脱离正常的文档流 3.层模型(Layer) 使用position属性对元素进行定位设置 二.定位 语法:position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位); 1.绝对定位 语法: position:abso

从零开始学习前端开发 — 3、CSS盒模型

★  盒子模型 (标准的盒模型) css盒模型的概念及组成 css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成(具体如图所示) 1.内容(content) 宽度 width:数值+单位; 高度 height:数值+单位; eg: .box{width:200px;height:100px;} 2.补白或填充 (设置内容和边框之间的距离) 语法:paddi

从零开始学习前端开发 — 7、常见浏览器兼容性问题及图片整合技术

一.常见浏览器兼容性问题 1.双倍浮动bug 描述:块状元素设置了float后,又设置了横向的margin,在IE6下显示的margin值要比设置的值大 解决方案: 给float的元素添加display:inline;将其转换为行内元素 2.表单元素行高不一致 解决方案: 方案一: 给表单元素添加 vertical-align:middle; 方案二: 给表单元素添加 float:left; 3.IE6不识别高度小于10px的容器 解决方案: 方案一: 给元素设置 overflow:hidden