初探JavaScript魅力1

最新推荐文章于 2024-10-16 16:26:58 发布
最新推荐文章于 2024-10-16 16:26:58 发布
阅读量99 收藏
点赞数
文章标签： javascript 前端 ViewUI
原文链接：https://juejin.im/post/5a320109f265da431d3cb1f0
版权

JS前置知识

什么是JS语言

javascript是一种运行在***客户端*** 的***脚本语言***

客户端：即接受服务的一端，与服务端相对应，在前端开发中，通常客户端指的就是浏览器。

脚本语言：也叫解释型语言，特点是***执行一行，解释一行，如果发现报错，代码就停止执行*** 。

javascript的三个组成部分：ECMAScript、BOM、DOM

ECMAScript：定义了javascript的语法规范。

BOM：一套操作浏览器功能的API。

DOM：一套操作页面元素的API。

script标签

书写Javascript代码有两种方式，第一种是直接在script标签中书写，第二种是将代码写在js文件中，通过script进行引入。

直接在script中书写javascript代码：

<script>
	alert("今天天气真好呀");
</script>
复制代码

通过script标签引入一个JS文件，需要指定src属性

<script src="test.js"></script>
复制代码

tips：如果script标签指定了src属性，说明是想要引入一个js文件，这个时候不能继续在script标签中写JS代码，即便写了，也不会执行。

script标签的书写位置，建议写在标签的前面。

输入输出语句

在实际开发，基本不能使用3、4、5,因为用户体验不好。

  1. console.log 控制台输出日志
  2. document.write 往页面中写入内容
  3. alert 弹框警告
  4. confirm 确认框
  5. prompt 输入框

注释

不被程序执行的代码。用于程序员标记代码，在后期的修改，以及他人的学习时有所帮助，在JS中，分为单行注释和多行注释

// 这是单行注释，只能注释一行,所有的代码均使用单行注释
/*
	这是多行注释，不能嵌套，多行注释只用来写文档说明
*/
复制代码

注释的作用：

1. 模块划分，方便代码查找和维护
2. 用于解释复杂代码的逻辑，方便维护和后期开发。
复制代码

变量

变量，可以变化的量，变量是在计算机中存储数据的一个标识符。可以把变量看成存储数据的容器。

变量与字面量：

字面量：10、20、“abc”、true这种从字面上就能看出来类型和值的量叫做字面量。

变量：可以变化的量。

变量的声明与赋值

1.变量可以同时声明并赋值。
2.先声明后赋值
3.不声明，直接赋值
4.既不声明，也不赋值
5.同时声明多个变量
复制代码

变量的命名规则与规范

命名规则（必须遵守）：
1.由字母、数字、下划线、$符号组成，开头不能是数字。
2.不能使用关键字和保留字
3.区分大小写
命名规范（建议遵守）：
1. 命名要有意义
2. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。
复制代码

变量练习

//交换两个变量的值（掌握）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  var a = 12;
  var b = 13;
  //  var tmp = a;
  //  a = b;
  //  b = tmp;

  //使用加法完成交换
  //  a += b;   // 12 + 13
  //  b = a - b;   // 12 + 13 - 13  --> b = 12
  //  a -= b;   // 12 + 13 - 12  --> 13

  //使用数组完成交换1
  //  a = [a,b];  //[12,13]
  //  b = a[0];   //b = [12,13][0] -->b = 12
  //  a = a[1];   //a = [12,13][1] -->a = 13
  
  //使用数组完成交换2
   a = [b,b=a][0];
  
  console.log("a = " + a + ",b = " + b);//a = 13   b = 12
</script>
</body>
</html>

复制代码

tips:javascript是一种弱类型语言，不管声明什么类型的变量，都是用var，并且变量的类型是可以变化的。

var age = 90;
age = "张三";
复制代码

数据类型

基本数据类型包括了：number、string、boolean、undefined、null

如何查看数据类型

使用typeof关键字查看数据类型

typeof name;
typeof(name);
复制代码

Number类型

进制

1. 十进制，我们平时使用的就是十进制，进行运算时，八进制和十六进制的值最终都会转换成十进制。
2. 八进制，0开头的数值，数值序列：0-7
3. 十六进制，0x开头的数值，数值序列：0-9A-F

进制了解即可，基本都是使用十进制，稍微了解一下进制之间的转换。
复制代码

浮点数

科学计数法：

var num = 5e+3;
var num1 = 5e-2;
//如何表示0.003和20000？
复制代码

浮点数的精度问题：

0.1 + 0.2 = ? // 0.30000000000000004
0.07 * 100 = ? //7.000000000000001
复制代码

浮点数在运算的时候会出现精度丢失的问题，因此在做比较运算的时候，尽量不要用小数进行比较。

数值范围

javascript不能表示世界上所有的数，因此在javascript中，数值大小是有一定限制的。

Number.MIN_VALUE  :5e-324
Number.MAX_VALUE  :1.7976931348623157e+308
Infinity   :正无穷
-Infinity  ：负无穷
复制代码

数值判断

1. NaN:表示一个非数值，当无法运算或者运算错误的时候，会得到一个NaN，NaN是number类型，表示一个非数值。
2. NaN不等于NaN
3. isNaN用来判断是否是一个数字，当返回true的时候，表示不是一个数字，返回false表示是一个数字。
复制代码

String类型

字面量

字符串的字面量：“abc” 、 ‘abc’ 字符串可以是双引号，也可以是单引号引起来。

字符串长度

length属性用来获取字符串的长度

var str = "abckjdlkfjd";
str.length;//字符串的长度
复制代码

字符串拼接

拼接字符串使用+号

//思考：
console.log(11 + 11);
console.log("hello" + " world");
console.log("100" + "100");
console.log("11" + 11);
复制代码
  • 两边只要有一个是字符串，那么+就是字符串拼接功能
  • 两边如果都是数字，那么就是算术功能。

boolean类型

boolean类型只有两个字面量，true和false，区分大小写。

所有类型的值都可以转化成true或者false

NaN、""、undefined、null、false、0  这6个值可以转换成false，其余的都是true。
复制代码

undefined类型与null类型

undefined表示一个声明了没有赋值的变量
null表示一个空的对象。

undefined派生自null。
undefined == null  ：true
undefined === null ：false
复制代码

类型转换

如何使用谷歌浏览器，快速的查看数据类型？

字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的，这个在调试过程中时非常有用的。

转换成字符串类型

  1. toString()
  2. String()
  3. /+ ""

转换成数值类型

  1. Number()
  2. parseInt
  3. parseFloat
  4. +num, -0等运算

转换成布尔类型

  1. Boolean
  2. !!

运算符

一元运算符

思考：
var a = 1; var b = ++a + ++a; console.log(b);    
var a = 1; var b = a++ + ++a; console.log(b);    
var a = 1; var b = a++ + a++; console.log(b);    
var a = 1; var b = ++a + a++; console.log(b);    
复制代码

逻辑运算符

&&:只要有一个值为假，结果就是假。找假值
||:只要有一个值为真，结果就是真。找真值
!:取反

## 运算符的优先级

复制代码
  1. () 优先级最高
  2. 一元运算符 ++ -- !
  3. 算数运算符 先* / % 后 + -
  4. 关系运算符 > >= < <=
  5. 相等运算符 == != === !==
  6. 逻辑运算符 先&& 后||

选择语句

if..else

//语法
if(condition) {
	statement1 
} else if (condition) { 
	statement2 
} else {
	statement3
}
复制代码

switch..case

//语法
switch (expression) {
    case value: 
        statement
        break; // break 关键字会导致代码执行流跳出 switch 语句

    case value: 
        statement
        break;
    default: 
        statement
}

复制代码

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  var day = prompt('请输入一个数字');
  var result = day % 7;

  switch(result){
    case 0:
      alert("今天星期天");
      break;
    case 1:
      alert("今天星期一");
      break;
    case 2:
      alert("今天星期二");
      break;
    case 3:
      alert("今天星期三");
      break;
    case 4:
      alert("今天星期四");
      break;
    case 5:
      alert("今天星期五");
      break;
    case 6:
      alert("今天星期六");
      break;
    default:
      alert("请输入合法的数字");
      break;
  }
</script>
</body>
</html>
复制代码

三元运算符

表达式1 ? 表达式2 : 表达式3
var sex = sex == 1 ? '男':'女';
复制代码

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  var num2 = Math.round(Math.random() * 100);
  console.log(num2);
  var num1 = prompt("请输入一个0~100的数字");
  //  if (num1 >= num2) {
//    alert("你赢了");
//  }else {
//    alert("你输了");
//  }
  //判断条件  ?  条件成立时执行的代码  ：  条件不成立时执行的代码
  num1 > num2 ? alert("你赢了") : alert("你输了");
</script>
</body>
</html>
复制代码

循环语句

while循环

while(expression) {
	statement
}
复制代码

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  var i = 0;
  var sum = 0;
//  while(true) {
//    i ++;
//    sum += i;
//    if (i == 100) {
//      break;
//    }
//  }
  
  //使用while循环计算1~100的和
  while(i <100) {
    i ++;
    sum += i;
  }
  console.log(sum);
</script>
</body>
</html>
复制代码
weixin_34413103
关注
初探JavaScript魅力（1）
weihongda666的博客
12-05 205
wu
初探Javascript魅力(1)
weixin_34310127的博客
03-07 76
转自：CSDN--http://blog.csdn.net/cherry_vicent/article/details/42120149 1、javascript是什么 根据用户的一些操作，然后来修改页面上的一些元素、属性等。 （1）HTML+CSS静态页面，JS给页面添加动的效果 （2）网页特效的原理 javascript就是修改样式 （3）编写JS的流程： 【1】布局：HT...
01 - 初探JavaScript魅力
10-10 78
网页特效原理 用JavaScript修改样式 编写JS的流程 布局：HTML+CSS 属性：确定要修改哪些属性 事件：确定用户做哪些操作（产品设计） 编写JS：在事件中，用JS来修改页面元素的样式 鼠标移入移出效果 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"&g...
初探JavaScript魅力3
weixin_34087307的博客
12-14 68
1.函数 1.1.函数的基础知识 1.1.1.为什么要使用函数 在写代码的时候，有一些常用的代码需要书写多次，如果直接复制粘贴的话，会造成大量的冗余代码，为了提高代码的重用率，提高编码效率，我们需要使用函数。函数可以用来封装一段重复的代码，只需要声明一次，就可以被多次调用。 冗余代码缺点： 1.代码重复，可阅读性差。 2.不易维护。一旦逻辑发生改变，所有的地方也都要修改。 1.1.2.函数的声...
初探JavaScript魅力-笔记
eluanshi12的博客
10-24 266
初探JavaScript魅力-01初探JavaScript魅力-01JavaScript是一门用于给网页添加功能、交互的脚本语言。<html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> #div1{ width:200px; height: 100p
初探JavaScript魅力
weixin_30390075的博客
02-26 74
<style> #div1{width:200px; height:200px; background:red;} </style> </head> <script> function setColor(color){ var oDiv=document.getElementById("div1"); oDiv.style.ba...
初探JavaScript魅力（2）
weihongda666的博客
12-07 176
wu
【JavaScript从入门到精通】第一课 初探JavaScript魅力-02
荆盼的博客
01-27 252
变量 说起变量，我们不得不提起我们有一部比较古老的电视剧叫《包青天》。包青天有一把非常厉害的宝剑叫“尚方宝剑”，见到尚方宝剑有如见到皇帝。某种程度来说，变量具有类似于尚方宝剑的特性。 我们对第一课末的代码进行如下修改： function toGreen() { var oDiv=document.getElementById("div1"); //变量 oDiv.style.width=
初探JavaScript魅力2
weixin_34365417的博客
12-27 71
1.循环语句 在JavaScript中，循环语句有三种，while、do while和for循环。 1.1. while循环 基本语法： //当满足循环条件时，执行循环体里的代码 //每执行完一次循环体的代码以后，再判断一下循环条件 //如果循环不成立时，结束循环 while(循环条件){ //循环体 } 复制代码示例代码： //计算1~100所有整数之和 var i = 0; //初...
16. WEB前端就业计划之JavaScript语言魅力初探
# 1. 认识JavaScript ## 1.1 JavaScript的起源和发展历史 JavaScript是一种由Netscape公司开发的脚本语言，最初被命名为LiveScript，后来为了更好地与Java搭配，改名为JavaScript。JavaScript最早应用于网页前端...
javascript网页特效视频教程（32集）
07-22
【】01 - 初探Javaｓｃｒｉｐｔ魅力 - 1 【】02 - 初探Javaｓｃｒｉｐｔ魅力 - 2 【】03 - 初探Javaｓｃｒｉｐｔ魅力 - 3 【】04 - 初探Javaｓｃｒｉｐｔ魅 资源太大，传百度网盘了，链接在附件中，有...
移动开发者必备工具：开源jqTouch初探
01-24
《移动开发者必备工具：开源jqTouch初探》 在当今技术日新月异的时代，移动设备的普及催生了大量针对这些平台的应用程序开发需求。尤其是苹果的iPhone、iTouch和iPad，它们引领了移动设备的新潮流。然而，苹果官方...
初探Blockly可视化编程的魅力
# 1. 认识Blockly可视化编程 ## 1.1 什么是Blockly？ 在介绍Blockly之前，我们首先需要了解什么是Blockly。Blockly是由Google开发的一种可视化编程工具，旨在帮助用户通过拖拽和连接代码块的方式来进行编程，而不...
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
m0_66584716的博客
10-11 1351
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 671
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 573
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
最新发布
源码好优多
10-16 740
请联系我获取更详细的演示视频。
如何使用Python爬虫处理JavaScript动态加载的内容？
Z_suger7的博客
10-11 855
JavaScript动态加载的内容为爬虫带来了挑战，但也提供了新的机遇。通过使用Selenium、分析API请求或Pyppeteer，我们可以有效地爬取这些动态内容。这些方法各有优势，Selenium适合模拟复杂的用户交互，API请求适合直接获取数据，而Pyppeteer则提供了更强大的JavaScript控制能力。在实际应用中，开发者应根据目标网站的特点和需求选择合适的方法。随着技术的不断发展，我们也需要不断学习和适应新的工具和方法，以保持在数据获取领域的竞争力。复制再试一次分享。
React入门 9：React Router
pingguocu3的博客
10-13 573
路由routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。以上是中文维基百科对路由的解释。通俗的来讲，把一个地方的信息传输到他想去的目的地的过程，就叫路由。
OSX Yosemite的Javascript自动化开发初探
"这篇文章主要介绍了如何使用JavaScript开发OSX应用程序，特别是在OS X Yosemite中引入的JavaScript for Automation（JXA）功能。作者指出，JavaScript替代AppleScript进行自动化任务编写提供了更舒适的编程体验。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值