HTML基础之JS
HTML中的三把利器的JS 又称为JavaScript,看着好像和Java有点联系,实际上他和java半毛钱关系都没有,JavaScript和我们学习的Python、Go、Java、C++等,都是一种独立的语言,Python的解释器有Python2.7、Python3.x,浏览器具有解释JavaScript的功能,所以它才是HTML的三把利器之一。
在HTML中可以将JavaScript/JS的代码写在head中,被script标签所包裹,当浏览器解释HTML时,遇到style标签时,按照CSS规则解释,遇到Script标签时,按照JavaScript的语法规则解释。
引入JavaScript代码,类似于Python的import
<script src="public.js" type="text/javascript"></script>
head中引入JS与body中引入JS区别
html代码从上而下解析,如果在head中引入JS,影响页面打开的速度,存在风险,所以通常放在htmlbody的最下方,这样页面内容先展示,最后在加载JS。注:写在最下面要有底线,写在body内部的最底下。
注释
单行注释通过 // 多行通过 /* */
JS变量
name = 'csf'; // 默认全局变量
function func() {
var name = 'chenshifeng'; // 局部变量
}
JS基本数据类型(JavaScript 声明数据类型通过new)
字符串
//定义字符串
var str = '你开心就好!';
var name = '尘世风';
// 字符串的拼接
var name_str = name+str;
//字符串操作
str = '尘世风'
str.charAt(0) 根据角标获取字符串中的某一个字符 char字符
str.substring(1,3) 根据角标获取 字符串子序列 大于等于x 小于y
str.length 获取字符串长度
str.concat('是测试工程师') 拼接字符串
str.indexOf('测试') 获取子序列的位置
str.slice(0,1) 切片 start end
str.toLowerCase() 变更为小写
str.toUpperCase() 变更大写
str.split('是',1) 切片 返回数组 参数2 为取分割后数组的前x个元素 数字类型(JavaScript 只有一种数字类型。数字可以带小数点,也可以不带) var age = 18;
var score = 89.22;
number = '18';
// 字符串转
var n = parseInt(number);
// 转换成小数
f =parseFloat(number)
布尔类型(true 或 false)
var t = true; var f = false;
数组类型(就是Python的列表)
// 第一种创建方式 var list = new Array();
list[0] = '尘世风';
list[1] = '90后'; // 第二种创建方式
var list2 = new Array('尘世风','90后'); // 第三种创建方式
var list3 = ['尘世风','90后']; 数组操作
var list3 = ['尘世风','90后'];
list3.length 数组的长度
list3.push('dsx') 尾部追啊参数
list3.shift() 头部获取一个元素 并删除该元素
list3.pop() 尾部获取一个元素 并删除该元素
list3.unshift('dsx') 头部插入一个数据
list3.splice(start, deleteCount, value) 插入、删除或替换数组的元素
list3.splice(n,0,val) 指定位置插入元素
list3.splice(n,1,val) 指定位置替换元素
list3.splice(n,1) 指定位置删除元素
list3.slice(1,2) 切片;
list3.reverse() 反转
list3.join('-') 将数组根据分割符拼接成字符串
list3.concat(['abc']) 数组与数组拼接
list3.sort() 排序
对象类型(等同于Python的字典)
var dict = {name:'csf',age:18,sex:'男' };
var age = dict.age;
var name = dict['name'];
delete dict['name'] 删除
delete dict.age 删除
定时器
setInterval(alert('尘世风'),5000); //参数1 为定时器执行的功能,第二个参数为定时器工作的间隔时间 毫秒为单位 function t1() {
console.log('我是一名小测试')
}
setInterval('t1()', 5000);// 可以运行方法
JS条件判断语句
if (条件) {
执行代码块
} else if (条件) {
执行代码块
} else {
执行代码块
}; if (1 == 1) {
console.log()
} else if (1 != 1) {
console.log()
} else if (1 === 1) {
console.log()
} else if (1 !== 1) {
console.log()
} else if (1 == 1 && 2 == 2) { //and
console.log()
} else if (1 == 1 || 2 == 2) { //or
console.log()
} switch (a) {
case 1:
console.log(111);
break;
case 2:
console.log(222);
break;
default:
console.log(333)
}
JS循环语句
第一种循环
循环的是角标
tmp = ['宝马', '奔驰', '尼桑'];
tmp = '宝马奔驰尼桑';
tmp = {'宝马': 'BMW', '奔驰': 'BC'};
for (var i in tmp) {
console.log(tmp[i])
}
第二种循环
不支持字典的循环
for (var i = 0; i < 10; i++) {
console.log(tmp[i])
}
第三种循环
while (1 == 1) {
console.log(111)
}
函数定义
1、普通函数
function 函数名(形参, 形参, 形参) {
执行代码块
}
函数名(形参, 形参, 形参); 2、匿名函数 匿名函数没有名字,无法调用时找到,将整个函数当做一个参数传递
setInterval(function () {
console.log(11)
}, 5000);
3、自执行函数创建函数并且自动执行
当引入多个js文件时,函数名可能会出现重复,这时通过自执行函数,保证每一个js文件都会被解析,从而生成独立的容器,防止调用冲突
(function (name) {
console.log(name)
})('csf');
作用域
Python的作用域是以空格作为作用域的,其他语言以代码块({})作为作用域的。
JavaScript是以函数作为作用域
function tmp() {
var name = 'csf';
console.log(name)
}
tmp();
console.log(name);
2、函数作用域在函数未被调用之前,已经创建
var name = 'cc';
function a() {
var name='csf';
function b() {
console.log(name);
}
return b
} var c = a();
c();
3、函数的作用域存在作用域链(代码不执行时,先生成作用域链)
当函数嵌套函数时,每一个函数为一个作用域,多层就叫做作用域链,查找遵循作用域链规则
function outer() {
name = 'nn';
function inner() {
var name = 'ii'
console.log('in', name)
} console.log('out', name);
inner()
}
outer();
函数不调用时,只生成作用域,当调用时遵循作用域链执行,name都为hhh
function outer() {
var name = 'nn';
function inner() {
console.log('in', name)
} var name = 'hhh';
console.log('out', name);
inner()
}
outer();
4、函数内,局部变量提前声明 JavaScript的函数在运行前会找到函数内的所有局部变量执行
var xxx;
function func() {
console.log(name);
var name = 'csf';
}
func();
面向对象
在JavaScript中,方法和类写法类似,区别方式为是否有this,如果有就可以当做是类来用
JavaScript的类默认就拥有了Python的构造函数__init__
function Foo(name) {
this.name = name;
}
创建对象时JavaScript需要用到new关键字来创建对象
var obj = new Foo('csf');
console.log(obj.name);
类中定义方法,虽然可以用,但是在多个实例时存在重复实例方法,浪费资源
创建对象时,say每次创建对象,都会创意一个say的方法。
function Foo1(name) {
this.name = name;
this.say = function () {
console.log(this.name)
}
}
var obj1 = new Foo1('dsx_obj1');
obj1.say();
完善类的定义
function Foo2(name) {
this.name = name
}
// 类的原型,将共用的的方法抽出来,当在实例化后,只创建了一个叫做Foo2的对象,对象内只有name,在调用方法时先在Foo2中找,没有找到,会在去原型中找
// 是否有该方法。有执行,没有就报错
Foo2.prototype = {
say: function () {
console.log(this.name)
}
};
var obj2 = new Foo2('csf_obj2');
obj2.say();
序列化
JSON.stringify(obj) //序列化
JSON.parse(str) //反序列化
转义
转义中文或特殊字符
//1、在标准的url的规范中是不允许出现中文字符或某些特殊字符的,所以要进行转义
//2、& 代表参数的链接,如果就是想传& 给后端那么必须转义
decodeURI(url) //URl中未转义的字符
decodeURIComponent(url) //URI组件中的未转义字符
encodeURI(url) //URI中的转义字符
encodeURIComponent(url) //转义URI组件中的字符 //字符串转义
var name='尘世风'
escape(name) //对字符串转义
unescape(name) //转义字符
HTML基础之JS的更多相关文章
- 前端总结·基础篇·JS(一)五大数据类型之字符串(String)
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(二)补充 前端总结·基础篇·JS(一)五大数据类型之字符串(String) 目录 这是& ...
- 前端总结·基础篇·JS(二)数组深拷贝、去重以及字符串反序和数组(Array)
目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...
- 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 前端总结·基础篇·JS(四)异步请求及跨域方案
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 基础常用JS函数和语法
100多个基础常用JS函数和语法集合大全 来源:http://www.cnblogs.com/hnyei/p/4605103.html 网站特效离不开脚本,javascript是最常用的脚本语言,我 ...
- 前端总结·基础篇·JS(一)原型、原型链、构造函数和字符串(String)
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 【JavaScript基础】Js的定时器(你想看的原理也在哟)
[JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...
- 100多个基础常用JS函数和语法集合大全
网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为//3.传统 ...
- JavaScript基础15——js的DOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 编程基础学习JS的入门教程
将JavaScript 插入网页的方法 使用<script>标签在网页中插入Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中 ...
随机推荐
- OneAPM NI 基于旁路镜像数据的真实用户体验监控
在这个应用无处不在的时代,一次网络购物,一次网络银行交易,一次网络保险的购买,一次春运车票的购买,一次重要工作邮件的收发中出现的延时,卡顿对企业都可能意味着用户忠诚度下降,真金白银的损失. 因而感知真 ...
- 文档撰写思路与排版(hadoop)
这几天在写项目提交的几个报告,写完回想了一下,在写作框架确定与排版上浪费了不少时间,特此总结一下思路. 这个写完回家过年了....emmmm 1. 定好大标题框架,使用自动添加序号,先不着急修改样式 ...
- C#实现复制文件夹中文件到另一个文件夹的方法
private void CopyDir(string srcPath, string aimPath) { try { // 检查目标目录是否以目录分割字符结束如果不是则添加 if (aimPath ...
- 16. 窗口函数 (Window Function) 的使用
从SQL Server 2005起,SQL Server开始支持窗口函数 (Window Function),以及到SQL Server 2012,窗口函数功能增强,目前为止支持以下几种窗口函数: 1 ...
- 使用 jekyll + github pages 搭建个人博客
1. 新建 github.io 项目 其实 github pages 有两个用途,大家可以在官方网页看到.其中一个是作为个人/组织的主页(每个账号只能有一个),另一个是作为 github 项目的项目主 ...
- 卷积神经网络入门:LeNet5(手写体数字识别)详解
第一张图包括8层LeNet5卷积神经网络的结构图,以及其中最复杂的一层S2到C3的结构处理示意图. 第二张图及第三张图是用tensorflow重写LeNet5网络及其注释. 这是原始的LeNet5网络 ...
- python 使用csv 文件写入 出现多余空行数据解决方案
因为csv.writerow() 方法会造成读取时每条数据后多一条空数据 解决方案如下: 分为两种情况 python2 和 python3 先说python2版本 with open('xxx.csv ...
- 张高兴的 .NET Core IoT 入门指南:(一)环境配置、Blink、部署
如何在 Raspberry Pi 的 Raspbian 上构建使用 GPIO 引脚的 IoT 程序?你可能会回答使用 C++ 或 Python 去访问 Raspberry Pi 的引脚.现在,C# 程 ...
- 9.算法之顺序、二分、hash查找
一.查找/搜索 - 我们现在把注意力转向计算中经常出现的一些问题,即搜索或查找的问题.搜索是在元素集合中查找特定元素的算法过程.搜索通常对于元素是否存在返回 True 或 False.有时它可能返回元 ...
- [Message123] JMS 与 MQ
https://www.cnblogs.com/steven520213/p/6810369.html JMS的队列消息传递过程如下图(消费者与生产者): JMS的主题消息传递过程如下图(发布/订阅) ...