HTML基础之JS

Posted 尘世风

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)
布尔类型(truefalsevar t = true; var f = false;

数组类型(就是Python的列表)

对象类型(等同于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循环语句

函数定义

1、普通函数
function 函数名(形参, 形参, 形参) {
    执行代码块
}
函数名(形参, 形参, 形参);
 
2、匿名函数 匿名函数没有名字,无法调用时找到,将整个函数当做一个参数传递
setInterval(function () {
    console.log(11)
}, 5000);
3、自执行函数创建函数并且自动执行
当引入多个js文件时,函数名可能会出现重复,这时通过自执行函数,保证每一个js文件都会被解析,从而生成独立的容器,防止调用冲突
(function (name) {
    console.log(name)
})(‘dsx‘);
 
作用域
Python的作用域是以函数作为作用域的,其他语言以代码块({})作为作用域的。
JavaScript是以函数作为作用域
function tmp() {
    var name = ‘dsx‘;
    console.log(name)
}
tmp();
console.log(name);
2、函数作用域在函数未被调用之前,已经创建
var name = ‘nhy‘;
function a() {
    var name=‘dsx‘;
    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(‘dsx‘);
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,在调用方法时去现在Foo中找,没有找到,会在去原型中找
是否有该方法。有执行,没有就报错
Foo2.prototype = {
    say: function () {
        console.log(this.name)
    }
};
var obj2 = new Foo2(‘dsx_obj2‘);
obj2.say();

序列化

JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化

转义

转义中文或特殊字符

以上是关于HTML基础之JS的主要内容,如果未能解决你的问题,请参考以下文章

python之基础篇——模块与包

js代码片段: utils/lcoalStorage/cookie

HTML基础之JS

JS代码片段:一个日期离现在多久了

HTML基础之JS

web自动化测试-D2-学习笔记之二(HTML基础之JS)