分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

html基础之js操作

发布时间:2023-09-06 02:02责任编辑:沈小雨关键词:js

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内部的最底下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<linkrel="stylesheet" href="static">-->   ##link可以引入css
   
<style></style>     ##加载其中的css样式
    <!--写在上面和写在下面的区别:-->
    <!--
影响页面的加载速度-->
    <!--<scriptsrc="s1.js" type="text/javascript"></script>-->    ####
引入js 并指定类型
</head>
<body>

<script>
    // if (1 == 2) {        #通过{}的代码块来进行分割。
    //    console.log(1111111111)   ####
打印结果
    // } else if (2 == 2) {
    //    console.log(1111111111)
    // } else {
    //    console.log(‘
最后了!‘)
    // }
    //
如果是两个等号则不判断数据类型 如果三个等号则判断数据类型
    // if (‘1‘===‘1‘){
    //    console.log(1111)
    // } else {
    //    console.log(2222)
    // }

    // switch (1){    ###
传入的参数一一对应。
    //    case 1:
    //         console.log(111);   ##
注意不同语句间加分号,也便于前端处理代码。
    //         break;     #break
最好都加上 不然会打印其他case内容。
    //    case 2:
    //         console.log(222);
    //         break;
    //    default:
    //         console.log(333);
    // }

    // var name = ‘dsx nhy‘;
    // for (var a in name){
    //    console.log(name[a]);     ###
循环角标,通过角标取值
    // }
    //
    // var list = [‘
大师兄‘,‘牛牛‘,‘安大叔‘];
    // for (var i in list){
    //    console.log(list[i])     ######
循环数组
    // }
    //
    // var dict = {‘
宝马‘: ‘BMW‘, ‘奔驰‘: ‘BC‘};
    // for (var d in dict){
    //    console.log(d);    ##
取key
    //    console.log(dict[d]);   ##
取value
    // }

    //
不支持字典的循环
    // var list = [‘
大师兄‘,‘牛牛‘,‘安大叔‘];
    // for (vari=0;i<=list.length;i++){
    //    console.log(list[i])  ###
循环数字,打印  只能循环list和字符串
    // }

    //
与python相同
    // while (1==1){
    //    console.log(1111)    ##
死循环
    // }

Js中的函数

普通函数
    // function f(name,age) {  ###
通过function来定义函数
    //    console.log(name);
    //    console.log(age);
    // }
    // f(‘dsx‘,18)


    // function f() {
    //    console.log(‘in‘+name)
    // }
    // console.log(‘out‘+name);
    // f()

    //
自执行函数
    // a=(function () {
    //    console.log(‘
自执行函数!‘)
    // });
    // a()

</script>
</body>
</html>

绑定事件

<!DOCTYPEhtml>

<htmllang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>

        <input id=‘i1‘type="button" value="一键输入用户名">

    </div>

    <div>

        <input type="text"name="username">

    </div>

    <script>

        // 当点击按钮时向input框输入 houyafan

        // function demo(ths) {   ###绑定后(如通过onclick绑定函数)ths就代表该标签。

        //    ths.parentElement.nextElementSibling.lastElementChild.value = ‘222‘

        // }

        var demo =document.getElementById(‘i1‘);

        demo.onclick = function () {   ###当点击的时候再绑定 匿名函数

           demo.parentElement.nextElementSibling.lastElementChild.value = ‘222‘;

        }

    </script>

</body>

</html>

面向对象的编程

<!DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    // function f(name) {
    //    this.name = name;     ###
与this使用相关(相当于py中的class
    //    this.say = function () {
    //         console.log(‘say-->‘+this.name)
    //    }
    // }
    // var obj = new f(‘dsx‘);   ##
实例化  调用实例化方法。
    // console.log(obj.name);
    // obj.say()




    // function f(name) {
    //    this.name = name;
    //    this.say = function () {
    //         console.log(this.name)
    //    }
    // }
    //
    // var obj = new f(‘dsx‘);
    // console.log(obj.name);
    // obj.say()

    // class f():
    //    def __init__(name):
    //         self.name= name
    //    def say(self):
    //         print(self.name)

    // obj = f(‘dsx‘)

        // obj.name

</script>
</body>
</html>

2.js相关操作

注释

单行注释通过 //  多行通过 /* */

JS变量

 

name = ‘dsx‘; ?// 默认全局变量

function ?func() {

    var ?name = ‘niulaoshi‘; // 局部变量

}

?

JS基本数据类型(JavaScript 声明数据类型通过new

在console操作

字符串

 

//定义字符串

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] = ‘牛教授‘;

// 第二种创建方式

var list2 = ?new Array(‘大师兄‘,‘牛教授‘);

// 第三种创建方式

var list3 = [‘大师兄‘,‘牛教授‘];

数组操作

var list3 = [‘大师兄‘,‘牛教授‘];

list3.length 数组的长度

list3.push(‘dsx‘) ?尾部追啊参数

list3.shift() 头部获取一个元素 并删除该元素

list3.pop() 尾部获取一个元素 并删除该元素

list3.unshift(‘dsx‘) ?头部插入一个数据

list3.splice(start, ?deleteCount, value) 插入、删除或替换数组的元素 ?  中间0即可插入

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:‘dsx‘,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)

})(‘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 = ‘dsx‘;

}

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();

?

序列化

1

2

?

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操作

原文地址:https://www.cnblogs.com/cslw5566/p/9269934.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved