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


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

相关文章
|
2月前
|
开发框架 JavaScript 前端开发
使用 Node.js 和 Express 构建 Web 应用
【10月更文挑战第2天】使用 Node.js 和 Express 构建 Web 应用
|
19天前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
23天前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
37 4
|
23天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
35 2
|
2月前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
44 1
JavaScript控制台:提升Web开发技能的秘密武器
|
2月前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
111 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
36 4
|
2月前
|
设计模式 JavaScript 前端开发
浅谈JavaScript 框架在现代 Web 开发中的作用
浅谈JavaScript 框架在现代 Web 开发中的作用
48 12
|
2月前
|
存储 JavaScript 前端开发
深入探索 Vue.js:构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js:构建现代 Web 应用的利器
31 1
|
2月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用