网站建设报价单模板,网站建设需要了解的信息,php做网站需要数据库吗,商业综合体设计JavaScript
什么是JavsScript
JavaScript是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果#xff0c;增加用户与网页的交互性。
作为一种客户端语言#xff0c;JavaScript可以直接嵌入HTML#xff0c;并在浏览器中执行。
与HTML和CSS不…JavaScript
什么是JavsScript
JavaScript是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果增加用户与网页的交互性。
作为一种客户端语言JavaScript可以直接嵌入HTML并在浏览器中执行。
与HTML和CSS不同JavaScript使得网页不再是静态的而是可以根据用户的操作动态变化的。
JavaScript的作用
JavaScript在前端开发中扮演着重要角色其应用领域包括但不限于以下三种
客户端脚本用于在用户浏览器中执行实现动态效果和用户交互。
网页开发与HTML和CSS协同工作使得网页具有更强的交互性和动态性。
后端开发使用Node、JavaScript也可以在服务器端运行实现服务器端应用的开发。
JS导入方式
第一种是内联式在html文件中直接嵌入JS代码JS代码放在script标签内script标签可以在head也可以在body标签内
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJS导入方式/titlescriptconsole.log(Hello, Head 标签的内联样式)/script!-- 外部引入,导入外联样式 --script src./js/myscript.js/script
/headbodyh1JavaScript 的导入方式/h1 script// console.log表示在控制台打印一些日志内容console.log(Hellp, body标签的内联样式)alert(你好内联样式弹窗);/script
/body
JS基本语法 script// 变量var生成的变量是具有函数作用域var x;// 变量let生成的变量具有块级作用域let更安全更灵活它避免了var可以引发的一些问题特别是关于变量提升和块级作用域的方面let y 5;// 常量const pI3.14// 打印出x,y,pI打印结构 undefined、5、3.14。undefined的意识就是一个空值未定义的状态它是JS中的一种数据类型表示变量声明但没有初始化。console.log(x , y , pI);// 创建一个字符串let name小刘;console.log(name);// 创建一个空值// null与undefined的区别虽然他们两个都是表示缺失值的特殊值但是他们在含义上还是有区别的// undefined表示一个变量已被声明但尚未被赋值或者一个对象属性不存在,当函数没有返回值的时候,默认返回的也是undefined// null表示一个变量被明确赋值为空或者不存在,它是一个被赋予的值,表示一个空对象引用或者没有对象值// undefined表示变量可能在将来被赋值,或者表示某个值还没有被计算出来.而null,明确表示没有对象值// 在实际开发中根据语境选择哪个值let empty_value null;console.log(empty_value);/script
JS控制语句
JS控制语句包括条件语句和循环语句
条件语句
条件语句都会使用if、else if、和else三个关键字。
if语句用于执行一个代码块当指定的条件为真(true)时执行。语法如下
if(condition){//如果条件为真执行这里的代码
}
else语句用于在上一个If和所有的else if都为假时执行的代码块。语法如下
if (condition){//如果条为真执行这里的代码
}else{//如果条件为假执行这里的代码
}
else if语句用于在上一个if语句条件为假时检查另一个条件。可以有多个else if语句。语法如下
if (condition1){//如果条件1为真执行这里的代码
}else if (condition2){//如果条件2为真执行这里的代码
}else{//如果以上条件都为假执行这里的代码
}
代码示例 let age 18;//大于等于十八则输出你已经成年了,否则输出未成年if (age 18) {console.log(你已经成年了);}else{console.log(未成年);}let time 22;if (time 12) {alert(上午好);} else if (time 18) {alert(下午好);} else {alert(晚上好);}
循环语句
循环语句用于重复执行一段代码直到指定的条件不再满足为止。
for
for循环是一种常见的循环语句用于按照指定的条件重复执行代码块。语法如下
for(初始化表达式循环条件迭代器){//循环体执行这里的代码
}
代码示例 console.log(for 循环);// i0初始化我们这个循环变量为i,并且初始值为0;循环条件,当i10时,我们就执行这个for循环,每执行完一次 就执行一次i// i就是ii1的简写,也可以为i1for (let i 1; i11;i){console.log(i);}
while
while循环会在指定的条件为真的执行代码块。语法如下
whileO(循环条件){//循环体执行这里的代码
}
代码示例
// while死循环console.log(while 循环);let count 1;while (count 10){console.log(count);// 迭代条件count}
break与continue
循环关键字
break用于跳出循环结束循环进行。
continue用于跳过当前循环中的剩余代码继续下一次循环。
代码示例 console.log(循环关键字);for (var i 0;i5;i){// i2跳过这个代码if ( i 2){continue;}// i4终止这段代码if (i 4){break;}console.log(i);}
函数
函数是一段可重复使用的代码块它可接受输入(参数)、执行特定任务并返回输出。
function function_name(参数1参数2参数3...){//参数可以不写表示不传参//函数体执行这里的代码return 返回值;//可选返回值
}
代码示例如下
SCriptfunction hello(){console.log(hello world!);}
//调用这个函数hello()function hello_with_return(){return hello world! - 返回值}// 用a这个变量接收这个返回值let a hello_with_return();// 添加返回值console.log(a);console.log(hello_with_return());//传参 function hello_with_params(name){console.log(hello, name);}// 调用 hello_with_paramshello_with_params(如花);hello_with_params(Alice);// 作用域let global_var 全局变量;function local_var_function(){// 局部作用域let local_var 局部变量;console.log(函数内打印全局变量 global_var);console.log(函数内打印局部变量 local_var);}// 调用local_var_function();console.log(全局打印全局变量 global_var);// 因为local_var在局部作用域里面在外部访问不到console.log(全局打印局部变量 local_var);/SCript
事件
事件是文档或者浏览器窗口中发生的特定瞬间例如用户的点击、键盘的按下、页面的加载等。常见的时间如下
事件描述onClick点击事件onMouseOver鼠标经过onMouseOut鼠标移出onChange文本内容改变事件onSelect文本框选中onFocus光标聚集onBlur移开光标 事件的绑定
JS绑定事件的方法有三种
1、HTNL属性
2、DOM属性
3、addEventListener方法
代码示例
bodybutton onclickclick_event()这是一个点击事件按钮/buttoninput typetext onfocusfocus_event() onblurblur_event()script// 点击事件function click_event() {alert(点击事件触发了);}// 聚焦事件function focus_event(){console.log(获取焦点);}// 失去焦点function blur_event(){console.log(失去焦点);}/script
/body
注刚开始接触前端希望有大佬提出建议本人虚心学习。
