HTML基础(JavaScript)

关于JavaScript的概念做两点说明:

1、它是一种网络脚本语言,用于嵌入到HTML页面中来做Web开发用。

2、它和JAVA半毛钱关系都没有。

如何使用

1、如何在HTML中嵌入

1-1、脚本写在<body>标签内的最底部,也就是</body>的上面。

1-2、直接在页面中定义:<script type=‘text/javascript‘>脚本代码</script>

1-3、作为文件被加载:<script src="JS文件的路径"></script>

1-4、书写规范:

1-4-1、在每条可执行的语句结尾添加分号(;)

1-4-2、注意缩进和添加空格,提高代码可读性

1-4-3、单行注释用// 多行注释用 /*内容*/

2、变量

Javascript的变量的作用域是根据function块来划分的(也就是说以function的一对大括号{ }来划分),for、if等块并不是作用域的划分标准:

function外的变量,不管是全局变量还是局部变量,在当前页面的所有function中都生效

function内的变量,局部变量是只在当前function中生效。全局变量是全局生效。

2-1、全局变量:name = ‘value‘;

2-2、局部变量:var name = ‘value‘;

3、字符串方法

>var name = ‘ value ‘    #定义一个字符串,两边各有一个空格

>name.trim()        #去除字符串两边的空格

"value"

>name.charAt(1)    #按照索引1获取字符串的第2个值(索引0是第1个值)

"v"

>name.substring(1,3)    #按照索引范围获取一个子序列字符串

"va"

>name.indexOf(‘u‘)    #查找字符串中字符的索引值

4

>name.length        #获取字符串长度

7

4、数组(列表)

>var list = [] 或 var list = Array()    #声明数组

#添加

>list.push(1)      #追加数字1

>list.push(‘abc‘)

[1, "abc"]

>list.unshift(0)    #在最前面插入

[0, 1, "abc"]

>list.splice(2,0,‘def‘)    #在索引值2前面插入

[0, 1, "def", "abc"]

#获取(移除)

>list.pop()    #获取最后一个值

"abc"

>list

[0, 1, "def"]

>list.shift()    #获取第一个值

0

>list

[1, "def"]

list.splice(index,N)    #获取从index处开始的N个元素

>list.splice(1,1)

["def"]

>list

[1]

#其他

>list=[1, 2, 3]

>list.slice(0,2)    #切片

[1, 2]

>list2=[3,4,5]

>list3=list.concat(list2)    #合并

[1, 2, 3, 3, 4, 5]

>list3.reverse()    #翻转

[5, 4, 3, 3, 2, 1]

>list3.join(‘_‘)    #字符串化

"5_4_3_3_2_1"

>list3.length    #长度

6

5、函数(function)

函数分为:

5-1、基本函数:需要通过事件调用才会执行的函数

例子:

     <script type="text/javascript">                
         function Foo(arg){
             console.log(arg);
         }
     </script>

5-2、自执行函数:当页面框架加载完成后自动执行的函数

例子:

     <script type="text/javascript">                
         (function Foo(arg){
             console.log(arg);
         })(‘test‘)
     </script>

6、循环

循环分为:

6-1、for:循环代码块一定的次数

例子:

            for (var i=0; i<5; i++){
                x = "The number is " + i;
                console.log(x);
            }

6-2、for/in:循环遍历对象的属性

例子:

            var list = [1,2,3,4]
            for (var i in list){
                x = "The number is " + list[i];
                console.log(x);
            }

6-3、while:当指定条件为true时循环指定的代码块

例子:

            var list = [1,2,3,4]
            while(list.length>1){
                list.pop()
                console.log(list);
            }

6-4、do/while:先执行一次代码,如果条件为true,就会重复这个循环

例子:

            var list = [1,2,3,4];
            do{
                list.pop();
                console.log(list);
            }while(list.length>1);

7、异常处理

语法:

try{

//在这里运行代码

}catch(err){

//在这里处理错误

}finally{

//非必须,若有则不管有无错误都会执行此代码块

}

例子:

        try{
            var n = m;
        }catch(err){
            console.log(err);
        }finally{
            console.log(‘code is end‘);
        }

博客的部分内容和思路整理自武沛齐的博客

时间: 2024-08-06 07:55:38

HTML基础(JavaScript)的相关文章

js基础--javascript基础概念之语法

掌握一门语言 必须先掌握它的语法! javascript 的语法和C.Java.Perl 的语法有些相似.但是比它们更加宽松. javascript 中的一切都是严格区分大小写的.例如变量: demo 和 Demo 两个变量是完全不同的. javascript 标示符,所谓标示符 是指 变量.函数.属性 的名字或函数的参数.标示符的格式是按照以下规则组合的一个或多个字符. 1.第一个字符必须是字母,下划线,或 $ 符号. 2.其他字符可以是字母.下划线.$ . 或数字. 注意 不能把关键字 保留

基础JavaScript练习(二)总结

任务目的 学习与实践JavaScript的基本语法.语言特性 练习使用JavaScript实现简单的排序算法 任务描述 基于上一任务 限制输入的数字在10-100 队列元素数量最多限制为60个,当超过60个时,添加元素时alert出提示 队列展现方式变化如图,直接用高度表示数字大小 实现一个简单的排序功能,如冒泡排序(不限制具体算法),用可视化的方法表达出来,参考见下方参考资料 任务注意事项 实现简单功能的同时,请仔细学习JavaScript基本语法.事件.DOM相关的知识 请注意代码风格的整齐

js基础--javascript基础概念之数组(二)

js基础--javascript基础概念之数组 数组栈方法 数组可以像栈一样.栈是一种先进后出的数据结构,最先添加的数据最后一个出来.栈方法添加数据也称为 推入  移除数据称为 弹出. js为数值栈方法提供了 push()   和  pop() ;  两个方法. push() push() 方法接受参数就是你要添加进入到数组的值.push()  方法会将他们逐一添加到数组的末尾  数组的length属性会跟着更新数据. *push(多个数组元素值) 返回的修改后的数组长度 var array =

js基础--javascript基础概念之数组

js基础--javascript基础概念之数组 在ECMAScript 中 ,数组是很常用的数据类型,js中的数组和其他很多语言的数组有明显的区别.js的数组可以保持任何类型的数值,一个数组中可以保存着多个不同类型的数值.js数组大小(长度)是可以调整的.可以随着数据的添加自动增长数组长度. 创建数组: 一.数组字面量 数组字面量由一对包含数组项的方括号[]表示. var array = [ 'kin', 'cheong', 'change', 'hello', 'haha', 'hi' ];

js基础--javascript基础概念之语句(二)

js基础--javascript基础概念之语句(二)label,break,continue.. break .  continue 语句. break  continue 语句用于在循环中精确控制代码的执行,其中break语句会立即退出循环,执行循环后面的语句. continue 则退出循环后返回到再次进入循环中. 如: var num = 0; for(var i = 0; i<=100; i++){ if(i >= 10){ break; } num = i; } alert(num);

回归基础: JavaScript 变量提升

from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScript引擎在执行的时候,把所有变量的声明都提升到当前作用域的最前面. 当然了,函数声明也是可以被提升的.然后,函数表达式却没有提升. 原文:Back to Basics: JavaScript Hoisting 译文:回归基础: JavaScript 变量提升 变量声明是所有的编程语言中最基础部分之

js基础--javascript基础概念之变量与作用域

js基础--javascript基础概念之变量.作用域 javascript按照ECMA-262 的定义,变量与其他语言变量有所不同.js变量时松散的,不需要事先定义变量类型的.这使得他只是一个保存特定值的一个名称.变量与其数据类型可以在脚本的生命周期内改变. 还有明白几点: JavaScript的变量作用域是基于其特有的作用域链的,JavaScript没有块级作用域. 基本类型和引用类型的值 ECMAScript 的变量有两种不同的数据类型:分别是 基本数据类型值 和 引用类型值 : 基本数据

零基础JavaScript编码(二)

任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM中的内容 任务描述 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上 <!DOCTYPE html> <html> <head> <meta charset=&

js基础--javascript基础概念之语句

js基础--javascript基础概念之语句 ECMA-262定义了一组语句(流程控制语句) 语句定义了EMCAScript 语法. 常见的if语句. 语法: if(condition) statement1 else statement2 其中.Condition 可以是任意表达式.而且对这个表达式求值的结果不一定是布尔值.因为script 会自动调用boolean 将值转换为布尔值.如果condition 的值是 true .则执行statement1 语句  否则  执行 stateme

零基础JavaScript编码(一)

任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以下示例代码,补充其中的JavaScript功能,完成一个JavaScript代码的编写 本任务完成的功能为:用户可以在输入框中输入任何内容,点击"确认填写"按钮后,用户输入的内容会显示在"您输入的值是"文字的右边 <!DOCTYPE html> <ht