js初识+简单案例

Posted coaxme

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js初识+简单案例相关的知识,希望对你有一定的参考价值。

表单提交的缺点:
(1) 表单提交默认跳转
(2) 数据传输过程中 网速较慢时 用户体验极差
(3) 无法判断提交的数据格式是否正确
所以js最初是用来做提交验证的

十天成型 (JS弱类型的语言)

javascript 是一种直译型,弱类型的脚本语言。它是一个轻量级,但功能强大的编程语言。js需要靠事件驱动,依靠其他语言,js必须在html中被引用


1.变量在声明的时候不区分数据类型
2.数字不分整型和浮点型
3.undefined在其他语言不存在,变量一般要求声明即赋值
4.结尾可以不写分号


JavaScript 控制了网页的行为

JS组成:
ECMAScript 基础语法,语法规范 1.0 2.0 3.0 5.0 6.0(ES6)
BOM Browser Object Model浏览器对象模型,提供与浏览器交互的方法和接口
DOM Document Object Model文档对象模型,提供访问和操作网页内容的方法和接口

js的三种引入方式👇
1.外部js。
注意:script标签做引入作用时,里面写东西不执行;
2.内联js。
3.内部js。

JavaScript 可以通过不同的方式来输出数据:
使用 document.write() 方法将内容写到 HTML 文档中。
使用 window.alert() 弹出警告框。
使用 console.log() 写入到浏览器的控制台。
使用 innerHTML 写入到 HTML 元素。

JS的三种打印方法(完成某个特定功能的工具)
1.弹窗打印
alert(‘xxxx’);需要用户确认
prompt("");
confirm("");
2.页面打印
document.write(‘xxxxx’);可以在页面(文档)中写入一段内容
document.write也可以识别标签。
3.控制台console打印
console.log(); console.info();console.table()等等

注意👇
document.write(hello);
报错 ReferenceError: hello is not defined
在JS中单词都要有一定的代表意义 (a.官方给定的 b.用户自定义的), 否则会报错
用法👇
document.write(“hello”);字符串(描述一段文本)
document.write(“

hello

”);
document.write(100+200); 数字(计数 计算)
document.write(true); 布尔值(true|false)
document.write(false);
	console.log()  在控制台打印一段内容(不会影响原页面)
	console.log("hello JS");
	console.log(100);
	console.log(true);
	
	alert()   警告框  弹出框
	alert("hello world");
	alert(100);

document.write中可以打印html结构,如果原样输出需要转码
 一个英文大大小的空格
 全角空格
 半角空格
©版权
&lt;<
> >

变量:存储数据的容器,方便后续继续使用

方法1.先声明再赋值(此写法只有js支持)
方法2.声明的同时赋值
方法3.一次声明多个变量并赋值

变量命名规范
(1) 由数字 大小写字母 _ 组 成 , 但 是 不 能 以 数 字 开 头 ( 2 ) 不 能 包 含 空 格 中 文 和 特 殊 字 符 ( 3 ) 不 能 使 用 关 键 字 ( 在 j s 中 已 经 有 特 殊 意 义 ) 和 保 留 字 ( 现 在 没 有 任 何 用 途 , 将 来 可 能 被 用 作 关 键 字 ) ( 4 ) 严 格 区 分 大 小 写 ( a 和 A 是 两 个 不 同 的 变 量 ) ( 5 ) 驼 峰 式 命 名 法 小 驼 峰 t o d a y I s M o n d a y 大 驼 峰 T o d a y I s M o n d a y ( 建 议 : 语 义 化 命 名 、 最 好 不 要 用 拼 音 、 驼 峰 命 名 或 下 划 线 、 组成,但是不能以数字开头 (2) 不能包含空格 中文 和特殊字符 (3) 不能使用关键字(在js中已经有特殊意义)和保留字(现在没有任何用途,将来可能被用作关键字) (4) 严格区分大小写 (a和A是两个不同的变量) (5) 驼峰式命名法 小驼峰todayIsMonday 大驼峰TodayIsMonday (建议:语义化命名、最好不要用拼音、驼峰命名或下划线、 ,(2)(3)使(js)(,)(4)(aA)(5)todayIsMondayTodayIsMonday线不要多用)

如何交换两个变量的值
1.使用第三方进行交换

JS数据的类型
1.字符串(string):双引号或单引号包起来
2.数字(number)
3.布尔值(boolean):表对错(true、false)
4.null(空对象):声明变量不赋值,就需要给null,但类型是object;获取元素获取不到也会返回null
5.undefined:声明变量不赋值,也不给空值就是undefined a.默认值也是undefined
6.数组(array)
7.对象object**

js中的两个特殊值
NaN Infinity JS中的两个特殊值(number)
1.NaN 非数字(not a number)
var a = “1a”;
var b = 2;
var c = a * b;
console.log(c, typeof NaN); // NaN,Number
2.Infinity 无穷;无限大;无限距
console.log(-1/0,typeof Infinity);

判断数据类型typeof
案例
算数运算符
+ - * / %

自增++和自减–
++a 加后取值,先执行加法运算,再取值
var a = 10;
console.log(++a);//11
console.log(a);//11
a++ 加前取值 ,先取值,再执行加法运算
var a = 10;
console.log(a++);//10
console.log(a);//11
–a, a–

案例:输入框思路👇
1.获取对象
2.绑定点击事件
2.1获取输入框的值
2.2把值转为数字
2.3进行计算
2.4把计算结果放入结果框

以上是关于js初识+简单案例的主要内容,如果未能解决你的问题,请参考以下文章

js初识+简单案例

Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段

初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段

初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段

正则表达式初识及简单的案例应用

jsp初识servlet转发转发与重定向的比较