html基础:js

js是一种脚本语言。在html中起到操控行为的作用。在html中,html代码如果是一个人的话,那么js就是这个人的行为

js在html的head中被引用,也可以在body中被引用。引用方式用<script></script>标签:<script src="public.js" type="text/javascript"></script>

放在head和body中的区别:因为h‘tml代码在解析时,是按顺序从上倒下运行的。如果放在head中,就会先执行js,js执行忘了才会继续body中的html,显示在页面。所以这种情况下,我们打开页面会先看见长时间的空白。因为正在加载js.用户体验不好。。而如果放在body中。在执行时,先执行body中的html代码,将页面先呈现在用户面前, 最后执行到js时,js可以在后台慢慢加载。用户体验比较好

一、字符串操作

//定义字符串
var str = ‘你开心就好!‘;
var name = ‘aaaaaa‘;
// 字符串的拼接
var name_str = name+str;
//字符串操作
str = ‘aaaaajijiji‘
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); //如果number带小数点,则会直接去掉小数点后内容
// 转换成小数
f =parseFloat(number)
布尔类型(true 或 false)
var t = true; var f = false;//python中都是大写的,js中都是小写的

二、数组

// 第一种创建方式 var list = new Array();
list[0] = ‘第一个元素‘;
list[1] = ‘第二个元素‘; 

// 第二种创建方式
var list2 = new Array(‘第一个元素‘,‘第二个元素‘); 

// 第三种创建方式
var list3 = [‘第一个元素‘,‘第二个元素‘]; 

数组操作 

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:‘dsx‘,age:18,sex:‘男‘ };
var age = dict.age; //通过key,获取到value
var name = dict[‘name‘];
delete dict[‘name‘] 删除
delete dict.age 删除

四、循环

//        if(1==2){
//            console.log(1111111)
//        }
//        else if(2==2){
//            console.log(2222)
//        }
//        else{
//            console.log(‘最后了‘)
//        }

//javascript当中如果是两个等号,代表不去校验数据类型是否相同.三个等号会判断数据类型
//        if (‘1‘==1){
//            console.log(11111)
//        }
// 以上代码会打印出11111

        if(‘1‘===1){
            console.log(1111111)
        }
        else{
            console.log(222222)
        }
//        以上代码会打印出222

//switch
        switch(2){
            case 1:
                console.log(1111);//多行代码的情况,必须加上分号
                break;//每个分支都必须加break
            case 2:
                console.log(22222);
                break;
            default:
                console.log(33333)

        }

//        for循环--字符串
        var name=‘dsx nhy‘;
        for(var a in name){//循环的是角标,0,1,2,3.。。
            console.log(name[a])
        }
// 数组,循环的还是角标
        var list=[‘大师兄‘,‘怒牛‘,‘andas‘];
        for(var i in list){
            console.log(list[i])
        }
//字典,循环的是key
        var dict={‘宝马‘:‘BMW‘,‘奔驰‘:‘bc‘};
        for (var d in dict){
            console.log(d);
            console.log(dict[d])
        }

//        下面这种方法,不支持字典的循环
        var list=[‘大师兄‘,‘怒牛‘,‘andas‘];
        for(var i=1;i<=list.length;i++){
            console.log(i);
            console.log(list[i])
        }

//        while循环
        while(1==1){//死循环
            console.log(111111)
        }

五、函数

//        常规函数
        function f(name,age){//可传参,也可不传
            console.log(name);
            console.log(age);

        }
        f(‘dsx‘,19)//        自执行函数
        (function (name) {
            console.log(‘自执行函数‘)

        })(‘实参name‘)
        //相当于先(function()),function函数外层括号成一个变量f,然后变量f后加上括号,可以自动执行f().等同下面代码
//        f=(function(){console.log(‘fdfd‘)});
//        f()

六、对象

通过new关键字创建对象

在js中,方法和类的区别在于是否有this.如果方法用到了js,将自动解析为类

<script>
    function f(name) {
        this.name=name;//函数中写了this,js就自动将函数当作一个类。this等同python中的self
        this.say=function(){//匿名函数
            console.log(‘say‘+this.name)
        }

    }
    var obj=new f(‘dfdf‘);//通过new创建对象
    console.log(obj.name);
    obj.say()
</script>

原文地址:https://www.cnblogs.com/bendouyao/p/9250723.html

时间: 2024-10-12 03:23:59

html基础:js的相关文章

[JS基础] JS 之数组排序

简单数组排序 这里的简单数组的定义是,数据的元素是基本的类型整型,字符型,浮点型等,而不是对象类型 排序方法就很简单,使用数组本身的sort 方法. 默认是升序排序. 看例子: <script> var jsArray = [100,2,4,30]; jsArray.sort(); alert(jsArray); </script> 输出的结果是: 100,2,30,4 和我们预想的结果不一样, 原因是默认情况下sort方法是按ascii字母顺序排序的,而非我们认为是按数字大小排序

JavaWeb基础—JS学习小结

JavaScript是一种运行在浏览器中的解释型的编程语言一.简介js:javascript是基于对象[哪些基本对象呢]和和事件驱动[哪些主要事件呢]的语言,应用在客户端(注意与面向对象的区分) js的三大特点: 交互性:信息的动态交互 安全性:不能访问本地磁盘的文件 跨平台性:能支持js的浏览器都能运行 JavaScript 对大小写敏感 与java的区别:(只是长得像而已,雷锋&雷峰塔)  1.不同公司开发的语言,java:Oracl js:网景公司 2.java:面向对象 js:基于对象(

JSON基础 JS操作JSON总结

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包. 本文主要是对JS操作JSON的要领做下总结. 在JSON中,有两种结构:对象和数组. 1. 一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟

11-24网页基础--Js基础语法

1.运算符 比较运算符(7种):==/===/!=/>/</<=/>= ===(全等于) 2.字符串substring的用法 3.练习题:累加求和(运用Js的方法) 4.进制转换

自测 基础 js 脚本。

<html> <head> <script> //function(<text>a{[]}lert('x')</text>)() document.write(' <img [email protected] onerror=alert(123) /> '); //说明直接在<script>标签 不会解码HtmlEncode eval("\141\154\145\162\164\50\47\61\47\51&qu

JS基础-----JS中的分支结构及循环结构

[分支结构] 一.if-else结构 1.结构的写法:if(判断条件){ //条件为true时,执行if的{} }else{ //条件为false时,执行else的{} } 2.注意事项 ①else语句块.可以根据情况进行省略. ②if和else后面的{}可以省略,但是省略{}后,if和else后面只能跟一条语句.(所以并不建议省略{}) 3.if的()中的判断条件,支持的情况: ①Boolean:true为真,false为假: ②String:空字符串为假,所有非空字符串为真: ③Number

JavaScript基础知识----零基础js入门练习题

1,什么是Javascript? 答:Javascipt是一种脚本语言,由web浏览器进行解释和执行. 2,JavaScript是由那几个部分组成?  答:主要分为以下三种: ECMAScript : 核心 DOM : 文档对象模型 BOM : 浏览器对象模型 3,请写出两种将Javascript的应用到网页的方式   答: 方法一:将javascript代码插入html文档<head>部分的<script>标签中 例: <head> <script type=“

JS基础----&gt;js中ajax的使用

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.今天我们就简单的学习一下ajax的使用及过程. ajax的使用 先贴出大致的代码,是请求本地的一个servlet,返回json格式的数据. function ajaxTest(argument) { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRe

基础 - JS插件 - 轮播图

大图在小屏幕下居中显示的2个方案 方案1 背景图的center center 方案2 子绝父相 left:50%  margin-left:-width的一半 <!--#zw-carousel--> <section id="zw-carousel" class="carousel slide" data-ride="carousel"> <!--活动指示器--> <ol class="caro

JS基础学习1——什么是基础js类和原型?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h