Web前端 Javascript笔记1

为什么学习 JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

  1. HTML 定义了网页的内容
  2. CSS 描述了网页的布局
  3. JavaScript 控制了网页的行为

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript是弱数据语言

JavaScript 用法

  • HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
  • Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中

1、<head> 中的 JavaScript 函数 

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

2、<body> 中的 JavaScript 函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//表达式,表达式最后都会算出一个值//语句</script>
</body>
</html>

3、 外部的 JavaScript

可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js

<!DOCTYPE html>
<html>
<body>
<script src="xxx.js"></script>
</body>
</html>

JavaScript 输出

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。
  • 括号里面可以识别html的标签

window.alert() ，window可以忽略不写 

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1><p>我的第一个段落。</p><script>window.alert(5 + 6);
</script></body>
</html>

 document.write() 

<!DOCTYPE html><html>
<body><h1>我的第一个 Web 页面</h1><p>我的第一个段落。</p><script>document.write(Date());
</script></body>
</html>

innerHTML

<!DOCTYPE html><html>
<body><h1>我的第一个 Web 页面</h1><p id="demo">我的第一个段落</p><script>document.getElementById("demo").innerHTML = "段落已修改。";
</script></body>
</html>

console.log() 

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
let c=5;
console.log(c);
</script></body>
</html>

 JavaScript 注释

单行注释是以"//"开头的句子

多行注释以 /* 开始，以 */ 结尾。

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>//我是JavaScript注释/*多行注释多行注释多行注释*/</script><!--我是一般网页注释--></body>
</html>

JavaScript 字母大小写

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时，请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样，变量 myVariable 与 MyVariable 也是不同的

JavaScript声明变量

表达式,表达式最后都会算出一个值

JavaScript 使用关键字 var/let 来定义变量， 使用等号来为变量赋值

变量赋值：let /var 变量名=值 

var允许重复声明，而let不允许重复声明,基于let等重新声明就会报错

  • let声明的变量不可以在声明之前进行使用，但是var可以，这是不合理的，不合适由上至下运行代码
  • var存在变量提升的问题
  • var不存在块级作用域

let的出现是为了解决var的问题

console.log(1)  // => 这行代码就已经不会执行了
let a = 12
console.log(a)
let a = 13      // => 此行出错：SyntaxError: Identifier 'a' has already been declared
console.log(a)
console.log(a)
let a = 13
var a = 12  // => SyntaxError: Identifier 'a' has already been declared
console.log(a)

JavaScript 变量（存储数据的容器）

JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

int a=123   a是容器，123是数据 

  • 命名里具有数字、字母、下划线 $,不以数字开头
  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）
  • 不能使用关键字保留字

  • js严格区分字母的大小写，html不区分大小写

  • 起名最好具有意义的

    遵循小驼峰命名法：findAgeByNmae

JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

  • 其中NaN较为特殊，js规定它与任何数据比较均为false，包括其本身 
console.log(NaN == NaN) // false
console.log(NaN == 1) // false
  •  typeof()判断数据类型
  • 引用类型可以看作是数组啊什么的，与+运算符基本一致，需注意当与引用类型+时是看做字符串的拼接，但是-运算符只会视为计算，故与引用类型-时，只会返回NaN

JavaScript可以用强制类型转换 

1、隐式转换：

当运算符两端的数据类型不一致，会触发隐式转换

①、有字符串的时候：

console.log("22"+11) //2211      若是加号两边有一边是字符串，加号会把其他数据类型变成字符串

console.log("21"-11) //10       除了加号，其余其余运算符会把字符串转换成数字类型

②、没有字符串的时候:

非Number数据先调用Number()转成数字 再进行运算

Boolean中true为1，false为0

Null强制转换后为0

console.log(1 + true) // 2        console.log(1 + null) // 1

console.log(1 + false) // 1        console.log(1 + undefined) // NaN

2、显示转换

1、Number()：

Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN

console.log(Number("345678pp"))//NaN
console.log(Number("345678"))//345678

如果该值无法转换为合法数字，则返回 NaN 

 console.log(true)//1console.log(False)//0console.log(new Date())//1712857336953console.log( "999")//999console.log( "999 888")//NaN

2、parseInt():

  • 如果第一个字符是数字,会解析直到遇到非数字结束
  • 如果第一个字符不是数字或者符号就返回NaN.
  • 允许前导和尾随空格。
console.log(parseInt("345678upp"))//345678
console.log(parseInt("upp3"))//NaN

 如果字符串以 "0x" 开头，则基数为 16（十六进制）

  • 如果字符串以 "0" 开头，则基数为 8（八进制）。此特性已弃用
var a = parseInt("10") + "<br>";//10var b = parseInt("10.00") + "<br>";//10var c = parseInt("10.33") + "<br>";//10var d = parseInt("34 45 66") + "<br>";//34var e = parseInt("   60   ") + "<br>";//60var f = parseInt("40 years") + "<br>";//40var g = parseInt("He was 40") + "<br>";//NaNvar h = parseInt("10", 10)+ "<br>";//10var i = parseInt("010")+ "<br>";//10var j = parseInt("10", 8)+ "<br>";//8var k = parseInt("0x10")+ "<br>";//16var l = parseInt("10", 16)+ "<br>";//16

 3、parseFloat() 

  • 此函数确定指定字符串中的第一个字符是否为数字。如果是，它会解析字符串直到到达数字的末尾，并将数字作为数字而不是字符串返回。
  • 注释：如果第一个字符不能转换为数字，parseFloat() 返回 NaN。

  • 允许前导和尾随空格。

console.log(parseFloat("10"))//10
console.log(parseFloat("10。00"))//10
console.log(parseFloat("10.33"))//10.33
console.log(parseFloat("34 45 66"))//34
console.log(parseFloat("   60   "))//60
console.log(parseFloat("40 years"))//40
console.log(parseFloat("He was 40 "))//NaNconsole.log(parseFloat(8))//8

 4、字符串转化

String（）

String（Boolean(0)）//false
String（Boolean(1)）//true
String（new Date()）//Fri Apr 12 2024 01:48:15 GMT+0800 (中国标准时间)
string("12345")//12345
string (1234)//1234

toString()

变量.toString(进制)

let num = 15;
console.log(num.toString())//15

 不同进制

var num = 15;
var a = num.toString();//15
var b = num.toString(2);//1111
var c = num.toString(8);17
var d = num.toString(16);//f

js d的符号 

算数运算符： + - * / %
赋值运算符： += -= *= /= %= 

比较运算符：< > <= >= == === !==

2=="2" true,只会判断值是否相同
2==="2" false 会判断数据类型与值是否会相同

=== 判断两边数据是否全等，即数据类型与值均相等,而隐式转换是在两者数据类型不同时才触发的。而 == 只判断值是否相等

console.log([] == []) // false，返回false，因为引用数据类型比较的是地址
console.log([] == {}) // false
console.log([] == true) // false
console.log([1,2] == "1,2") // true
console.log([1] == 1) // true

String 中的内容为字母、符号等编码

若为等长字母

console.log("a" > "b") // false

若为不等长字母,比较同位置字母大小，根据ACSII码直至做出判断

console.log("ab" > "b") // false
console.log("abc" > "abb") // true

符号同理，都是根据ACSII码进行判断

console.log(":" > "?")//false

一元运算符：

i++   赋值运算符的优先级大于，先赋值运算，
++i  前加加>赋值运算符，先加加

let a=2
let k=a++
console.log(a,k)
let j=++k
console.log(k,j)

运行结果：

3   2

3   3 

逻辑运算符：&& || ！

JavaScript流程控制

  //顺序、选择，循环

        //顺序：代码自上而下，从左到右

        //选择（分支）：面对不同条件，来执行不同的代码

        //条件只要最终返回的是布尔值就好了       

1、条件选择

//if(条件){

            //满足条件时所执行的代码

        //}

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let age = Number(prompt("enter the age="))if(age>=18){console.log("adault!!!!")document.write("adault!!!!")}else{document.write("<h1>unadault!!!!</h1>")}</script>
</body>
</html>

 多条件

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let t = Number(prompt("enter the time="))if(t<=4 &&t>=0){document.write(`现在是凌晨${t}点`)}else if(t>4 &&t<=11){document.write(`现在是上午${t}点`)}else if(t>11 &&t<=13){document.write(`现在是中午${t}点`)}else if(t>13 &&t<=17){document.write(`现在是下午${t}点`)}else{document.write(`现在是晚上${t}点`)}</script>
</body>

 //三目运算符：条件？满足条件时执行的的代码：不满足条件时执行的代码 

   <script>//let a=21//age>18?document.write("成年了"):document.write("未成年")let shu = Number(prompt("enter the time="))shu>10?document.write(`${shu}`):alert("0"+shu)</script>

练习 

    <script>let y=Number(prompt("请输入年份以此判断是闰年还是平年="))if((y%4==0 &&y%100!=0)|| y%400==0){document.write(`<h1>佳人们${y}是闰年！！</h1>`)}else{document.write(`<h1>佳人们${y}是平年！！</h1>`)}</script>

2、循环

 while循环

       /* let i=0
         while(i<=10){//终止条件
             //初始值变化
            document.write(i)
             i++
         }*/

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let sum=0let i=0while (i<=100){sum+=ii++}document.write(sum)let s=0//打印偶数和let j=0while(j<=100){if(j%2==0){s+=j}else{continue}j=j+1}document.write("<br/>"+s)//break,continue</script>
</body>
</html>

for循环

    //for（声明临时变量；循环条件；变化值{

        //}

        // for(let i=1;i<=100;i++){

        //     document.write("-"+2)

        // }

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>s=0for(let i=1;i<=100;i++){if(i%2===0){s+=i}}</script>
</body>
</html>

do while 语句 

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>let i=1do{document.write("hello jjss")i++}while(i<1)</script>
</body>
</html>

嵌套循环
九九乘法表：

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>span{text-align: center;height: 50px;width: 100px;line-height: 50px;background-color: pink;border-radius: 10px;display: inline-block;margin: 2px;}</style>
</head>
<body><script>for(let i=1;i<=9;i++){for(let j=1;j<=i;j++){document.write(`<span>${j}*${i}=${j*i}</span>`)}document.write("<br/>")}}</script></body>
</html>

3、switch语句

switch(n)
{case 1:执行代码块 1break;case 2:执行代码块 2break;default:与 case 1 和 case 2 不同时执行的代码
}
var d=new Date().getDay();
switch (d)
{case 6:x="今天是星期六";break;case 0:x="今天是星期日";break;default:x="期待周末";
}
document.getElementById("demo").innerHTML=x;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/620180.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ssm050助学贷款+jsp

ssm050助学贷款+jsp

助学贷款管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本助学贷款管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短…
阅读更多...
噪音日冷知识：你的耳朵能承受多大的噪音？降噪耳机真的有用吗？

噪音日冷知识：你的耳朵能承受多大的噪音？降噪耳机真的有用吗？

分贝——是对人类能听到的声音大小的一种数值化、可视化的描述。分贝数值越大&#xff0c;表示声音越大。 我们每天都能听到各种各样的声音&#xff0c;但你有关注过声音大小背后的意义吗&#xff1f;4月16日是国际噪音日&#xff0c;值此之际&#xff0c;带你了解下有关“声音…
阅读更多...
第十届 蓝桥杯 单片机设计与开发项目 省赛

第十届 蓝桥杯 单片机设计与开发项目 省赛

第十届 蓝桥杯 单片机设计与开发项目 省赛 输入&#xff1a; 频率信号输入模拟电压输入 输出&#xff08;包含各种显示功能&#xff09;&#xff1a; LED显示SEG显示DAC输出 01 数码管显示问题&#xff1a;数据类型 bit Seg_Disp_Mode;//0-频率显示界面 1-电压显示界面 un…
阅读更多...
OpenHarmony南向开发案例：【智能垃圾桶】

OpenHarmony南向开发案例：【智能垃圾桶】

样例简介 智能垃圾桶可以通过数字管家应用来监测垃圾桶当前可用容量&#xff0c;提醒主人及时处理垃圾&#xff1b;通过日程管家可以实现和其他智能设备联动。 核心组件位置功能距离传感器置于垃圾桶盖内侧感应垃圾量红外传感器置于垃圾桶前端感应是否有人靠近光敏电阻开发板…
阅读更多...
【数据结构】第三节：单链表

【数据结构】第三节：单链表

前言 本篇要求掌握的C语言基础知识&#xff1a;指针、结构体 目录 前言 单链表 概念 对比链表和顺序表 创建链表 实现单链表 准备工作 打印链表 创建节点并初始化 尾插 二级指针的调用 尾插代码 头插 尾删 头删 查找&#xff08;返回节点&#xff09; 在指定位…
阅读更多...
Java相关的定时任务

Java相关的定时任务

就现在而言&#xff0c;关于定时任务有各种各样的架构&#xff1a;java 定时器类【Timer】&#xff0c;spring定时器类【Scheduled】&#xff0c;quartz分布式定时器类&#xff0c;xxl-job分布式任务调度平台。xxl-job是一款轻量级定时任务可以分布式部署的调度平台。很多大的公…
阅读更多...
设计模式之观察者模式（上）

设计模式之观察者模式（上）

观察者模式 1&#xff09;概述 1.定义 定义对象之间的一种一对多依赖关系&#xff0c;使得每当一个对象状态发生改变时&#xff0c;其相关依赖对象皆得到通知并被自动更新。 观察者模式的别名包括发布-订阅&#xff08;Publish/Subscribe&#xff09;模式、模型-视图&#…
阅读更多...
001-谷粒商城-微服务剖析

001-谷粒商城-微服务剖析

1、架构图 还是很强的&#xff0c;该有的都有 2、微服务模块 SpringCloudAlibaba组件包括 SentinelNacosRocketMQSeata 搭配SpringCloudAlibaba组件 OpenFeignGateWayRibbn gateway使用了SpringWebFlux&#xff0c;前几天研究到&#xff0c;为什么springboot不直接使用Spri…
阅读更多...
小样本计数网络FamNet(Learning To Count Everything)

小样本计数网络FamNet(Learning To Count Everything)

小样本计数网络FamNet(Learning To Count Everything) 大多数计数方法都仅仅针对一类特定的物体&#xff0c;如人群计数、汽车计数、动物计数等。一些方法可以进行多类物体的计数&#xff0c;但是training set中的类别和test set中的类别必须是相同的。 为了增加计数方法的可拓…
阅读更多...
speccpu2017安装与使用

speccpu2017安装与使用

国产化桌面下Speccpu2017安装与使用 1、 安装依赖库 安装speccpu2017前需要安装依赖包&#xff0c;通过终端命令对依赖包进行安装 sudo apt-get install gcc g gfortran &#xff08;以上是已经安装好的&#xff09; 注&#xff1a;若安装不上&#xff0c;需替换/etc/apt下的s…
阅读更多...
JMeter入门教程 —— 事务！

JMeter入门教程 —— 事务！

简介&#xff1a; JMeter中事务的基本介绍 1.任务背景 JMeter中的事务是通过事务控制器实现的。&#xff0c;为了衡量服务器对某一个或一系列操作处理的响应时间&#xff0c;需要定义事务。下面我们详细介绍在JMeter中如何使用事务 2.任务目标 掌握基于JMeter性能测试脚本开…
阅读更多...
win11黑屏无法唤醒的解决教程,升级win11后黑屏无法唤醒

win11黑屏无法唤醒的解决教程,升级win11后黑屏无法唤醒

通常，电脑开启了睡眠模式后，我们只要不使用电脑一段时间，系统就会自动进入睡眠状态，这样可以有效节约电脑消耗。所以，当你升级win11后，系统出现黑屏了，那么可能是处于睡眠状态中，多点击几次鼠标就能唤醒系统了。但是，也有用户遇到无法唤醒的情况，是睡眠模式的问题还是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023