js入门基础

HTML/CSS/JS 的关系

html 负责页面内容显示和结构
css 页面美化
js 与用户交互
面试题：网页的三层结构结构是什么？各自的作用
结构层、表现层、行为层

cript标签的使用

<!--嵌入的方式-->
<script>
  js代码
</script>
<!-- 外部js文件引入的方式 -->
<script src="js文件路径"></script>
<!--标签内部-->
<!--事件属性-->
  <div onclick="alert('坦坦然')">div标签</div> 
<!--a 标签的特殊用法-->
  <a href="javascript:alert('aaaa')">百度</a>

注意：1.针对嵌入和外部js文件使用的时候 script标签哪需要就放哪
2. 如果使用外部js文件，那么script标签内部不能放任何js代码

输出语句

<script>
  // 文档输出 显示在浏览器上边
  document.write('文档输出')
  // 控制台输出  常用于代码调试
  console.log('控制台输出')
  // 弹框
  // alert('普通弹框')
  // confirm('确认弹框')
  prompt('请输入一个数字','25')  // 自带输入框的弹框
</script>

JS注释方法

// 单行注释
/* */ 多行注释

复习
html 注释
css注释 /* */
Java注释 同js
PHP注释 # /* */ //

注释的作用： 方便代码阅读

 变量

1. 概 念： 计算机中用来存储数据的
2. 变量的创建
   语法: var 变量名称 = 值
变量的命名规范
    包含数字(0-9)、字母(a-zA-Z)、下划线(_)、美元符号($)
   不能用数字开头
   不能使用系统关键字、保留字
   变量名称有意义
   驼峰命名法 首字母小写，其余单词首字母大写
3. 变量的扩展
a. 初始化赋值 创建变量的时候 赋值

<script>
  var age=12
</script>

b. 变量的值更新

<script>
  var age = 20  // 初始值
  age = 22  // age变量的值发生了变化
 
 
  var age1=23
  age  = age1   // age 结果：23  将age1变量的值赋给了age变量
</script>

4.特殊情况

1. 只声明变量

<script>
  var weight
  console.log(weight)  // 结果：undefined
</script>

2. 声明变量时 不加var 隐式声明 函数内部声明全局变量的时候

<script>
height='175cm'
  console.log(height);
</script

3. 同时定义多个变量, 变量之间使用英文逗号(,)隔开

<script>
   var num1=15,num2=20,num3=25
</script>

2.2 数据类型

复习
1. php中的数据类型：boolean(布尔)、int(整型)、float(浮点型)、string(字符串)、array(数组)、
object(对象)、NULL(空)、resource(资源)
2. Java中的数据类型：boolean(布尔)、int(整型)、float(浮点型)、string(字符串)、array(数组)、
object(对象)、NULL(空)、long、short、double、char、byte
3. JavaScript中的数据类型
boolean(布尔)、string(字符串)、number(数字)、object(对象)、undefined(未定义)、null(空)
布尔数据类型中只有true和false两个值
字符串使用引号(单引号和双引号)引起来
数字包括整数和浮点数、NaN
注意:当非数字字符串参与算术运算(+ 除外)的时候，得出的结果是NaN

获取变量的数据类型

typeof()

<script>
 var str3= '15'
  // 获取变量的数据类型
  console.log(typeof(str3))  // 结果：string
  console.log(typeof(NaN))  // 结果:number
</script>

运算符

算术运算符

+
-
*
/
%

比较运算符

<
>
<=
>=
==  等于       只比较值  值相等返回真，不等返回假
!=  不等于
===  恒等于(全等于)   比较值和数据类型  值和类型都相同时 返回真 否则返回假
!==  恒不等于(全不等于)

逻辑运算符

&& 逻辑与 两边都为真时，整体返回真，其余情况全为假
|| 逻辑或 只要有一边为真时，整体返回真， 当两边都为假时整体返回假
！ 逻辑非 取反 非真即假，非假即真

赋值运算符

=
+= a+=2 等价于 a=a+2
-=
*=
/=
%=

递增递减运算符

++ 每次加1
-- 每次减1

<script>
var num1=12
    var res = ++num1  + --num1  - num1-- + num1++ // num1 结果：?  res 结
果：?
</script>