HTML之JS

news/2024/7/19 13:28:30 标签: HTML, JS

JS即Javascript,跟java、python、C++一样,都是是一种独立的语言。
HTML中可以将JavaScript/JS的代码写在head中,被script标签所包裹,当浏览器解释HTML时,遇到style标签时,按照CSS规则解释,遇到Script标签时,按照JavaScript的语法规则解释。


引入JavaScript代码

类似于Python的import

<script src=“public.js” type=“text/javascript”>


**head中引入JS 与 body中引入JS 区别**

html代码从上而下解析,如果在head中引入JS,影响页面打开的速度,用户看到的页面加载变慢,体验变差。所以通常放在html body的最下方,这样页面内容先展示,最后在加载JS。注:写在最下面要有底线,写在body内部的最底下。



注释

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



JS_24">JS变量

name = 'xiaohei'; // 默认全局变量 
function func() {
    var name = 'xiaohua'; // 局部变量 
}



JS_35">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'; 
// 字符串转int
var n = parseInt(number); 
// 转换成小数 
f =parseFloat(number)


布尔类型(truefalsevar t = true; var f = false;

数组类型

等同于python中的列表


创建数组
// 第一种创建方式 var list = new Array(); 
list[0] = 'hi'; 
list[1] = 'hello'; 
 
// 第二种创建方式 
var list2 = new Array('hi','hello'); 
 
// 第三种创建方式 
var list3 = ['hi','hello']; 
 
 
数组操作 
var list3 = ['hi','hello'];
 
list3.length 数组的长度 
 
list3.shift() 头部获取一个元素 并删除该元素
 
list3.unshift('ha') 头部插入一个数据 

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

list3.push('world') 尾部追加参数 

 
list3.splice(start, deleteCount, value) 插入、删除或替换数组的元素 
start 添加/替换/闪出去元素的位置index
deleteCount为0,插入元素
deleteCount为1,传var,替换元素
deleteCount为1,不传var,删除元素
 
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':'harry','age':18,'sex':'男' }; //key也可以不加单引号
var name = dict['name'];
dict['name'] = 'hi'; //key不存在则新增,存在则更新
var age = dict.age; 
dict.age = 10;  //key不存在则新增,存在则更新
delete dict['name'] 删除
delete dict.age 删除

定时器

setInterval(alert('hi'),5000); //参数1 为定时器执行的功能,第二个参数为定时器工作的间隔时间 毫秒为单位
 
function t1() {
    console.log('我是hi')
}
setInterval('t1()', 5000);// 可以运行方法

JS_153">JS条件判断语句

if (条件) {
    执行代码块
} else if (条件) {
    执行代码块
} else {
    执行代码块
};

//在js中,
//1 == '1'值相等,成立,
//1==='1' 要求不仅值相等,类型也要相同,不成立
 
if (1 == 1) {
    console.log('111')
} else if (1 == '1') {
    console.log('222')
} else if (1 === '1') {
    console.log('333')
} else if (1 == 1 && 2 == 2) { //and
    console.log()
} else if (1 == 1 || 2 == 2) { //or
    console.log()
}else {
	console.log('666')
}
 
switch (a) {
    case 1:
        console.log(111);
        break;
    case 2:
        console.log(222);
        break;
    default:  //如果所有条件都不成立,则执行default
        console.log(333)
}

JS_193">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)
})('hello');
 
作用域
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('hi');
console.log(obj.name);
 
// 类中定义方法,虽然可以用,但是在多个实例时 会重复实例方法,浪费资源
// 创建对象时,say每次创建对象,都会创建一个say的方法。 
function Foo1(name) {
    this.name = name;
    this.say = function () {
        console.log(this.name)
    }
}
var obj1 = new Foo1('hi_obj1');
obj1.say();

// .prototype类的原型,将共用的的方法抽出来;
// 当在实例化后,只创建了一个叫做Foo2的对象,对象内只有name,原型不会被实例化;
//在调用方法时先去原型中找是否有该方法,没有再去类中找。有执行,没有就报错 
function Foo2(name) {
    this.name = name
}
Foo2.prototype = {
    say: function () {
        console.log(this.name)
    }
};
var obj2 = new Foo2('hi_obj2');
obj2.say();

序列化

JSON.stringify(obj) 把obj对象变成字符串
JSON.parse(str) 把字符串变成obj对象

转义

转义中文或特殊字符

1、在标准的url的规范中是不允许出现中文字符或某些特殊字符的,所以要进行转义
2& 代表参数的链接,如果就是想传& 给后端那么必须转义 
encodeURI(url) 转义URL中的特殊字符
encodeURIComponent(url) 转义URI组件中的特殊字符
decodeURI(url) 解码 转义的字符
decodeURIComponent(url) 解码 URI组件中的字符

 
字符串转义
var name='你好' 
escape(name) 对字符串转义 
unescape(name) 转义字符串解码

http://www.niftyadmin.cn/n/1643668.html

相关文章

selenium之Xpath定位

一、什么是Xpath&#xff1f; XPath&#xff08;XML Path Language&#xff09;是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。 由于HTML文档本身就是一个标准的XML页面&#xff0c;因此我们可以使用XPath的语法来定位页面元素。 二、…

Linux命令:reboot

reboot 1.作用 reboot命令的作用是重新启动计算机&#xff0c;它的使用权限是系统管理者。 2.格式 reboot [&#xff0d;n] [&#xff0d;w] [&#xff0d;d] [&#xff0d;f] [&#xff0d;i] 3.主要参数 &#xff0d;n: 在重开机前不做将记忆体资料写回硬盘的动作。 &…

selenium之CSS Selector定位

什么是CSS Selector&#xff1f; CSS (Cascading Style Sheets) 是一种用于渲染 HTML 或者 XML 文档的语言&#xff0c;CSS 利用其选择器可以将样式属性绑定到文档中的指定元素。在 CSS 中&#xff0c;选择器是一种模式&#xff0c;用于选择需要添加样式的元素。 Css Selecto…

Linux命令:install

install 1.作用 install命令的作用是安装或升级软件或备份数据&#xff0c;它的使用权限是所有用户。 2.格式 (1)install [选项]... 来源 目的地 (2)install [选项]... 来源... 目录 (3)install &#xff0d;d [选项]... 目录... 在前两种格式中&#xff0c;会将一个目录下…

Selenium之Xpath VS CSS Selector

UI自动化测试常用的定位方式 driver.find_element_by_xpath()driver.find_element_by_css_selector() 两种定位方式比较&#xff1a; xpath&#xff1a;代码量多&#xff0c;不易维护css_selector&#xff1a;代码量少&#xff0c;简单易维护 区别&#xff1a; xpath可以直…

selenium之Webdriver API

一、操作webdriver webdriver元素定位方式 selenium.webdriver定位方式分为以下8类 ID ‘id’CLASS_NAME ‘class name’NAME ‘name’LINK_TEXT ‘link text’PARTIAL_LINK_TEXT ‘partial link text’TAG_NAME ‘tag name’CSS_SELECTOR ‘css selector’XPATH ‘x…

Linux命令:mount

mount 1.作用 mount命令的作用是加载文件系统&#xff0c;它的用权限是超级用户或/etc/fstab中允许的使用者。 2.格式 mount &#xff0d;a [&#xff0d;fv] [&#xff0d;t vfstype] [&#xff0d;n] [&#xff0d;rw] [&#xff0d;F] device dir 3.主要参数 &#xff0…

Linux命令:unmount

unmount 1.作用 unmount命令的作用是卸载一个文件系统&#xff0c;它的使用权限是超级用户或/etc/fstab中允许的使用者。 2.格式 unmount &#xff0d;a [&#xff0d;fFnrsvw] [&#xff0d;t vfstype] [&#xff0d;n] [&#xff0d;rw] [&#xff0d;F] device dir 3.使…