JavaScript基础入门1

简介: JavaScript基础入门

一·认识JavaScript

  • JavaScript 是脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。(简称:JS)
  • JS是脚本语言。换句话说,能够用来编程的并且直接执行源代码的语言,就是脚本语言。
  • JavaScript是因特网上最流行的脚本语言,它存在于全世界所有的Web浏览器中,能够增强用户与Web站点和Web应用程序之间的交互。
  • Javascript是基于对象的,是一种基于对象和事件的驱动的编程语言,因而它本身提供了非常丰富的内部对象设计人员使用。(几乎所有的浏览器都支持javascript,如:Internet Explorer浏览器、 firefox火狐浏览器、Opera浏览器等等)
  • JS也是解释性的语言。何为解释性语言?是在运行的时候将程序直接翻译成机器语言。


1.1·JavaScript的特点

1.是一种解释性脚本语言:

(非脚本语言编写的通常是需要经过编写---编译---链接---运行这四个步骤,而脚本语言javascript只需经过编写--运行着两个步骤)。

2.2、跨平台特性:

由于javascript程序的运行依赖于浏览器,只要操作系统中安装有支持javascript的浏览器即可,因此javascript和平台(操作系统)无关,可以在多种平台下运行(如Windows操作系统、Linux操作系统、Mac操作系统、Android操作系统、iOS操作系统等)。

3.3、基于对象和事件驱动:

Javascript把html页面中的每个元素都当作一个对象来处理,并且这些对象都具有层次关系,像一棵倒立的树,这种关系被称为“文档对象模型DOM”。在编写javascript代码是会接触到大量对象及对象的方法和属性。可以说学习javascript的过程,就是了解javascript对象及其方法和属性的过程。因为基于事件驱动,所以javascript可以捕捉到用户在浏览器中操作,可以将原来静态的html页面变成和用户交互的动态页面。

4.尽管javascript分为服务器端和客户端,但目前应用最多的还是客户端。

二·JavaScript基本使用


2.1 JS嵌入方式

在 HTML 中使用 JS 可以用以下几种方式实现:

行内式


内嵌式


外部引用 js 文件


         行内式,可以在 html 元素中直接用使用 js 语句,但是一般都是调用函数或简短的语句。

<input type="button" value="Click Me!" onclick="alert('Hellow World')">

内嵌式,一般用于实现比较小的功能,代码不长的情况

<script>
    alert('Hello World');
</script>

外部JS文件,最常见的方式

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

2.2 JS 注释

// 单行注释    
/*  多行注释 */

2.3 JS 输入输出语句

  • alter/prompt/confirm来源于window对象
alert(msg)  // 浏览器弹出框
console.log(msg)  // 浏览器控制台打印输出信息
prompt(info)  // 浏览器弹出输入框,用户可以输入
confirm()

2.4 JS事件

  • 标签的事件属性
<button onclick = "alert('123')">点我</button>
<button onclick = "a();">点我</button>
a()====>函数
function a(){
}

2.5 查找 HTML DOM 元素

HTML DOM 能够通过 JavaScript 进行访问(也可以通过其他编程语言)。在 DOM 中,所有 HTML 元素都被定义为对象。我们可以通过 Javascript 对这些对象操作,改变 HTML 元素的内容。


getElementById()


因为 id 元素是唯一的,就是为了在 js 中通过元素 id 来查找元素,document 是页面文档对象,getElementById 是 document 的方法,通过传递的参数(id字符串),是一个标签的id值。可以返回的该元素对象

<div id="new">This is new Element</div>
<script>
    // 页面文档从上往下加载,需要将 script 代码写在下边
    var dom = document.getElementById('new');
    // 显示id为new的对象中内容
    console.log(dom);
    // 可以打印我们返回的元素对象,更好的查看里边的属性和方法
    console.dir(dom);  
</script>

三·变量

3.1.1 定义

变量是程序在内存中申请的一块用来存放数据的空间。通过变量名称我们可以使用或修改保存在系统中的对应的数据。

3.1.2 声明变量

Js 是一种弱类型或者说动态语言,不用提前声明变量的类型,变量的类型会自动判断。即使赋值之后,变量的类型根据重新赋值的数据类型同样进行改变。

var age;  // 声明一个名称为age的变量
age = 12;  // 给age这个变量赋值为12

通常声明与赋值一起使用:

var age = 12;

3.1.3 初始化变量

var age = 12
var name = 'Tom'
name = 'OO'  // 再次给相同变量赋值则不用 var 进行初始化
var a = 10, b = 20, c = 30;  // 可以同时声明多个变量

3.1.4 输入存储变量

1. var name = prompt('请输入你的名字')
2. alert(name)

3.1.5 变量的命名规范

  • 由字母、数字、下划线、$符号组成,不能以数字开头
  • 不能是关键字和保留字,例如:for,while,this,name
  • 区分大小写
  • 变量名必须有意义
  • 小驼峰命名法,如:myName
  • 建议不要用$作为变量名

3.1.6 查看变量

alert(变量名)  // 弹出框显示
console.log(变量名)  // 控制台显示
document.write(变量名)  // HTML 页面上显示

3.2 数据类型

3.2.1 数字型[number]

3  // 十进制
010  // 八进制
0xa  // 十六进制
3.14  // 小数
NaN  // 非数字 Not a Number

数字型范围:

console.log(Number.MAX_VALUE);  // 1.7976931348623157e+308
console.log(Number.MIN_VALUE);  // 5e-324

3.2.2 字符串型[string]

var str1 = '这是个字符串';

字符串转义符:

\n  // 换行
\r  // 回车
\\
\'
\"
\t
\b  // 空格
\xnn  // 16进制字符,如 \x41 代表 'A'
\unnn  // 16进制 unicode 字符, 如 \u03a3 代表∑

字符串长度:

变量.length 可以得到字符串长度,如:

var str1 = 'hello world'
console.log(str1);  
// 输出结果:11

字符串拼接:

var str = str1 + str2;
var str = '字符串' + 123;  // 输出字符串123,字符串拼接其他类型会自动转换为字符串
var str = 'My age is' + age + 'years old';  // 字符串+变量拼接

只要与字符串做加法运算都会被转换成字符串

字符串中的双引号和单引号:

var str = "他是'程序猿'";

3.2.3 布尔型

布尔型 Boolean 只有两个值,一个是 true, 一个是 false

console.log(1 + true);  // 在运算中,true代表1
console.log(1+ false);  // false 代表0
console.log('t' + true);  // 在字符串拼接,会直接以字符串形式拼接 ttrue

3.2.4 null 空值

console.log(null+ 'pp');  // 会拼接字符串 nullpp
console.log(null + true);  // 会输出 1

null表示"没有对象",即该处不应该有值。

  • 作为函数的参数,表示该函数的参数不是对象。
  • 作为对象原型链的终点。

3.2.5 undefined 未定义

一个声明后没有被赋值的变量会有一个默认值 undefined

console.log(undefined + 'pp');  // 会拼接字符串 undefinedpp
console.log(undefined + true);  // 会输出 NaN
console.log(undefined + 1);  // 会输出 NaN
  • 变量被声明了,但没有赋值时,就等于undefined。
  • 调用函数时,应该提供的参数没有提供,该参数等于undefined。
  • 对象没有赋值的属性,该属性的值为undefined。
  • 函数没有返回值时,默认返回undefined。

undefined 和 null 的区别

只设置了null作为表示"无"的值。根据C语言的传统,null被设计成可以自动转为0。JavaScript的最初版本是这样区分的:null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。


  • undefined和null在if语句中,都会被自动转为false

3.2.6 其他类型

  • 数组
  • 对象

3.2.7 数据类型转换

3.2.7.1 typeof() 查看数据类型

var num = 1;
console.log(typeof num);
console.log(typeof(num));  // 也可以使用参数的形式查看

null 返回的是 object

3.2.7.2 转换为字符串

var num = 1;
alert(num.toString());  // 无法用 .toString() 方法转换 undefined 和 null
alert(String(num));  // 可以转换 undefined 和 null
alert(num + '');

3.2.7.3 转换为数字型

// 转换为整型
parseInt(num);
parseInt('3.14');  // 取整为3
parseInt('90px');  // 去掉单位(只取int遇到字符串自动中断)
parseInt('rem120px')  // 字符串转换后变为 NaN
parseInt(undefined)  // undefined 转换后变为 NaN
parseInt(null)  // 转换后为0
parseInt(true)  // 布尔型转换后变为 1 或 0 
// 转换为浮点型
parseFloat(num);
parseFloat(3);  // 还是输出3,不会自带小数点,3.0也是一样
// 强制转换
Number(num);
// 隐式转换,可以用 - * / (加号正能用作正负值将字符串转为数字型,如果用在变量后边则变为拼接字符串)
console.log(+'100')
console.log('123' - 120);
console.log('t' - 120);  // 输出 NaN

3.2.7.4 转换为布尔型

代表空、否定的值都会被转换为 false,如:0,'',NaN,null,undefined 其余值都会被转换为 true

Boolen('abc');  // 返回 True
Boolean(0);  // 返回 False

3.3 运算符

表达式:任何能代表值的式子

var a = 10, b=20;
var c = a + b; // a + b 就是表达式

3.3.1 算数运算符

+ - * / %

浮点数运算精度问题,尽量避免用浮点数直接进行运算

console.log(0.1 + 0.2);  // 0.30000000000000004
console.log(0.07 * 100);  // 7.000000000000001
var num = 0.1 + 0.2;
console.log(num == 0.3); // false

3.3.2 递增递减运算符

++i;  // 前置递增(先自加后返回)
--i;  // 前置递减
var i = 1;
console.log(++i + 10);  // 11 (先自加,然后参与运算)
i++;  // 后置递增(先返回值,后自增)
i--;  // 后置递减
var i = 1;
console.log(i++ + 10);  // 20 (先运算,后自加)
console.log(i);  // 2

前置后置递增进阶:

var e = 10;
var f = e++ + ++e;
consolo.log(f);  // 22(e++ 返回 10,然后e自增为11,++e 返回12)
目录
相关文章
|
1月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
324 2
|
19天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
18天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
29 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
27天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
67 10
|
24天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
1月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
1月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
25 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
480 1
|
1月前
|
Web App开发 JSON JavaScript
深入浅出:Node.js后端开发入门与实践
【10月更文挑战第4天】在这个数字信息爆炸的时代,了解如何构建一个高效、稳定的后端系统对于开发者来说至关重要。本文将引导你步入Node.js的世界,通过浅显易懂的语言和逐步深入的内容组织,让你不仅理解Node.js的基本概念,还能掌握如何使用它来构建一个简单的后端服务。从安装Node.js到实现一个“Hello World”程序,再到处理HTTP请求,文章将带你一步步走进Node.js的大门。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开一扇通往后端开发新世界的大门。