web学习笔记之JavaScript(一)

简介: web学习笔记之JavaScript(一)

前言


当刚开始学习JavaScript时,还以为它与Java有什么密不可分的关系,其实JavaScript 与 Java 是两种完全不同的语言,借用老师的一句话就是: 它们两个就相当于雷锋和雷峰塔。

学习web,JavaScript是必不可少的一门语言,javascript 是基于对象模型和事件驱动的脚本语言,可以嵌入到 html 中。

f8661f17d35e44a0ab7ce8f34f72a308.png

在学习过程中,刷题是一个很不错的巩固方法,学完即实践,屡试不爽!


牛客网

https://www.nowcoder.com/exam/oj?page=1&tab=HTML/CSS&topicId=260&fromPut=pc_csdncpt_wlxfd_qianduan


简单介绍


JS特点


(1) 交互性:能够包含更多活跃的元素

(2) 安全性:js 不能访问本地磁盘

(3) 跨平台性:所有的浏览器都内置 js 解析器


JS 的作用


(1) js 可以动态的修改(增删)html 及 CSS 的代码

(2) js 可以动态的校验数据


JS 的组成


ECMAScript(核心) BOM(浏览器对象模型)和 DOM(文档对象模型)


JS的引入方式


1:内嵌脚本


<input type="button" value="button" onclick="alert('x')" />


2:内部脚本


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input id="btn" type="button" value="button"/>
</body>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
alert("xxx");
};
</script>
</html>


需要注意的是< script > 和 < /script > 之间的代码行包含了 JavaScript,JS的代码写哪里都可以,但是在不影响 html的情况下,越晚加载越好。


3: 外部脚本


当我们希望在若干个页面中运行 JavaScript,同时不在每个页面中写相同的脚本。可以将 JavaScript 写入一个外部文件之中,然后以 .js 为后缀保存这个文件。

外部脚本先创建一个.js 文件 ,将 js 代码写在其中,在 html 中使用< script>标签进行引入


<script type="text/javascript" src="my.js"></script>


其中: src:引入的 js 的路径

type=“text/javascript”:告知浏览器解析文件的时候使用 js 解析器解析

注意:外部的 js 文件中不能包含< script>标签。在导入外部 js 文件的< script>标签中不能在写 javascript 代码。


比如,我们要写一个js程序,它的html 部分为:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html 内容</title>
</head>
<body>
<input id="btn" type="button" value="button"/>
</body>
<script type="text/javascript" src="js内容.js"></script>
</html>


JS内容为:


window.onload = function()
{
  document.getElementById("btn").onclick = function()
  {
  alert("xxx");
  };
};


document.getElementById(“”) 返回对拥有指定id的第一个对象的引用。


JS中的alert,作用是在浏览器中弹出一个警告框。


JS的基本语法


1. 变量


javascript 中的变量与我们在 java 中的变量一样,在 javascript 中使用用 var 运算符(variable 缩写)加变量名定义的:


JavaScript 变量名称的规则:

变量对大小写敏感(y 和 Y 是两个不同的变量)

变量必须以字母或下划线或者”$”开始

变量名长度不能超过255个字符。

变量名中不允许使用空格,首个字不能为数字。

不用使用脚本语言中保留的关键字及保留符号作为变量名。


2.原始类型


原始类型,可以理解成是一个值类型。简单说,就是一个字面值,它是不可变的,例如:

number:数字类型

string:字符串类型

boolean:布尔类型

undefined:未定义,该类型只有一个值 undefined.表示的是未初始化的变量

null:空类型,该类型只有一个值 null,表示尚未存在的对象


注意:值 undefined 实际上是从值 null 派生出来的。因此 null==undefined 得到的结果是 true


对变量或值调用 typeof 运算符将返回下列值之一:


变量或值 返回值
Undefined undefined
Boolean boolean
Number number
String string
Null object


为什么 typeof 运算符对于 Null 值会返回 “object”? 这实际上是 JavaScript

最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。


3:类型转换


类型的转换:
number 和 boolean 转成 string
toString();
string 转成 number
parseInt();
parseFloat();


注意:原始类型都是伪对象 所以是可以调用方法的


4.强制转换


测试强制转换成Boolean 类型


var b1 = Boolean("");//空字符串返回 false
var b2 = Boolean("worde")//非空字符串返回 true
var b3 = Boolean("10")//非零数字返回true
var b3 = Boolean("0")//零数字返回 false
var b4 = Boolean("null")//null 返回 false
var b5 =Boolean(new object())//对象 返回true


测试强制转换成数字类型

操作 返回值
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number(“1.2”) 1.2
Number(“12”) 12
Number(“1.2.3”) NaN
Number(new objet()) NaN
Number(12) 12


对于强制转换成数字类型:

如果是纯数字的字符串的话,则直接转换成数字

如果字符串中含有非数字的内容的话,会转换成NaN

如果字符串是一个空串,或者都是空格的话,会转换成 0


测试强制转换成字符串


toString() 方法可把数组转换为字符串,并返回结果。

语法 arrayObject.toString()


var s1 = String(null);//返回 null
var sNull = null;
var s2 = sNull.toString(); //引发错误


5.引用类型


引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。从传统意义上来说,ECMAScript 并不真正具有类。ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。对象是由 new 运算符加上要实例化的对象的名字创建的


java: Object obj = new Object();

js: var obj = new Object();


6.运算符


(1) 赋值运算符 var x = 5;

(2) 判断运算符 >、<、>=、<=、!=(也可写成<>)、==(全等代表值与类型都一致)

(3) 算数运算符 +、-、×、/、%


如果一个加数是字符串的话 就进行字符串连接

如果是字符串数字在进行类似减法的运算的时候

先把字符串转换成数字然后在运算


(4) 逻辑运算符:&& || !

(5) void 运算符: < a href=“javascript:void(0);” >dianji< /a>

(6) 类型运算符:

typeof:判断数据类型

instanceof:预测数据类型

(7)三元运算符: 三元运算符和 Java 差不多,例如

var max=(num1 > num2)? num1:num2;


总结


以上就是该文章给大家带来的笔记分享,后续会有更多学习js的学习笔记,希望能和大家共同学习交流!

实践方能固真知,点击进入刷题叭~


牛客

https://www.nowcoder.com/exam/oj?page=1&tab=HTML/CSS&topicId=260&fromPut=pc_csdncpt_wlxfd_qianduan


如有不足之处,请指出,感谢!

相关文章
|
1月前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
2月前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
97 0
|
2月前
|
存储 JavaScript NoSQL
构建高效Web应用:使用Node.js和Express框架
【8月更文挑战第30天】本文将引导你了解如何使用Node.js和Express框架快速搭建一个高效的Web应用。通过实际的代码示例,我们将展示如何创建一个简单的API服务,并讨论如何利用中间件来增强应用功能。无论你是新手还是有经验的开发者,这篇文章都将为你提供有价值的见解。
|
10天前
|
数据采集 存储 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
在现代Web开发中,数据采集尤为重要,尤其在财经领域。本文以“东财股吧”为例,介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库,支持无头浏览器操作,适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies,可显著提升抓取成功率与效率,并以示例代码展示具体实现过程,为数据分析提供有力支持。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
6天前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
6天前
|
Web App开发 JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的深度整合
【9月更文挑战第28天】在现代Web开发领域,Node.js和Express框架的结合已成为打造高性能、易扩展应用的黄金组合。本文将深入探讨如何利用这一技术栈优化Web应用架构,提供具体实践指导,并分析其性能提升的内在机制。通过代码示例,我们将展示从基础搭建到高级功能的实现过程,旨在为开发者提供一条清晰的学习路径,以实现技术升级和项目效率的双重提升。
19 3
|
11天前
|
移动开发 JavaScript 数据可视化
|
25天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
6天前
|
JSON JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的完美结合
【9月更文挑战第28天】在现代Web开发中,Node.js和Express框架的结合为创建高性能、易扩展的应用提供了强有力的支持。本文将深入探讨如何利用这两种技术构建一个简单但功能强大的Web服务,同时提供代码示例以加深理解。
|
2月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
34 1
下一篇
无影云桌面