[最完整的前端学习手册]——JavaScript基础一:

14 篇文章 15 订阅
8 篇文章 0 订阅
这篇博客详细介绍了JavaScript的基础知识,包括它的组成、特点、引入方式、输出方法及注意事项。强调了变量的声明与赋值、命名规则以及数据类型的分类。还涉及运算符的使用、判断语句(if、switch)以及循环结构(for、while)。同时,提到了Math对象的一些常用方法和innerHTML、innerText属性。适合JavaScript初学者阅读。
摘要由CSDN通过智能技术生成

一、JS初识

1、JavaScript一种直译式脚本语言;

2、组成部分;

        (1)ECMAScript语法和基本对象

        (2)文档对象模型(DOM)处理网页内容的方法和接口

        (3)浏览器对象模型(BOM)与浏览器进行交互的方法和接口

3、JS特点

        (1)解释性脚本语言

        (2)用来向HTML页面添加交互行为,可以嵌入HTML页面,可写成单独的js文件

        (3)面向对象,基于原型

        (4)跨平台:可以在多种平台下运行

二、引入方式

        1、内部引入:<script></script>

        2、外部引入:<script src="./名称.js"></script>

三、输出方式

        1、警告窗输出:alert()

        2、页面写入输出:document.write()

        3、控制台输出:console.log()

四、注意事件

        1、代码结束的时候手动添加上 ";" 

        2、js代码中一定不要出现中文符号

五、变量

        1、变量声明:var 名称;

        ps:未赋值的变量,默认值为undefined

         2、变量赋值:名称 = 值;

        3、变量声明并赋值:var 名称 = 值;

六、命名

1、命名规则:
        (1)变量名可以包含数字、字母、下划线(_)和美元符$

        (2) 变量名不可以用数字作为开头

        (3)变量名明确区分大小写

        (4) 变量名不能使用系统关键字和保留字

2、命名规范:

        (1)驼峰命名

        (2)见名知意(匈牙利命名法)

七、数据类型

        1.1、Number类型:js中不区分整数和浮点数,统一用Number表示

        1.2、String类型:字符串是以单引号或双引号括起来的任意文本

        1.3、Boolean类型:true、false布尔值经常用在条件判断中

        1.4、Undefined类型:表示值未定义(只声明了变量却不为变量赋值)

        1.5、Object类型:对象只是带有属性和方法的特殊数据类型。对象是一组由 &值组成的无序集合。
                (1)获取对象的属性:对象变量.属性名

                (2)使用对象的方法,对象变量.方法名()

        1.6、两个常见的特殊对象:Array&null

        2、分类

                (1)基本数据类型:Number、String、Boolean、Undefined、null

                (2)复合数据类型:Object、Array、Function

                (3)特殊数据类型:NaN

八、运算符

1、常见的运算符:+、-、*、/、%

2、自增、自减运算符
        (1)++、--在前,先运算后赋值,

        (2)++、--在后,先赋值后运算。

3、复合运算符

        (1)+=:加法,运算并赋值,可进行字符串拼接。

        (2)-=:减法,运算并赋值。

        (3)*=:乘法,运算并赋值。

        (4) /=:除法,运算并赋值。

        (5) %=:取余,运算并赋值。

4、运算符间的优先级:自增自减运算符 > 算数运算符 > 赋值运算符

九、基础事件(剩余事件后续说)

p:最开始先掌握鼠标基本的鼠标点击事件

1.元素获取:通过标签的id属性值来获取元素:

        var 变量名称 = document.getElementById("id名称");

2.点击事件-onclick

        变量名称.onclick = function(){
        }

十、注释

1、多行/***/

2、单行//

十一、运算符

1、关系运算符

1、关系运算符:>(大于大于)、<(小于)、>=(大于等于)、<=(小于等于)、==(等于)、===(全等)、!=(不等于)、!==(不全等于)
2、字符串与字符串比较:先把字符串转换成ASCII,在按位比较;
3、== 和 === 的区别:前者只要求内容相等,后者要求类型和内容均相等

2、逻辑运算符

1、&&(并)、||(或)、!(非‘取反’)
2、逻辑运算符运算非布尔值:
3、非布尔值转布尔值的结果:
	(1)数值转布尔值,非0即为true。
	(2)非数值转布尔值,只有""、null、undefined和NaN为false,其他都是true。

3、运算符优先级:

算数运算符 > 关系运算符 > 逻辑运算符 > 赋值运算符

十二、判断

1、if语句

注:多个 if 语句,会按顺序依次执行

1、if语法:
		if(条件){
			当条件成立执行的代码
		}
2、if else语法:
		if(条件){
			当条件成立执行的代码
		}else{
			当条件不成立执行的代码
		}
3、if else if语法:
		if(条件){
			当条件成立执行的代码
		}else if{
			当条件不成立执行的代码
		}

2、switch语句

注:1、switch只能用于固定值的判断而不能用于判断范围。

​        2、break用于结束语句,不可以遗漏

​        3、关系运算符运算结果一定是布尔值。

语法
switch(n)
{
	case 1:
		执行代码块 1
	break;
	case 2:
		执行代码块 2
	break;
	default(表示条件都不成立时如何):
}

3、三目运算符

语法:
var 变量名称 = 条件 ? 条件成立的值 : 条件不成立的值;

十三、循环

1、for循环:

用于已知循环次数的问题上。

1、语法:
    for(表达式①;表达式②;表达式③)
    {
        中间循环体④;
    }
2、循环的执行过程:
① -> ② -> ④ -> ③ -> ② -> ④ -> ③ ... 直到②不成立,结束循环。

2、while循环语句

用于未知循环次数的问题上。

1、while
语法:
    while (条件)
    {
        需要执行的代码
    }
2、do...whlie
    (1)与while循环的区别:不是在每次循环开始的时候判断条件,而是在每次循环完成的时候判断条件
    (2)语法:
        do
        {
          需要执行的代码
        } 
        while (条件)

3、循环控制语句

1.break语句:立即退出循环(完全结束一个循环)

2.continue:立即结束本次循环,并开始执行下一次循环,直到循环条件不成立,结束循环

十四、Math对象的常见属性和方法

Math.PI:返回圆周率(约等于3.14159)
Math.abs(x):绝对值
Math.ceil(x):上舍入
Math.floor(x):下舍入
Math.round(x):四舍五入
Math.max(x,y):返回 x 和 y 中的最大值。
Math.min(x,y):返回 x 和 y 中的最小值。
Math.random():返回 0 ~ 1 之间的随机数。
Math.pow(x,y):返回 x 的 y 次幂

十五、innerHTML和innerText属性

1、innerHTML 属性设置或返回元素的开始和结束标签之间的内容(包含文本和html)。

2、innerText 属性设置或返回元素的开始和结束标签之间的文本(只能获取纯文本内容)

  • 28
    点赞
  • 270
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值