JavaScript.01[基础入门]

简介: JavaScript.01[基础入门]

一.javaScript导读

1.1 web网页标准

  Html,css,javaScript 就像一个大蛋糕一样。

  • Html  是一种标记语言。
  • css  是一种样式规则语言。
  • JavaScript  是一种脚本语言。

1.2 JavaScript

  1.JavaScript主要用于Html的页面中,嵌入在Html的源码中。

   2.JavaScript是因特网上最流行的脚本语言,它存在于全世界所有的web浏览器中,能够增强用户与web站点和web应用程序之间的应用。

   3.Js是弱类型语言,没有类型声明,它的变量不必具有一个明确的类型。

   4.Js是脚本语言。能够用来编程的并且直接执行源代码的语言,就是脚本语言。

   5.JS也是解释性的语言。

   6.JS是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。

   7.HTML5的出现更是突出了JavaScript的重要性。

1.3 JavaScript的历史

   

  • JavaScript 最初被称为 LiveScript,由 Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登·艾奇(Brendan Eich)在 1995 年开发(这哥们在两周之内设计出了JavaScript语言。你没看错,这哥们只用了10天时间。)。在 Netscape 与 Sun(一家互联网公司,全称为“Sun Microsystems”,现已被甲骨文公司收购)合作之后将其更名为了 JavaScript。

正在上传…重新上传取消

布兰登·艾奇, JavaScript创始人

   

  • 之所以将 LiveScript 更名为 JavaScript,是因为 JavaScript 是受 Java 的启发而设计的,因此在语法上它们有很多相似之处 ,JavaScript 中的许多命名规范也都借鉴自 Java,还有一个原因就是为了营销,蹭 Java 的热度。
  • 在JavaScript后微软和Nombas也分别开发了JScript和ScriptEase来约束JavaScript。
  1. 5 JavaScript的组成

       ECMAScript,Bom,Dom

        总结JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效

二.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 进行访问。

  • getElementById()
  1. 是document的页面对象。

    2. getElementById 是 document 的方法,通过传递的参数(id字符串),是一个标签的id值。可以返回的该元素对象

三、ECMAScript

3.1 变量

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 输入存储变量

 

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

3.1.5 布尔型

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

3.1.6 undefined 未定义

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

   

  • 变量被声明了,但没有赋值时,就等于undefined。
  • 调用函数时,应该提供的参数没有提供,该参数等于undefined。
  • 对象没有赋值的属性,该属性的值为undefined。
  • 函数没有返回值时,默认返回undefined。

3.1.6 if分支结构

单分支结构

 

 if (条件表达式) {
     // 执行语句
    }
     // 其他代码

 双向分支

  if (条件表达式) {
    // 执行语句
   } else {
    // 执行语句
   }
   // 其他代码

 多分支结构

 if (条件表达式1) {
    // 执行语句1
    } else if (条件表达式2) {
    // 执行语句2
     } else {
    // 执行语句3
     }
      // 其他代码

3.1.5 三元运算符

 如果条件表达式结果为真,则返回表达式1,的值,否则返回表达式2的值

3.1.6 Switch

 switch(表达式){
    case value1:
        // 执行语句1
        break;
    case value2:
        // 执行语句2
        break;
    default:
        // 如果无条件满足,最终执行语句
}

3.2 循环结构

3.2.1 for 循环

   

for(初始化变量; 条件表达式; 操作表达式){
    // 循环体
}

// 初始化变量: 用 var 声明的一个普通变量,通常用于计数器使用

// 条件表达式: 用来判断每一次循环是否继续执行,是终止的条件

// 操作表达式: 是每次循环最后执行的代码,经常用于计数器变量的更新(递增或递减)

3.2.2 嵌套循环

 

 for (外层循环初始化变量; 外层循环表条件达式; 外层操作表达式){
    for(内层循环初始化变量; 内层循环表条件达式; 内层操作表达式){
        // 循环代码
    }
}

    如果外部循环循环一次,内部循环执行全部

3.2.3 while 循环

  while(条件表达式){
    // 循环体
   }

3.2.4 do while 循环

 

do {
    // 循环体
    } while(条件表达式))

3.2.5 continue 和 break

  • break 关键字用于直接跳出循环
  • continue 关键字用于立即跳出本次循环,进入下一次循环

3.3 数组    

 数组可以把一组相关的数据一起存放,并提供方便的访问方式。

3.3.1 创建数组

 

// 利用对象创建数组

var arr = new Array();

// 利用 [] 快捷创建数组

var arr = [];
var arr = [1, 2, 3, 'Pink', True];

3.3.2  访问数组元素

 数组可以通过索引来访问、设置、修改对应的数组元素,可以通过 “数组名[索引]“ 的方式来获取数组中的元素。

var arr1 = ['张三', '李四', '王五', '淑芬'];
// 索引号:   0       1      2      3
console.log(arr1);  // 输出整个数组所有元素
console.log(arr1[0]);  // 使用 数组名[索引号] 获取数组数组内指定元素的值

3.3.3 遍历数组

arr= ['a', 'b', 'c', 'd'];
for (var i = 0; i <= 3; i++) {
    console.log(arr[i]);
}

3.3.4 数组长度属性length

arr= ['a', 'b', 'c', 'd'];
console.log(arr.length);  // 输出4

利用length添加性的数组元素

 

arr = ["a", "b", "c", "d"];
arr[arr.length] = 'e';
console.log(arr[arr.length - 1]);
// 输出结果
e

3.3.5冒泡排序

var arr = [5, 4, 3, 2, 1];
for (var i = 0; i < arr.length - 1; i++) { // 外层循环
    for (var j = 0; j <= arr.length - i - 1; j++) {
        if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}
console.log(arr);

3.4 函数

3.4.1 声明函数

// 声明函数
function 函数名(){
    // 函数内部代码,又称为函数体
}
// 调用函数
函数名();  

3.5 作用域

全局变量:

  • 变量在</code>标签之内,或者是一个单独js文件<br /></li><li>如果在函数内部没有声明的变量也属于全局变量(即在函数内部可以使用外部的变量)<br /></li><li>浏览器关闭才会销毁<br /></li></ul><div>局部变量:</div><ul><li>变量声明在函数内部<br /></li><li>函数的形参也可以看做是局部变量<br /></li><li>函数执行完毕就会销毁<br /></li></ul><div>链式作用域:</div><ul><li>函数内部可以调用父集中的变量</li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22var%20num%20%3D%2010%3B%5Cnfunction%20fn()%7B%5Cn%20%20%20%20var%20num%20%3D%2020%3B%5Cn%20%20%20%20%5Cn%20%20%20%20function%20fun()%7B%5Cn%20%20%20%20%20%20%20%20console.log(num)%3B%20%20%2F%2F%20%E9%93%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F%EF%BC%8C%E6%89%BE%E7%88%B6%E9%9B%86%E4%B8%AD%E7%9A%84%E5%8F%98%E9%87%8F%EF%BC%8C%E5%A6%82%E6%9E%9C%E6%B2%A1%E6%9C%89%E5%86%8D%E6%89%BE%E4%B8%8A%E7%BA%A7%5Cn%20%20%20%20%7D%5Cn%7D%22%2C%22id%22%3A%224q5WJ%22%7D"></div><div id="__reading__mode__content_end_mark_container_id" style="background-color: #FCFCFC;"><br /></div>
目录
相关文章
|
21天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
141 2
|
1天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
10天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
34 10
|
7天前
|
数据采集 存储 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前端开发
|
24天前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
25天前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
19 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
347 1
|
29天前
|
Web App开发 JSON JavaScript
深入浅出:Node.js后端开发入门与实践
【10月更文挑战第4天】在这个数字信息爆炸的时代,了解如何构建一个高效、稳定的后端系统对于开发者来说至关重要。本文将引导你步入Node.js的世界,通过浅显易懂的语言和逐步深入的内容组织,让你不仅理解Node.js的基本概念,还能掌握如何使用它来构建一个简单的后端服务。从安装Node.js到实现一个“Hello World”程序,再到处理HTTP请求,文章将带你一步步走进Node.js的大门。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开一扇通往后端开发新世界的大门。
|
1月前
|
前端开发 JavaScript 安全
JavaScript代码混淆入门
JavaScript代码混淆是Web应用安全防护的重要一环,通过一系列技术手段提高代码的防护能力。正确应用混淆策略不仅能有效阻止或延缓恶意攻击,还能在一定程度上保护开发者的核心技术和商业秘密。然而,需要注意的是,混淆并非绝对安全,应将其视为整体安全策略的一部分,结合其他防御措施共同构建坚固的安全防线。
56 0